I'm trying to build a very simple app using angular UI-Router.
My index.html file:
<!DOCTYPE html>
<html ng-app="elara">
<head>
<script type="text/javascript" src="/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/ctrl/indexCtrl.js"></script>
<script type="text/javascript" src="/js/ctrl/registerCtrl.js"></script>
</head>
<body>
<ng-view> </ng-view>
</body>
</html>
app.js file
angular.module('elara', ['ui.router'])
.run(
['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
// It's very handy to add references to $state and $stateParams to the $rootScope
// so that you can access them from any scope within your applications.For example,
// <li ng-class="{ active: $state.includes('contacts.list') }"> will set the <li>
// to active whenever 'contacts.list' or one of its decendents is active.
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/tmpl/index.html',
controller: 'indexCtrl'
})
.state('register', {
url: '/register',
templateUrl: '/tmpl/register/register.tmpl.html',
controller: 'registerCtrl'
})
}
]);
The indexCtrl.js file
app = angular.module('elara', []);
app.controller('indexCtrl', ['$scope', function($scope){
$scope.message = "index"
}])
and registerCtrl.js is same. Just controller name and message is different.
in my x.tmpl.html files i just want to write message variable.
{{message}}
Problem is, when I navigate to url / or #/register I am always getting empty page. message variable is not in the page or my template htmls are not loaded.
Also there are not errors in the console.
