찾다

 >  Q&A  >  본문

前端 - 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;
 }]);
PHP中文网PHP中文网2744일 전561

모든 응답(2)나는 대답할 것이다

  • 高洛峰

    高洛峰2017-05-15 16:59:16

    angular.module('phonecatApp',[]) 기존 모듈을 사용할 때 후속 종속성을 추가하지 마세요. . .
    angular.module('phonecatApp'). . . 괜찮아!
    위와 유사하게 PhonecatApp이라는 모듈을 재정의했으며 종속성은 비어 있습니다[].

    회신하다
    0
  • 天蓬老师

    天蓬老师2017-05-15 16:59:16

    모듈이 재정의되었습니다. 컨트롤러에서 이름을 변경하면 앱이 이에 따라 달라집니다.

    회신하다
    0
  • 취소회신하다