Question

这是我的html代码：

    <!DOCTYPE html>
<html ng-app="movieModule">
<head>
    <meta charset="UTF-8" http-equiv="X-UA-Compatible" content="IE=edge, chrome=1, width=device-width, initial-scale=1">

    <script src="../Scripts/angular.min.js"></script>
    <script src="../Scripts/angular-route.min.js"></script>
    <script src="../Scripts/angular.resource.min.js"></script>
    <script src="../Scripts/jquery-2.1.1.min.js"></script>
    <script src="../Scripts/bootstrap.min.js"></script>

    <script src="../Scripts/movie-module.js"></script>
    <script src="../Scripts/Category/category-controller.js"></script>
    <script src="../Scripts/Category/category-repository.js"></script>

    <link href="../Content/bootstrap.min.css" rel="stylesheet" />
    <link href="../Content/themes/spacelab.min.css" rel="stylesheet" />
    <title>Movies Sample</title>
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <a class="navbar-brand active" href="#">Brand</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="Movies.html">Movies</a></li>
                        <li><a href="Categories.html">Categories</a></li>
                        <li><a href="Artists.html">Artists</a></li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <div class="row">
            <div ng-view=""></div>
        </div>
    </div>
</body>
</html>

这是我的路由协调文件：

var movieModule = angular.module("movieModule", ['ngRoute', 'ngResource'])
.config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/Categories.html', { templateUrl: '/Categories.html', controller: 'categoryController' });
});

我正在尝试使用angularjs创建示例单页应用程序。但是当我点击Categories菜单时，我的路由没有加载ng-view。

我的类别页面的HTML是：

<div class="well">
    <div class="table-responsive" ng-controller="categoryController">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Description</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="category in categories">
                    <td>{{ category.id }}</td>
                    <td>{{ category.name }}</td>
                    <td>{{ category.description }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

你的链接应该是这样的

<li><a href="#/Categories.html">Categories</a></li>

和

删除

   ng-controller="categoryController" in myCategory html

或

除去
controller: 'categoryController'
中的
config of $routeProvider
如果你保留这两个，js控制器将执行2次

Answer 2

以下是完整示例

<强> HTML 的的index.html

<!DOCTYPE html> <html data-ng-app="app"> <head> <title></title> <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> <script data-require="angular-route@*" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-route.js"></script> <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid">  <div class="navbar-header"> <a class="navbar-brand active" href="#">Brand</a> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="Movies.html">Movies</a> </li> <li><a href="#/Categories.html">Categories</a> </li> <li><a href="#/Artists.html">Artists</a> </li> </ul> </div>  </div>  </nav> <div class="row"> <div ng-view=""></div> </div> </div> </body> </html>

<强> Categories.html

<div class="well"> <div class="table-responsive"> <table class="table table-striped table-bordered"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Description</th> </tr> </thead> <tbody> <tr ng-repeat="category in categories"> <td>{{ category.id }}</td> <td>{{ category.name }}</td> <td>{{ category.description }}</td> </tr> </tbody> </table> </div> </div>

<强> JS：

var app = angular.module('app', ['ngRoute']); app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/Categories.html', { templateUrl: 'Categories.html', controller: 'CategoriesCtrl' }) .when('/Artists.html', { templateUrl: 'Artists.html' //controller: 'PhoneDetailCtrl' }). otherwise({ redirectTo: '/index' }); } ]); app.controller("CategoriesCtrl", function($scope) { $scope.categories = [{ id: '1', name: 'shohel', description: 'SSSSSSSSSSSSSSS' }, { id: '2', name: 'shohel', description: 'SSSSSSSSSSSSSSS' }]; });

<强> plunker here

关键点改变

templateUrl：'Categories.html'

<li><a href="#/Categories.html">Categories</a>

删除myCategory html中的ng-controller =“categoryController”

角度ng视图不起作用

2 个答案: