AngularJS Маршрут

Я новичок в AngularJS. Я пытаюсь изучить AngularJS с этого сайта (https://docs.angularjs.org/tutorial/step_07). Мой код нижеAngularJS Маршрут

index.html

<!doctype html> 
<html lang="en" ng-app="phonecatApp"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Angular Project</title> 
     <link rel="stylesheet" href="css/bootstrap.css"> 
     <link rel="stylesheet" href="css/app.css">   
     <script src="js/angular.min.js"></script> 
     <script src="js/angular-route.js"></script> 
     <script src="js/app.js"></script> 
     <script src="js/controllers.js"></script> 
    </head> 
    <body> 
     <div ng-view></div> 
    </body> 
</html>

controllers.js

var phonecatControllers = angular.module('phonecatApp', []); 

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; 
    }]);

app.js

'use strict'; 

/* App Module */ 

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' 
     }); 
    }]);

Мой код находится внутри angu папка htdocs моего компьютера , Я пытаюсь найти ниже URL

http://localhost/angu/#/phones

Но я получаю белую пустую страницу. Может ли кто-нибудь сказать, где проблема?

источник

2015-09-01 abu abu

Вы controller.js должен иметь phonecatControllers имени модуля вместо phonecatApp, поэтому в настоящее время, что происходит, вы промывка phonecatApp модуля, объявив его в controller.js снова.

Технически вы должны использовать phonecatControllers там имя & вы утешать должны показывать ошибки ошибки $injector moduler как вы не объявили о phonecatControllers модуль, который уже впрыскивается в phonecatApp модуле.

Controller.js

var phonecatControllers = angular.module('phonecatControllers', []); //<=-change here 

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; 
}]);

источник

2015-09-01 21:24:33

Благодаря @Pankaj. Ваше решение работает. Спасибо –

@abuabu Рад помочь вам .. Спасибо :) Спасибо :) –

ответ

Смежные вопросы