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'
}
}
})
}
]);
Related
I'm having problem building a nested template using UI-Router. It seems it is unable to load or compile templates in the third level (or deeper).
I've created a plunker with a simplified example, this is the code:
angular.module('plunker', ["ui.router"])
.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/");
$locationProvider.html5Mode(false).hashPrefix('!');
$stateProvider
.state('home', {
url: "/",
controller: 'MainCtrl',
views: {
'main': {
template: 'Main content'
},
'secondary': {
templateUrl: "view2.html",
views: {
'hot': {
template: 'hot content'
},
'cold': {
template: 'cold content'
}
}
}
}
})
})
.controller('MainCtrl', function($scope) {
$scope.sayHello = 'Hello';
})
where the html is
<body class='container' ng-controller='MainCtrl'>
<h2>Nested template proof</h2>
<div ui-view>
<p>{{sayHello}}</p>
<div ui-view="main"></div>
<div ui-view="secondary"></div>
</div>
</body>
and view2.html is
<div>
<p>view2 loaded</p>
<div ui-view="hot"></div>
<div ui-view="cold"></div>
</div>
can any one tell me what I'm doing wrong? the 'hot' and 'cold' sections are not being compiled.
There is an updated and working example
The nesting of views inside one state must be done differently. We would need absolute naming - so this would be the syntax:
.state('home', {
url: "/",
controller: 'MainCtrl',
views: {
'main': {
template: 'Main content'
},
'secondary': {
templateUrl: "view2.html",
//views: {}
},
'hot#home': {
template: 'hot content'
},
'cold#home': {
template: 'cold content'
}
}
})
This is the absolute view naming, discussed e.g. here:
Angular-UI Router: Nested Views Not Working
Angular UI Router - Nested States with multiple layouts
Angularjs ui-router not reaching child controller
My index page looks like:
{{#content "left"}}
<div ui-view="viewLeft"></div>
{{/content}}
{{#content "main"}}
<div ui-view="viewMain"></div>
{{/content}}
In "viewLeft" I'd like to have a menu with links that load/show various states in "viewMain". I cannot figure our how to do this :(
My module definition looks like:
angular
.module('__MODULE__.projektbeteiligung', ['ui.router'])
.config(function ($stateProvider) {$stateProvider
.state('projektbeteiligung', {
url: '/projektbeteiligung',
views: {
"viewLeft": {
templateUrl: 'projektbeteiligung/projektbeteiligungLeft.tpl.html'
},
"viewMain": {
templateUrl: 'projektbeteiligung/projektbeteiligung.tpl.html',
controller: 'ProjektbeteiligungController'
}
}
})
.state('antrag_informationen', {
url: '/antrag_informationen',
views: {
"viewLeft": {
templateUrl: 'projektbeteiligung/projektbeteiligungLeft.tpl.html'
},
"viewMain": {
templateUrl: 'projektbeteiligung/antrag_informationen.tpl.html',
controller: 'AntragInformationenController'
}
}
})
;
});
Somehow this works but I'd like to avoid reloading "viewLeft".
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
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>
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".