我正在尝试创建一个简单的angularjs项目,但ng-view无法正常工作

时间:2015-10-18 16:47:44

标签: javascript jquery angularjs ng-view

我是angularjs的新手,请帮助我:

以下运行正常。它向我展示了页面上的HelloWorld,但是当控制器调用ng-view时,我没有显示我在控制器中保存的消息。

app-config.js代码:

var abc=angular
.module('videoManagement',['ngRoute']);

abc
.config(['$routeProvider',
 function($routeProvider){
	$routeProvider
	.when('/video',
	{	
		templateUrl:'video.html',
		controller: 'videoController'
	}).when('/category', {
		templateUrl:'category.html',
		controller: 'categoryController'
	}).otherwise({ 
		redirectTo:'/video'
	});
}]);

abc.controller('videoController', function($scope) {
    
    $scope.message = 'This is Add new order screen';
     
});
abc.controller('categoryController', function($scope) {
    
    $scope.message = 'This is Add new Ali ';
     
});

我的index.html

<!DOCTYPE html>
<html ng-app="videoManagement"  >
<head>
<meta charset="ISO-8859-1 ">
<title>Index</title>
<link   type="text/css" rel="stylesheet"
  href="resources/css/bootstrap.min.css"/>
</head>
<body  > 

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
        <span class="navbar-brand">Video Management</span>
        </div>
        <div>
        <ul class="nav navbar-nav">
            <li> <a href="#video">Video</a></li> 
            <li> <a href="#category">Category</a></li>
        </ul>
        </div>
    </div>
    </nav>
     <div class="container-fluid">
<div>Hello World</div>
<ng-view />
</div>

<div class="footer">  Please Allah! Help Us All</div>


<script>  type="text/javascript" 
scr="resources/js/lib/angular.min.js"</script>
<script>  type="text/javascript" 
scr="resources/js/lib/angular-route.min.js"</script>
<script>  type="text/javascript"
scr="resources/js/controller/app-config.js"</script>
<script>  type="text/javascript"
scr="resources/js/service/video-service.js"</script>
<script>  type="text/javascript"
scr="resources/js/controller/video-controller.js"</script>
<script>  type="text/javascript" 
scr="resources/js/controller/category-controller.js"</script>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
 <ul class="nav navbar-nav">
            <li> <a href="#video">Video</a></li> 
            <li> <a href="#category">Category</a></li>
        </ul>
&#13;
&#13;
&#13;

将其替换为以下

 <ul class="nav navbar-nav">
            <li> <a href="#/video">Video</a></li> 
            <li> <a href="#/category">Category</a></li>
        </ul>