路由和多视图单元不能以角度js显示？

您好，我尝试在我的anguar js代码中显示路由和多个视图，但是没有显示可以请您帮我解决问题以及如何解决它。请帮帮我。路由和多视图单元不能以角度js显示？

我的代码是这个

HTML index.html文件

<!doctype html> 
<html lang="en" ng-app="phonecatApp"> 
<head> 
    <title>New Page Angular</title> 
    <script type="text/javascript" src="angularjs-1_2_25-angular.min.js"></script> 
    <script src="app.js"></script> 
    <script src="controllers.js"></script> 
</head> 
<body> 

    <div ng-view></div> 

</body> 
</html>

App.js代码

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


phonecatApp.config(['$routeProvider', 

    function($routeProvider){ 

     $routeProvider. 
      when('/phones', { 
       templateUrl: 'phone-list.html', 
       controller: 'PhoneListCtrl' 
      }). 
      when('/phone/:phoneId', { 
       templateUrl: 'phone-details.html', 
       controller: 'PhoneDetailCtrl' 
      }). 
      otherwise({ 
       redirectTo: '/phone' 
      }); 
    } 

    ]);

Contrller的.js代码

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

phonecatControllers.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){ 

     $http.get('phones.json').success(function(data){ 
      $scope.computers = data; 
     }); 

}]); 


    phonecatControllers.controller('phoneDetailCtrl', ['$scope', '$routeParams', 
     function($scope, $routeParams){ 

      $scope.phoneId = $routeParams.phoneId; 

     }]);

To complete code is here Plunker

来源

2014-09-25 Rohit Azad

加载ng-route的脚本，你也有一个依赖于另一个的模块，并且在加载d之后加载依赖独立模块。在app.js之前加载控制器文件。 – 2014-09-25 07:12:40

你错过了在您的index.html 和你有几个拼写错误的手机，而不是手机......

请参阅固定的版本在这里

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


    phonecatApp.config(['$routeProvider','$locationProvider', 

     function($routeProvider,$locationProvider){ 

      $routeProvider. 
       when('/phones', { 
        templateUrl: 'phone-list.html', 
        controller: 'phoneListCtrl' 
       }). 
       when('/phone/:phoneId', { 
        templateUrl: 'phone-detail.html', 
        controller: 'phoneDetailCtrl' 
       }). 
       otherwise({ 
        redirectTo: '/phones' 
       }); 
     } 

     ]); 

phonecatApp.controller('phoneListCtrl', ['$scope', '$http', function($scope, $http){ 

     $http.get('phones.json').success(function(data){ 
      $scope.computers = data; 
     }); 

}]); 


    phonecatApp.controller('phoneDetailCtrl', ['$scope', '$routeParams', 
     function($scope, $routeParams){ 


      $scope.phoneId = $routeParams.phoneId; 

     }]);

来源

2014-09-25 09:18:06 sylwester

@RohitAzad请看这里http://www.thinkful.com/learn/angularjs-tutorial-build-a-gmail-clone/ – sylwester 2014-09-26 06:49:06

路由和多视图单元不能以角度js显示？

回答

相关问题