Angularjs ng-view 不显示页面

Question

我是 angularjs 的新手，我正在研究 angularjs 使用 ngRoute 的路由。

MasterPage.HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Styles/css/bootstrap.min.css" rel="stylesheet" />
    <script src="Script/JS/jquery-3.1.0.min.js"></script>
    <script src="Script/JS/bootstrap.min.js"></script>
    <script src="Script/Angular/angular.min.js"></script>
    <script src="Script/Angular/angular-route.min.js"></script> 
    <script src="Js/app.js"></script>       

</head>
<body ng-app="angualarModule">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container" style="width: auto;">
                <a class="brand" style="text-indent: 3em" href="#">
                    Dairy Management
                </a>
                <ul class="nav">
                    <li class="active"><a href="#/Home">Home</a></li>
                    <li><a href="#/Product">Product Master</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown">Customer Master                    
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#/CustomerMaster">Customer Master</a></li>
                            <li class="divider"></li>
                            <li><a href="#/CustomerRate">Customer Rate Master</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown">Distributer Master                    
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#/DistributerMaster">Distributer Master</a></li>
                            <li class="divider"></li>
                            <li><a href="#/DistributerRate">Distributer Rate Master</a></li>
                        </ul>
                    </li>
                </ul>
                <a class="btn" href="#" style="float:right;">
                    Logout
                </a>
            </div>
        </div>
    </div>
    <div ng-view></div>
</body>
</html>

app.js

var angualarModule = angular.module("angualarModule", ['ngRoute']);

angualarModule.config(function ($routeProvider) {  
    $routeProvider.
    when('/Product', {
        templateUrl: 'Templates/ProductMaster.html'
    });   

});

ProductMaster.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Script/JS/jquery-3.1.0.min.js"></script>
    <script src="../Script/Angular/angular.min.js"></script>
    <script src="../Js/app.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            alert('HI');
        });
    </script>
</head>
<body ng-app="angualarModule">
    <h1>Product Master</h1>
</body>
</html>

当我单击 ProductMaster link 时，该页面未显示在 ng-view 中。
控制台没有错误。
事实上 alert('HI') 也会被调用，它出现在 ProductMaster.html 页面中。

但是ng-view没有显示需要的页面。

谢谢......

Answer 1

ProductMaster.html 应该只是 html（不是整个页面）：

<h1>Product Master</h1>

要调用您的 JS 代码，请在路由对象中使用 controller，就像此处描述的那样 $routeProvider

 $routeProvider.
        when('/Product', {
            templateUrl: 'Templates/ProductMaster.html',
            controller: 'ProductMasterController', <-- this for JS code
        });

Answer 2

尝试更改这两行：

<script src="Script/Angular/angular.min.js"></script>
<script src="Script/Angular/angular-route.min.js"></script>

有了这些

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>

如果路由正常，则 Script/Angular/ 中缺少您的脚本。

并且不要在局部中使用完整的 html 页面结构（如 body 和 head 标签）。

var angualarModule = angular.module("angualarModule", ['ngRoute']);

angualarModule.config(function ($routeProvider) {  
    $routeProvider.
    when('/Product', {
        template: 'ProductMaster.html'
    })
    .otherwise({ 
          redirectTo: '/form' 
    });   

});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Styles/css/bootstrap.min.css" rel="stylesheet" />
    <script src="Script/JS/jquery-3.1.0.min.js"></script>
    <script src="Script/JS/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
    <script src="app.js"></script>       

</head>
<body ng-app="angualarModule">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container" style="width: auto;">
                <a class="brand" style="text-indent: 3em" href="#">
                    Dairy Management
                </a>
                <ul class="nav">
                    <li class="active"><a href="#/Home">Home</a></li>
                    <li><a href="#/Product">Product Master</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown">Customer Master                    
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#/CustomerMaster">Customer Master</a></li>
                            <li class="divider"></li>
                            <li><a href="#/CustomerRate">Customer Rate Master</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown">Distributer Master                    
                        <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#/DistributerMaster">Distributer Master</a></li>
                            <li class="divider"></li>
                            <li><a href="#/DistributerRate">Distributer Rate Master</a></li>
                        </ul>
                    </li>
                </ul>
                <a class="btn" href="#" style="float:right;">
                    Logout
                </a>
            </div>
        </div>
    </div>
    <div ng-view></div>
</body>
</html>

Answer 3

ProductMaster.html 中的代码是不必要的，除了 <h1>Product Master</h1>。

ProductMaster 模板只是您已经包含的模板的一部分 MasterPage.html，因此在另一个模板中包含其他模板是多余的。

因此，您的 MasterPage.html 应该只包含 <h1>Product Master</h1>，而不是完整的 html。它应该有效。 [支持 Plunk - http://plnkr.co/edit/hvle5ceu9n4cOVPugbdm?p=preview]

此外，如果您使用的是 Bootstrap 的 JS，请确保您的 jQ 版本应低于 3。

Angularjs ng-view 不显示页面

Angularjs ng-view does not display the Page

angularjs

ng-view

MasterPage.HTML

app.js

ProductMaster.html