Javascript angularjs使用工厂和；routeParams：如何编写detailcontroller
首先，我是stackoverflow&angularjs的新手，所以如果我的问题很糟糕，请原谅我 对于一个简单的新闻应用程序，我正在用angularjs创建一个主-细节视图，问题是：我无法让细节视图工作，主视图工作正常，链接正确，但是我无法在细节视图中获得json。我不知道应该如何在细节控制器内设置routeParams&factory injection。以下是我所拥有的： index.htmlJavascript angularjs使用工厂和；routeParams：如何编写detailcontroller,javascript,angularjs,Javascript,Angularjs,首先，我是stackoverflow&angularjs的新手，所以如果我的问题很糟糕，请原谅我 对于一个简单的新闻应用程序，我正在用angularjs创建一个主-细节视图，问题是：我无法让细节视图工作，主视图工作正常，链接正确，但是我无法在细节视图中获得json。我不知道应该如何在细节控制器内设置routeParams&factory injection。以下是我所拥有的： index.html <!doctype html> <html lang="en" ng-a
<!doctype html>
<html lang="en" ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular master-detail live-data test</title>
</head>
<body>
<div class="main">
<div ng-view></div>
</div> <!--/main-->
<script src="angular/angular.js"></script>
<script src="angular/angular-route.js"></script>
<script src="script/app.js"></script>
<script src="script/controllers/newsController.js"></script>
<script src="script/services/newsFactory.js"></script>
<script src="script/constants.js"></script>
</body>
</html>
// newsController.js << MASTER
(function () {
'use strict';
angular.module('test')
.controller('newsController', newsController);
newsController.$inject = ['newsFactory'];
function newsController(newsFactory) {
var vm = this;
newsFactory.getItems()
.success(function (items) {
vm.items = items;
})
.error(function (err) {
alert('something went wrong!')
});
}
})();
// newsController.js << DETAIL
(function () {
'use strict';
angular.module('test')
.controller('newsItemController', newsItemController);
newsItemController.$inject = ['$routeParams', 'newsFactory'];
function newsItemController($routeParams, newsFactory) {
var vm = this,
id = $routeParams.id;
vm.item = newsFactory.getItem = function (id) {
return items[id -1];
}
}
})();
(function () {
'use strict';
angular.module('test')
.constant('GLOBALS', {
newsUrl: 'data/news.json'
});
})();
我想你需要用$routeProvider服务配置你的angular模块。我猜你已经在app.js中注册了你的模块，这里没有提供 在这个js文件中，你可以放一些东西
angular.module('test',[ngRoute])
.config(['$routeProvider'function($routeProvider){
when('/main', {
templateUrl: 'main.html',
controller: 'newsController'
}).
when('/details', {
templateUrl: 'details.html',
controller: 'newsItemController'
}).
otherwise({
redirectTo: '/main'
});
}]);
在您的
newsItemController新闻工厂上创建一个新函数。这显然是错误的，因为您还访问了项目
，而该项目在新闻项目控制器
中不存在
您的工厂应该是唯一存放项目的地方，并且您提供了访问这些项目的方法：
(function () {
'use strict';
angular.module('test').factory('newsFactory', newsFactory);
newsFactory.$inject = ['$http', 'GLOBALS'];
function newsFactory($http, GLOBALS) {
var newsItems = [];
return {
getItems: function () {
return $http({
method: 'GET',
url: GLOBALS.newsUrl
}).success(function (items) {
newsItems = items;
return newsItems;
});
},
getItem: function (id) {
return newsItems[id];
}
};
}
})();
您仍然可以在newsController
中执行相同的操作，但在newsItemController
中，您可以调用：
vm.item = newsFactory.getItem(id);
更新：完整的NewsItemController
(function () {
'use strict';
angular.module('test')
.controller('newsItemController', newsItemController);
newsItemController.$inject = ['$routeParams', 'newsFactory'];
function newsItemController($routeParams, newsFactory) {
var vm = this;
var id = $routeParams.id;
vm.item = newsFactory.getItem(id);
}
})();
可能的问题：newsItemController.js
未包含在HTML中。它位于同一个文件newsController.js中（代码中的注释确实令人困惑，刚刚更正，谢谢注意）是否可以发布它的外观？当然可以。请稍等。是的，对不起，在这里，我打电话给控制器的部分如下：我会立即用app.js更新或原始帖子我犯的错误显然在newsItemcontroller中确实，这是有道理的，可以在帖子中显示newsItemcontroller的总体外观吗？这将是非常非常有用的，然后我可以学习一个工作的基本设置。我最后一次问你，谢谢！！！我已经在答案中添加了控制器。谢谢，它确实给了我1。未捕获的语法错误：意外标记=2。错误：[$injector:unpr]未知提供程序：newsFactoryProvider为1。发生了什么？我没有测试就写了它，因为我这里没有运行angular应用程序。
vm.item = newsFactory.getItem(id);
(function () {
'use strict';
angular.module('test')
.controller('newsItemController', newsItemController);
newsItemController.$inject = ['$routeParams', 'newsFactory'];
function newsItemController($routeParams, newsFactory) {
var vm = this;
var id = $routeParams.id;
vm.item = newsFactory.getItem(id);
}
})();