Angularjs ng-view does not work
I am trying to create a simple views with angualrjs + ngRoute.
Why it doesn't work for me???
Please, can anyone look at my Plunker example, and explain to me what am I doing wrong?
my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular Route training</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.angularjs.org/1.3.5/angular.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="main_container">
<div class="inner" ng-app="app">
<div class="container" ng-controller="MainController">
<span ng-cloak>{{text}}</span>
</div>
</div>
<div class="inner" ng-app="views">
<h3>Views Menu</h3>
<ul>
<li><a href="index.html">Back to HOME</a></li>
<li><a href="#/developers">Our Developers</a></li>
<li><a href="#/designers">Our Designers</a></li>
</ul>
<div ng-view></div>
</div>
</div>
</body>
</html>
this is app.js:
var app = angular.module('app', []);
var views = angular.module('views', ['ngRoute']);
views.config(function($routeProvider, $locationProvider){
$routeProvider.
when('#/developers', {templateUrl: 'views/dev.html', controller: 'DevCtrl'}).
when('#/designers',{templateUrl: 'views/design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: 'index.html' });
$locationProvider.html5Mode(true);
});
app.controller('MainController', function($scope) {
$scope.text = "Hello World!!!!";
});
views.controller('DevCtrl', function($scope) {
$scope.developers = [
{"name":"John", "family":"Doe"},
{"name":"Anna", "family":"Smith"},
{"name":"Peter", "family":"Jones"},
{"name":"Alex", "family":"Volkov"},
{"name":"Yaniv", "family":"Smith"},
]
});
views.controller('DesignCtrl', function($scope) {
$scope.designers = [
{"name":"Inna", "family":"Doe"},
{"name":"Anna", "family":"Smith"},
{"name":"Yafit", "family":"Jones"}
]
});
design.html:
<div id="designers" ng-controller="DesignCtrl">
<h3>Designers List</h3>
<table>
<tr>
<th>Name</th>
<th>Family</th>
</tr>
<tr ng-repeat="d in designers">
<td>{{d.name}}</td>
<td>{{d.family}}</td>
</tr>
</table>
</div>
and dev.html
<div id="developers" ng-controller="DevCtrl">
<h3>Developers List</h3>
<table>
<tr>
<th>Name</th>
<th>Family</th>
</tr>
<tr ng-repeat="dev in developers">
<td>{{dev.name}}</td>
<td>{{dev.family}}</td>
</tr>
</table>
</div>
thanks
Answer
The problem is incorrect usage of ng-app. Only declare ng-app once for your application, usually on the html element.
Then declare other modules as dependencies of your main module.
I put the ng-app declaration on the html tag and put your ng-routing in the app module, getting rid of the views module.
http://plnkr.co/edit/btL2QMyHxhDLH7cxZ1YV
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider, $locationProvider){
$routeProvider.
when('/developers', {templateUrl: 'dev.html', controller: 'DevCtrl'}).
when('/designers',{templateUrl: 'design.html',controller: 'DesignCtrl'}).
otherwise({ redirectTo: '/index' });
// $locationProvider.html5Mode(true);
});
<html ng-app="app">
You can also put the view-logic in a separate module, but usually you will then also put it in a different file.
The html5mode is disabled because it triggered an error (it's a little bit tricky to make that work).
Note: it actually is possible to use multiple ng-app by manually bootstrapping them, but you really shouldn't do this unless you have a very good reason for it.