Search code examples
javascriptjqueryangularjsng-view

I am trying to create a simple angularjs project but the ng-view is not working


I am new to angularjs kindly help me out:

The following runs fine. It shows me the HelloWorld on page but the message I am saving in the controller is not shown when ng-view is called by the controller.

app-config.js code:

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 ';
     
});

my 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>

Solution

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

    Replace it with following

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