路由和多视图完成未在Angular JS中显示？

Question

您好，我尝试在我的Angular 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'
            });
    }

    ]);

控制.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;

         }]);

要完成代码，请点击这里

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;

         }]);

路由和多视图完成未在Angular JS中显示？

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-09-25 09:18:06

路由和多视图完成未在Angular JS中显示？

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-09-25 09:18:06

解决方案1
1 已采纳 2014-09-25 09:18:06