我正在尝试使用AngularJS创建一个简单的博客网站。我才刚刚起步，所以我以为我不是做到这一点的最佳方法，因此，欢迎您提出其他建议。
我有一个带有两个博客控制器的controller.js文件。一个显示博客帖子列表，另一个通过包含HTML文件显示帖子内容。
controller.js
myAppControllers.controller('BlogListCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('articles/articles.json').success(function (articles) {
$scope.articles = articles;
});
}]);
myAppControllers.controller('BlogPostCtrl', ['$scope', '$routeParams', function ($scope, $routeParams) {
$scope.includeFile = 'articles/' + $routeParams.blogPostId + '.html';
}]);
article.json
[
{
"id": "test-article-one",
"title": "Test Article one",
"author": "Gareth Lewis",
"datePosted": "2015-06-23",
"summary": "This is a test summary"
},
{
"id": "test-article-two",
"title": "Test article two",
"author": "Gareth Lewis",
"datePosted": "2015-06-23",
"summary": "This is a test for article two"
}
]
app.js
when('/blog', {
templateUrl: 'partials/blog-articles.html',
controller: 'BlogListCtrl'
}).
when('/blog/:blogPostId', {
templateUrl: 'partials/blog-post.html',
controller: 'BlogPostCtrl'
}).
blog-post.html
<ng-include src="'partials/header.html'"></ng-include>
<!-- Want to add title, author, datePosted information here... -->
<article class="content">
<ng-include src="includeFile"></ng-include>
</article>
此博客列表可以正常工作。当我单击博客文章时，它也会同时提供HTML文件OK中的内容。不过，我希望能够重用title，author并datePosted从博客，post.html局部视图所选文章属性。最好的方法是什么？我是否需要以某种方式将它们传递给Controller，然后传递给视图？我真的不想将这些作为routeParams传递。还是我需要在articles.json上执行$ http.get并进行遍历以找到所选的文章，然后将属性值传递回视图？
谢谢您的帮助。
您说的建议值得欢迎，所以就去了。
1-将所有Blog逻辑传输到服务；
2-提供有关解决路线的数据。这是处理加载时间，404等期间错误的更好方法。您可以$routeChangeError在那里提供一个侦听器并进行处理；
3-在下面声明的服务上，您具有用于调用数据的方法和用于检索在该服务上缓存的列表的方法：
// services.js
myAppServices
.service('BlogService', ['$http', '$q', function ($http, $q) {
var api = {},
currentData = {
list: [],
article: {}
};
api.getSaved = function () {
return currentData;
};
api.listArticles = function () {
var deferred = $q.defer(),
backup = angular.copy(currentData.list);
$http.get('articles/articles.json')
.then(function (response) {
currentData.list = response;
deferred.resolve(response);
}, function () {
currentData.list = backup;
deferred.reject(reason);
});
return deferred.promise;
};
api.getArticle = function (id) {
var deferred = $q.defer(),
backup = angular.copy(currentData.article),
path = 'articles/' + id + '.html';
$http.get(path, {
cache: true
})
.then(function (response) {
currentData.article = {
path: path,
response: response
};
deferred.resolve(currentData.article);
}, function (reason) {
currentData.article = backup;
deferred.reject(currentData.article);
});
return deferred.promise;
};
return api;
}]);
在BlogService.getSaved()将检索存储的数据，每次通话后作出的。
我也已经创建了一种调用ng-include路径的方法，因此，您可以使用验证路径是否存在cache === true，当在视图上再次调用该路径时，浏览器将保留该路径的副本。同时也制作了博客文章的响应副本，因此您可以在需要时访问其路径和响应。
在下面的控制器上，它们经过了调整，可以满足当前的需求：
// controller.js
myAppControllers
.controller('BlogListCtrl', ['$scope', 'articles',
function ($scope, articles) {
$scope.articles = articles;
/* OTHER STUFF HERE */
}
])
.controller('BlogPostCtrl', ['$routeParams', '$scope', 'article' 'BlogService',
function ($routeParams, $scope, article, BlogService) {
// On `article` dependency, you have both the original response
// and the path formed. If you want to use any of it.
$scope.includeFile = article.path;
// To get the current stored data (if any):
$scope.articles = BlogService.getSaved().list;
// Traverse the array to get your current article:
$scope.article = $scope.articles.filter(function (item) {
return item.id === $routeParams.id;
});
/* OTHER STUFF HERE */
}
]);
并且更改了路由声明以在解析路由时加载数据。
// app.js
$routeProvider
.when('/blog', {
templateUrl: 'partials/blog-articles.html',
controller: 'BlogListCtrl',
resolve: {
articles: ['BlogService', '$routeParams', function (BlogService, $routeParams) {
return BlogService.listArticles();
}]
}
})
.when('/blog/:id', {
templateUrl: 'partials/blog-post.html',
controller: 'BlogPostCtrl',
resolve: {
article: ['BlogService', '$routeParams', function (BlogService, $routeParams) {
return BlogService.getArticle($routeParams.blogPostId);
}]
}
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句