Question

我想尝试在我的anguar 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

Answer 1

你错过了在你的index.html中，手机而不是手机的拼写错误很少......

请在此处查看固定版本http://plnkr.co/edit/KwxKVgVpZXVEeLVQGBNn?p=preview

    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;

         }]);

路由和多视图不显示在angularjs？

1 个答案: