Angularjs ng-view不起作用

我正在尝试使用angualrjs + ngRoute创建一个简单的视图。

为什么它对我不起作用???

拜托，谁能看看我的Plunker例子，并向我解释我做错了什么？

我的索引.html：

<!DOCTYPE html>
<html>
    <head>
        <title>Angular Route training</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
        <script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
        <script src="js/app.js"></script>       
    </head>
    <body>
        <div class="main_container">
            <div class="inner" ng-app="app">
                    <div class="container" ng-controller="MainController">
                        <span ng-cloak>{{text}}</span>
                    </div>
            </div>

            <div class="inner" ng-app="views">
                    <h3>Views Menu</h3>
                    <ul>
                        <li><a href="index.html">Back to HOME</a></li>
                        <li><a href="#/developers">Our Developers</a></li>
                        <li><a href="#/designers">Our Designers</a></li>
                    </ul>
                    <div ng-view></div>
            </div>
        </div>
    </body>
</html>

这是应用程序.js：

var app = angular.module('app', []);
var views = angular.module('views', ['ngRoute']);
views.config(function($routeProvider, $locationProvider){
    $routeProvider.
        when('#/developers', {templateUrl: 'views/dev.html', controller: 'DevCtrl'}).
        when('#/designers',{templateUrl: 'views/design.html',controller: 'DesignCtrl'}).
        otherwise({ redirectTo: 'index.html' });
    $locationProvider.html5Mode(true);
});
app.controller('MainController', function($scope) {
    $scope.text = "Hello World!!!!";
});
views.controller('DevCtrl', function($scope) {
    $scope.developers = [
        {"name":"John", "family":"Doe"}, 
        {"name":"Anna", "family":"Smith"},
        {"name":"Peter", "family":"Jones"},
        {"name":"Alex", "family":"Volkov"}, 
        {"name":"Yaniv", "family":"Smith"},
    ]
});
views.controller('DesignCtrl', function($scope) {
    $scope.designers = [
        {"name":"Inna", "family":"Doe"}, 
        {"name":"Anna", "family":"Smith"},
        {"name":"Yafit", "family":"Jones"}
    ]
});

设计.html：

<div id="designers" ng-controller="DesignCtrl">
    <h3>Designers List</h3>
    <table>
        <tr>
            <th>Name</th>
            <th>Family</th>
        </tr>
        <tr ng-repeat="d in designers">
            <td>{{d.name}}</td>
            <td>{{d.family}}</td>
        </tr>
    </table>
</div>

和开发.html

<div id="developers" ng-controller="DevCtrl">
    <h3>Developers List</h3>
    <table>
        <tr>
            <th>Name</th>
            <th>Family</th>
        </tr>
        <tr ng-repeat="dev in developers">
            <td>{{dev.name}}</td>
            <td>{{dev.family}}</td>
        </tr>
    </table>
</div>

谢谢

问题是ng-app的使用不正确。只为您的应用程序声明一次 ng-app，通常在 html 元素上。

然后将其他模块声明为主模块的依赖项。

我将 ng-app 声明放在 html 标签上，并将您的 ng-routing 放在应用程序模块中，摆脱了视图模块。

http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV

var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
    $routeProvider.
        when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
        when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
        otherwise({ redirectTo: '/index' });
    // $locationProvider.html5Mode(true);
});
<html ng-app="app">

您也可以将视图逻辑放在单独的模块中，但通常您也会将其放在不同的文件中。

html5mode 被禁用，因为它触发了一个错误（让它工作有点棘手）。

注意：实际上可以通过手动引导它们来使用多个ng-app，但是除非您有很好的理由，否则您真的不应该这样做。

我认为您在app.js文件中声明依赖项的方式存在问题，控制台也抱怨$locationProvider.html5Mode(true);

如果你想声明单独的应用程序，你应该做这样的事情

var app = angular.module('app', []);
var views = angular.module('views', []);
var mainApp = angular.module('mainApp', ['ngRoute','app','views']);
mainApp.config(function($routeProvider, $locationProvider){
    $routeProvider.
        when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
        when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
        otherwise({ redirectTo: 'index.html' });
    //$locationProvider.html5Mode(true);
});

这是完整的工作 http://plnkr.co/edit/LvPhShkkgTFQsFJ44Ggo?p=preview

相关内容

最新更新

热门标签：