Search code examples
javascriptangularjsurl-routingsingle-page-applicationangularjs-routing

AngularJS Route

I am new in AngularJS. I am trying to learn AngularJS from this site (https://docs.angularjs.org/tutorial/step_07). My code is as below

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

My code is inside angu folder of htdocs of my computer . I am trying to browse below URL

http://localhost/angu/#/phones

But I am getting white blank page. Could anyone say where is the problem ??

Solution

  • You controller.js should have phonecatControllers module name instead of phonecatApp, So currently what happening is you are flushing the phonecatApp module by declaring it in controller.js again.

    Technically you should be using phonecatControllers name there & you console must have showing an error $injector moduler error as you haven't declared the phonecatControllers module which has already injected in phonecatApp module.

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