在學習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;
}]);
angular.module('phonecatApp',[])使用已存在的模組的時候不要加後面的依賴了。 。 。
angular.module('phonecatApp')。 。 。這樣就ok了!
你上面那樣類似重新定義了一個名為phonecatApp的模組,依賴是空[]。
module 重定義了,controller 裡換個名字,app 中依賴它