javascript - Angular路由加载不了模版到ng-view
黄舟
黄舟 2017-04-10 17:49:14
[JavaScript讨论组]

先直接上代码了 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>
        <p ng-view>
        </p>
    </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,看起来应该会方便 点击这里

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(2)
黄舟

没有引入ngRoute这个模板的js

高洛峰

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号