Issue
I have the simplest ui.router example which doesn’t seem to work.
See below:
var routerApp = angular.module('mainApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
//$urlRouterProvider.otherwise('/home'); When I uncomment this, it loads /home without a problem but why is it going to the "otherwise" condition?
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'main.html'
})
});
My index file.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="/angular/angularApp.js"></script>
</head>
<body ng-app="mainApp">
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
I have been going on and on into this but I think I now have tunnel vision. Someone please help me out here. Thanks in advance!
Solution
I do not see any issue except you having the same controller for both, can you check the example below
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.state('top', {
url: "",
templateUrl: "header.html",
controller: 'topCtrl'
})
.state('top.side', {
url: '/app',
templateUrl: "side.html",
controller: 'filterCtrl'
})
.state('top.side.list', {
url: "/items?query",
templateUrl: "items.html",
controller: 'listCtrl'
})
.state('top.side.item', {
url: "/:id",
templateUrl: "item.html",
controller: 'itemCtrl'
});
});
Answered By – Sajeetharan
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0