Angular路由加载不了模版到ng-view

先直接上代码了 T. T
结构:
结构

index.html

<!DOCTYPE html>
<html lang="zh-HANS" ng-app="Nexus">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta charset="utf-8">
        <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <title>Nexus</title>
        <script src="javascripts/app.js"></script>
        <script src="controllers/controller.js"></script>
    </head>
    <body>
        <div ng-view>
        </div>
    </body>
</html>

app.js

angular.module('Nexus', ["ngRoute"])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'partials/list.html',
                controller: 'PhoneListCtrl'
            })
            .when(('/:phoneId', {
                templateUrl: 'partials/phone-detail.html',
                controller: 'PhoneDetCtrl'
            }))
            .otherwise({
                redirectTo: '/'
            })
    }])
    

controller.js

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

Nexus.controller('PhoneListCtrl',
    function($scope, $http) {
        $scope.list = ["nexux 6P", "nexus 5X"];
    });

Nexus.controller('PhoneDetCtrl',
    function($scope, $routeParams, $http) {
        $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
            $scope.phone = data;
        })
    });
    
    

打开后发现页面是空的。求教哪里没写对,谢谢!!

弄了个很渣大demo,看起来应该会方便 点击这里

阅读 4.5k
2 个回答

没有引入ngRoute这个模板的js

1.引入angular-route.js
2.add.js和controller.js中的模块名称用的同一个名字“Nexus”,建议将controller.js中的模块名称改一下

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题