2016-08-16 91 views
0

我正在使用angularJs,并且新增了它。我在$ routeProvider中遇到问题。

在此先感谢,如果有人可以帮助我:)

我没有得到在控制台的任何错误,但ngView也没有更新

的index.html

<!DOCTYPE html> 
<html lang="en"> 
<head data-ng-app="myApp"> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Demo Project</title> 

<!-- Bootstrap Core CSS --> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 

<!-- Custom CSS --> 
<link href="css/main.css" rel="stylesheet" type="text/css"> 

<!-- AngularJS script --> 
<script type="text/javascript" src="js/angular.min.js"></script> 
<script type="text/javascript" src="js/app.js"></script> 
<script type="text/javascript" src="js/route.min.js"></script> 
<script src="js/jquery.min.js"></script> 

<div id="wrapper"> 
    <!-- Navigation --> 
    <nav class="navbar navbar-default navbar-static-top" role="navigation" 
     style="margin-bottom: 0"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="/">Demo Work</a> 
     </div> 
     <div class="navbar-default sidebar" role="navigation"> 
      <div class="sidebar-nav navbar-collapse"> 
       <ul class="nav" id="side-menu"> 
        <li> 
         <a href="#">Dashboard</a> 
        </li> 
        <li> 
         <a href="#">Charts</a> 
          <ul class="nav nav-second-level"> 
           <li><a href="#">Flot Charts</a></li> 
           <li><a href="#">Morris.js Charts</a></li> 
          </ul> 
        </li> 
        <li> 
         <a href="#tables">Tables</a> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

    <!-- Page Content --> 
    <div id="page-wrapper"> 
     <div data-ng-view> 
     </div> 
    </div> 
    <!-- /#page-wrapper --> 
</div> 
</body> 
</html> 

dashboard.html

<div> 
    <h1>Contact Page</h1> 
    <p>{{ message }}</p> 
</div> 

tables.html 它也有一些代码相同dashboard.html

app.js

var demoProject = angular.module('myApp',['ngRoute']); 
demoProject.config(function($routeProvider) { 
    $routeProvider 
    .when('/',{ 
     templateUrl : 'page/dashboard.html', 
     controller : 'contactController' 
    }) 
    .when('/tables',{ 
     templateUrl: 'page/tables.html', 
     controller: 'tablesController' 
    }); 
}); 

demoProject.controller('contactController', function($scope) { 
    // create a message to display in our view 
    $scope.message = 'Everyone come and see how good I look!'; 
}); 

demoProject.controller('tablesController',function($scope){ 
    console.log("Tables controller"); 
}); 
+0

要吸引更多答案,请附上一张plnkr。 –

+0

是否有一个原因ng应用程序在''?通常它会出现在''或'' – stevenelberger

+0

@stevenelberger之一,这也是无法正常工作的原因之一。但我正面临着日蚀的问题。感谢您的建议 –

回答

1

您需要加载角度后加载app.js路线

<script type="text/javascript" src="js/angular.min.js"></script> 
<script type="text/javascript" src="js/route.min.js"></script> 
<script type="text/javascript" src="js/app.js"></script> 
+0

我根据您的建议对代码进行了修改,但无法使用。 ngView不更新 –

+0

添加视图路径的'/'盈方。 templateUrl:'page/tables.html', – Sajeetharan

+0

我认为它已经在那里了。 –