前端 - ng-view不能加载进模板
问题描述
在学习angularjs教程,ng-view 没有加载进模板,但是按照官方的写法又能加载进模板,我自己的写法不行!我的写法与官方的有啥区别,为啥不能加载进模板呢?下面是我的项目目录结构
app.js
’use strict’;/* App Module */angular.module(’phonecatApp’,[’ngRoute’]).config([’$routeProvider’,function($routeProvider) { $routeProvider .when(’/phones’,{ templateUrl:’partials/phone-list.html’,controller:’PhoneListCtrl’}) .when(’/phones/:phoneId’, { templateUrl:’partials/phone-detail.html’,controller:’PhoneDetailCtrl’}) .otherwise({redirectTo: ’/phones’});}]);
controller.js
angular.module(’phonecatApp’,[]).controller(’PhoneListCtrl’,[’$scope’,’$http’, function($scope, $http) { $http.get(’phones/phones.json’) .success(function(data) {$scope.phones = data.splice(0,5); }); $scope.orderProp = ’age’;}]).controller(’PhoneDetailCtrl’,[’$scope’,’$routeParams’,function($scope,$routeParams) { $scope.phoneId = $routeParams.phoneId;}]);官方教程上的写法
app.js
var phonecatApp = angular.module(’phonecatApp’, [ ’ngRoute’, ’phonecatControllers’]);phonecatApp.config([’$routeProvider’, function($routeProvider) { $routeProvider. when(’/phones’, {templateUrl: ’partials/phone-list.html’,controller: ’PhoneListCtrl’ }). when(’/phones/:phoneId’, {templateUrl: ’partials/phone-detail.html’,controller: ’PhoneDetailCtrl’ }). otherwise({redirectTo: ’/phones’ }); }]);
controller.js
var phonecatControllers = angular.module(’phonecatControllers’, []);phonecatControllers.controller(’PhoneListCtrl’, [’$scope’, ’$http’, function($scope, $http) { $http.get(’phones/phones.json’).success(function(data) { $scope.phones = data; }); $scope.orderProp = ’age’; }]);phonecatControllers.controller(’PhoneDetailCtrl’, [’$scope’, ’$routeParams’, function($scope, $routeParams) { $scope.phoneId = $routeParams.phoneId; }]);
问题解答
回答1:angular.module(’phonecatApp’,[])使用已存在的模块的时候不要加后面的依赖了。。。angular.module(’phonecatApp’)。。。这样就ok了!你上面那样类似重新定义了一个名为phonecatApp的模块,依赖是空[]。
回答2:module 重定义了,controller 里换个名字,app 中依赖它
相关文章:
1. docker - 如何修改运行中容器的配置2. docker安装后出现Cannot connect to the Docker daemon.3. 网页爬虫 - Python:爬虫的中文编码问题?4. javascript - 修改表单多选项时和后台同事配合的问题。5. ubuntu 远程管理KVM设置问题6. javascript - H5页面怎么查看console信息?7. javascript - vue生成一维码?求助!!!!!急8. css - 手机页面在安卓和苹果浏览器显示不同的小小问题9. javascript - 关于Js中 this的一道题10. angular.js - angularjs如何动态改变ng-model值,在controller中获取input中输入的值并组合post发送到后台
