I have been learning angular.js for a week now and I am trying to make a practice project. When I see the HTML code the < div ng-view > part is seen as just < ! -- ngView: -- >
Below are my files
app/index.html
<html data-ng-app="RhythmicWorks">
<head>
<title>RhytmicWorks Software</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster" />
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="jquery.videoBG/jquery.videoBG.js"></script>
<script src="js/videobg.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<!-- The following div includes the logo as well as the nav bar -->
<div data-ng-controller="common" class="common">
<div class="mainLogo">{{mainLogo}}</div>
<nav>
<ul class="fancyNav">
<li data-ng-repeat="item in navBarItems" id="{{item.id}}">
<a href="{{item.href}}">{{item.name}}</a>
</li>
</ul>
</nav>
</div>
<div class="content" data-ng-view></div>
</body>
</html>
app/js/controllers.js
'use strict'
var RhythmicWorksControllers = angular.module('RhythmicWorksControllers',[]);
RhythmicWorksControllers.controller('common',['$scope','navBarData',function($scope,navBarData){
//$scope.navBarItems = navBarData.query();
$scope.navBarItems = [{
"name":"Home",
"href":"#/home",
"id":"home"
},
{
"name":"News",
"href":"#/news",
"id":"news"
},
{
"name":"About us",
"href":"#/about",
"id":"about"
},
{
"name":"Services",
"href":"#/services",
"id":"services"
},
{
"name":"Contact us",
"href":"#/contact",
"id":"contact"
}];
//Main logo text. Can be replaced with a link to the logo
$scope.mainLogo = "RhythmicWorks";
}]);
RhythmicWorksControllers.controller('homeCtrl', ['$scope', function($scope){
$scope.home = "This is home page";
}]);
RhythmicWorksControllers.controller('newsCtrl', ['$scope', function($scope){
$scope.news = "news page";
}]);
RhythmicWorksControllers.controller('contactCtrl', ['$scope', function($scope){
$scope.home = "contact page";
}]);
RhythmicWorksControllers.controller('aboutCtrl', ['$scope', function($scope){
$scope.home = "This is about page";
}]);
RhythmicWorksControllers.controller('servicesCtrl', ['$scope', function($scope){
$scope.home = "This is services page";
}]);
app/js/app.js
var RhythmicWorks = angular.module('RhythmicWorks',['ngRoute','RhythmicWorksControllers','RhythmicWorksServices']);
RhythmicWorks.config(['$routeProvider',
function($routeProvider){
$routeProvider.
when('/home',{
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
}).
when('/news',{
templateUrl: 'partials/news.html',
controller: 'newsCtrl'
}).
when('/about',{
templateUrl: 'partials/about.html',
controller: 'aboutCtrl'
}).
when('/services',{
templateUrl: 'partials/services.html',
controller: 'servicesCtrl'
}).
when('/contact',{
templateUrl: 'partials/contact.html',
controller: 'contactCtrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
When I click on the links in the navbar, the url changes. If I check the HTML code the part is seen as just
Note: If I change templateUrl to just template :, it works fine.
I fail to understand the reason why templateUrl is not working correctly. The correct partial html files are present in the partials directory with some random text.
