Angularjs ng-view不显示Page

时间：2016-08-28 08:08:01

标签： angularjs ng-view

我是angularjs的新手，我正在使用ngRoute处理angularjs路由。

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链接时，该页面不会显示在ng-view中。
  • 控制台中没有错误。
  • 事实上，在ProductMaster.html页面中也会调用alert（'HI'）。

但是ng-view不会显示所需的页面。

感谢......

3 个答案:

答案 0 :(得分：0)

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

<h1>Product Master</h1>

要调用您的JS代码，请在路由对象中使用controller，如此处所述$routeProvider 

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

答案 1 :(得分：0)

尝试更改这两行：

<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/中缺少您的脚本。

并且不要在partials中使用完整的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>

答案 2 :(得分：0)

除了String以外，ProductMaster.html中的代码是不必要的。

ProductMaster模板只是已包含的MasterPage.html的一部分，因此在另一个内部将是多余的。

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

另外，请确保如果您使用的是Bootstrap的JS，那么您的jQ版本应该小于3。

相关问题
最新问题