I'm trying out Angular UI router for the first time. I'm having issues where the views are not being called accordingly. Check the plunker: http://plnkr.co/edit/cBfR6u2BPJvKN16vi6hG?p=preview
Does anything stand out on the router?
deviceApp.config(function ($stateProvider) {
$stateProvider
.state('devices', {
views: {
'environment': {
template: 'Look I am a view!',
controller: 'DataCtrl'
},
'devicedetail': {
templateUrl: 'index.html',
controller: 'DeviceCtrl'
}
}
}
)}
);
perhaps the absence of a "url" definition in your view object?
'environment': {
url: '/environment',
template: 'Look I am a view!',
controller: 'DataCtrl'
},
You can do something like that :
config.js
.config(function ($urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$urlRouterProvider.when('', '/');
})
app.js
state('main', {
url: '/',
views: {
'': { templateUrl: 'app/main/main.html', controller: 'MainCtrl'},
'navbar': { templateUrl: 'components/navigation/navbar/navbar.html'},
}
index.html
<body>
<header ui-view="navbar" class="header"></header>
<section class="content">
<div ui-view></div>
</section>
</body>
Related
i have defined my state like this below.
var app = angular.module('app', [
'ngAnimate',
'ngSanitize',
'ui.router',
'ui.bootstrap',
'ui.jq',
'abp'
]);
//Configuration for Angular UI routing.
app.config([
'$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: '/App/Main/views/home/home.cshtml',
menu: 'Home' //Matches to name of 'Home' menu in EMRNavigationProvider
})
.state('personview', {
url: '/person/view',
templateUrl: '/App/Main/views/person/view/index.cshtml',
views: {
"viewTop": { templateUrl: "/App/Main/views/person/view/viewTop.cshtml" },
"viewMain": { templateUrl: "/App/Main/views/person/view/viewMain.cshtml" },
"viewAllergies": { templateUrl: "/App/Main/views/person/view/allergies.cshtml" },
"viewAppointments": { templateUrl: "/App/Main/views/person/view/appointments.cshtml" },
"viewimmunization": { templateUrl: "/App/Main/views/person/view/immunization.cshtml" },
"viewNotes": { templateUrl: "/App/Main/views/person/view/notes.cshtml" },
},
menu: 'ViewPerson',
})
.state('personsearch', {
url: '/person/search',
templateUrl: '/App/Main/views/home/home.cshtml',
menu: 'SearchPerson'
})
;
}
]);
my index.cshtml for multiple named view looks like
<div class="right_col" role="main">
545465464646454545
<div ui-view="viewTop"></div>
<div ui-view="viewMain"></div>
<div class="row">
<div ui-view="viewAllergies"></div>
<div ui-view="viewAppointments"></div>
<div ui-view="viewimmunization"></div>
</div>
<div class="row">
<div ui-view="viewNotes"></div>
</div>
</div>
For some reason when i browse to http://myhost/#/person/view it gives me content for my home page and not the dashboard view (multiple named view) i was hoping with personview from above route.
if i remove property views from 'personview' named view it displays my hard coded 545465464646454545 correctly in screen and does not give content for home page.this tells me that having child views: under the route is not working.
what is wrong with route above for multiple named views that it does not like to render?
You must modify code like this:
Template index.cshtml must have tag <div ui-view="content"></div> and may include viewTop, viewMain
Template View.cshtml consists one of templates: viewAllergies, viewAppointments etc.
app.config([
'$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('person', {
abstract: true,
url: '/',
template:'<div ui-view=""></div>'
})
.state('person.view', {
url: '/personview',
views: {
'': {
templateUrl: '/App/Main/views/person/view/index.cshtml'
},
'content#person.view': {
templateUrl: '/App/Main/views/person/view/View.cshtml'
}
}
})
}
]);
I tryed simple layout but it seems nothing gets render. Layout.html is being loaded and that is all. There are no errors in console.
This is part of my config file
$stateProvider
.state('layout', {
url: '',
abstract: true,
templateUrl: viewsRoot + "layout.html",
controller: 'LayoutController',
})
.state('layout.sidebar', {
abstract: true,
templateUrl: viewsRoot + "sidebar.html",
controller: 'SidebarController'
})
.state('layout.mainview', {
abstract: true,
templateUrl: viewsRoot + "container.html",
})
.state('layout.mainview.object-details', {
url: '/object-details',
templateUrl: viewsRoot + "object-details.html",
controller: 'ObjectDetailsController'
})
.state('layout.mainview.home', {
url: '/',
templateUrl: viewsRoot + "home.html",
controller: 'HomeController'
})
$urlRouterProvider.otherwise('/');
This is layout.html:
<div ui-view="sidebar">
</div>
<div class="page-content-wrapper">
<div class="page-content" style="min-height: 1227px">
<!-- END PAGE SPINNER -->
<div ui-view="mainview">
</div>
<!-- END PAGE CONTENT-->
</div>
</div>
This is container.html
<ui-view></ui-view>
Should I use nested views instead of nested states?
You need to identify what renders where. You have two areas, "siderbar" and "mainview", but you are not identifying what template goes to what view in your state configs
$stateProvider
.state('layout.home',{
views: {
'mainview': {
templateUrl: '...',
controller: ...
},
'siderbar': {
templateUrl: '...',
controller: ...
}
}
})
See https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views for more information
I have the following:
Routes
function Config($stateProvider, $urlRouterProvider, USER_ROLES) {
$stateProvider
.state('dashboard', {
url: '/dashboard',
views: {
'header#': {
templateUrl: 'partials/layout/sections/auth/header.html'
},
'content#': {
templateUrl: 'partials/dashboard/template.html'
},
'centre-column#dashboard': {
templateUrl: 'partials/dashboard/content.html'
},
'left-column#dashboard': {
templateUrl : 'partials/dashboard/left-column.html',
controller : 'DashNavCtrl'
}
},
layoutType: 'three-column'
})
.state('dashboard.recruiter', {
views: {
'right-column#dashboard': {
templateUrl : 'partials/dashboard/recruiter/right-column.html',
controller : 'DashSidebarCtrl'
}
}
})
template.html
<!-- page-container -->
<div class="page-container">
<!-- main-container -->
<main class="main-container pad-e-2x" role="main" ui-view="centre-column">
</main>
<!-- /main-container -->
<div ui-view="left-column"></div>
<div ui-view="right-column"></div>
</div>
<!-- page-container -->
But when I transitionTo 'dashboard.recruiter', it doesn't display both the right and left columns.
Can anyone point me in the right direction?
I created working example, which shows all your setting in action. Not really sure which part of the code to show here, because it is working as it is, as you did it. I just used some templates instead of templateUrl
$stateProvider
.state('dashboard', {
url: '/dashboard',
views: {
'header#': {
templateUrl: 'header.html',
},
'content#': {
templateUrl: 'template.html'
},
'centre-column#dashboard': {
template: '<div class="layout center"><h3>center</h3></div>',
},
'left-column#dashboard': {
template: '<div class="layout left"><h3>left</h3></div>',
controller : 'DashNavCtrl'
}
},
layoutType: 'three-column'
})
.state('dashboard.recruiter', {
views: {
'right-column#dashboard': {
template: '<div class="layout right"><h3>right</h3></div>',
controller : 'DashSidebarCtrl'
}
}
})
With some css we can see that this is working as expected
I'm using modules /sub modules on the angular app, my controller doesn't load on a specific route but the view does, according to a comment on this question I should reference the child module inside the main module and that should do the trick.
this is my code for bootstrapping the app:
angular.module('mainApp', ['ui.bootstrap', 'ui.utils', 'ui.router', 'ngResource', 'ngAnimate', 'ngCookies', 'facebook', 'subModule1', 'subModule2', 'subModule3']);
angular.module('mainApp').config(function ($stateProvider, $urlRouterProvider, $locationProvider, FacebookProvider) {
$stateProvider.state("root",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html",
},
'header#': {
templateUrl: "/partial/header/header.html",
}
}
}).state('root.home', {
url: '/index',
views: {
'container#': {
templateUrl: '/partial/index/index.html',
controller: 'IndexCtrl'
}
},
}
).state('root.login', {
url: "/login",
views: {
'container#': {
templateUrl: '/partial/login/login.html',
controller: 'LoginCtrl'
}
},
});
FacebookProvider.init('xxxxxx');
$urlRouterProvider.otherwise('/index');
$locationProvider.hashPrefix('!');
});
I have the sub-module configuration in a separate folder named /subModule1/submodule1.js
angular.module('subModule1').config(function($stateProvider) {
$stateProvider.state("submodule1",
{
url: '',
abstract: true,
views: {
'footer#': {
templateUrl: "/partial/footer/footer.html",
},
'header#': {
templateUrl: "/partial/header/header.html",
}
}
}).state('submodule1.dashboard',
{
url: '/dashboard',
views: {
'container#': {
templateUrl: '/subModule1/partial/dashboard/dashboard.html',
controller: 'DashboardCtrl',
resolve: {
dashboardinfo: function($resource) {
var resourceGet = $resource('/submodule1/dashboard');
return resourceGet.get().$promise;
}
}
},
'sideBar#': {
templateUrl: '/submodule1/partial/sidebar/sidebar.html'
},
'navBar#': {
templateUrl: '/submodule1/partial/navbar/navbar.html'
}
}
});
});
the controller is defined as:
angular.module('subModule1').controller('DashboardCtrl', function ($scope, $interval, $resource, notification, dashboardinfo) { ... }
the index located on the root of the page which is the page layout have the
<html ng-app="mainApp">
and the controller have the ng-controller definiton as follows:
<div ng-controller="DashboardCtrl">
Everything is fine just the controller isn't running, it doesn't get executed by the view.
The ui-router and ng-controller="DashboardCtrl" are intended to work together. In the ui-router world we are assigning Controllers to views directly in the state definition.
So this (exactly as you have already have it, no change) is enough:
.state('submodule1.dashboard',
{
url: '/dashboard',
views: {
'container#': {
templateUrl: '/subModule1/partial/dashboard/dashboard.html',
controller: 'DashboardCtrl',
to say, that the view rendered inside of the ui-view="container" on the root (index.html) should be provided with DashboardCtrl.
There is an example using the above state definition (1:1 as possible).
This is the index.html content:
<div ui-view="header"></div>
<div ui-view="navBar"></div>
<div ui-view="container"></div>
<div ui-view="sideBar"></div>
<div ui-view="footer"></div>
And this links will correctly trigger the above states:
// root
<li><a ui-sref="root.home">root.home</a></li>
<li><a ui-sref="root.login">root.login</a></li>
// dashboard
<li><a ui-sref="submodule1.dashboard">submodule1.dashboard</a></li>
All the other details check here
My index.html file is as follows..
<div id="main">
<div ui-view>
</div>
My home.html file is as follows..
<div login id="loginBox"></div>
<div ng-show="users.length">
<hr/>
<div ui-view="header"></div>
<div ui-view="footer"></div>
My app.js file is as follows
var myapp=angular.module('angularProject', ['ui.bootstrap','ui.router','angularProject.filters', 'angularProject.services', 'angularProject.directives', 'angularProject.controllers'])
myapp.config(['$stateProvider', '$routeProvider' ,'$urlRouterProvider',function($stateProvider,$routeProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
abstract:true,
url : "/home",
templateUrl : 'views/home.html',
controller : 'homeCtrl'
// views: {
// "": {
// url:"/home",
// templateUrl: 'views/home.html',
// controller: 'homeCtrl'
// },
// "header#home": {
// templateUrl: "views/header.html"
// }
// }
})
.state('header', {
url : '/header',
templateUrl : 'views/header.html'
})
.state('footer', {
url : '/footer',
templateUrl : 'views/footer.html'
})
}]);
Which is an incomplete one. How should i design my app.js such that i can have following flow of view.
Home is parent in which header and footer are views..
It worked like this..
$urlRouterProvider.otherwise("home");
$stateProvider
.state('home', {
//abstract:true,
// url : "/home",
// templateUrl : 'views/home.html',
// controller : 'homeCtrl'
url:'',
views: {
'': {
//url:"/home",
templateUrl: 'views/home.html',
controller: 'homeCtrl'
},
"header#home": {
templateUrl: "views/header.html"
},
"footer#home": {
templateUrl: "views/footer.html"
},
"container#home": {
templateUrl: "views/container.html"
}
}
})
2 options:
You can use the default angular ngRoute module (Reference with example here and here).
You would have something like this:
index.html: (contains the layout of your website, including header/footer)
<div login id="loginBox"></div>
<div ng-show="users.length">
<hr/>
<div id="header"></div>
<div ng-view></div>
<div id="footer"></div>
home.html: (partial view of dynamic content to load dynamically)
<div id="content">
Your home content.
</div>
app.js:
var myApp = angular.module('myApp', []);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
}).
when('/page2', {
templateUrl: 'partials/page2.html',
controller: 'Page2Ctrl'
}).
otherwise({
redirectTo: '/home'
});
}]);
Or you can use ui-router for more advanced routing features. See this very good tutorial to get started.
-EDIT
Using $stateProvider, here is an example in Plunker that works with an index, linking to a sub-view "home".