Would this result in presenting the page with header, footer and content block filled with content.list view?
$stateProvider
.state('contacts', {
abstract: true,
url: '/contacts',
views: {
header: { templateUrl: 'admin/header.html'},
content: {
templateUrl: 'contacts.html',
controller: function($scope){
$scope.contacts = [{ id:0, name: "Alice" }, { id:1, name: "Bob" }];
}
},
footer: { templateUrl: 'admin/footer.html'}
}
})
.state('contacts.list', {
url: '/list',
templateUrl: 'contacts.list.html'
})
.
<!-- index.html -->
...
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
...
.
<!-- contacts.html -->
<h1>Contacts Page</h1>
<div ui-view></div>
.
<!-- contacts.list.html -->
<ul>
<li ng-repeat="person in contacts">
<a ng-href="#/contacts/{{person.id}}">{{person.name}}</a>
</li>
</ul>
Yes, this will work. There is a working plunker.
The parent view's $scope (the view, defined in state 'contacts' views as a 'content') and its scope, will be a source for prototypical inheritance.
And that means, that its properties will be available in the child state 'contacts.list', because it is injected into that 'content' view
There is in detail more about it:
How do I share $scope data between states in angularjs ui-router?
To prove, it, we can extend the code snippet above with a list controller and inject some more contacts
...
.state('contacts.list', {
url: '/list',
templateUrl: 'contacts.list.html',
controller: 'listCtrl', // new controller
})
}
])
// we get already initiated contacts... coming from parent view
.controller('listCtrl', ['$scope', function($scope) {
$scope.contacts
.push({ id: 2, name: "from a child" });
}])
Check it here
Related
https://plnkr.co/edit/VV13ty8XaQ20tdqibmFy?p=preview
Expected
After login the dashboard state renders dashboard.html, and all components and ui-views should render: tickers, tags, social(named ui-view) and feed.
Results
After login the dashboard state renders dashboard.html however only the components tickers,tags and feed show up, but not the social (named-ui-view)
I feel that my problem lies somewhere around where I transition from the login state to the dashboard state. Once you hit the dashboard state, it serves up the default template which is the component element tag: <dash-module></dash-module>. This will then render the dash.component template: dashboard.html and controller. However I've lost access to the social view in the dashboard state object.
dashboard.html
<div class="jumbotron text-center">
<h1>The Dashboard</h1>
</div>
<div class="row">
<tickers-module></tickers-module>
<tags-module></tags-module>
// Expecting the social-module-template.html to show below:
<div ui-view="social"></div>
<feed-module></feed-module>
</div>
The routerApp module with the dashboard component full code in Plnkr
// RouterApp module
////////////////////////////////////////////////////////////////////////////////
var routerApp = angular.module('routerApp', ['ui.router', 'tickers', 'tags', 'feed']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
const login = {
name: 'login',
url: '/login',
templateUrl: 'login.html',
bindToController: true,
controllerAs: 'l',
controller: function($state) {
this.login = function() {
$state.go('dashboard', {});
}
}
}
const dashboard = {
name: 'dashboard',
url: '/dashboard',
params: {
ticker: {},
tags: {}
},
template: '<dash-module></dash-module>',
views: {
'' : {
templateUrl: 'dashboard.html',
},
'social' : {
templateUrl: 'social-module-template.html',
controller: function($state) {
console.log('Social init', $state.params);
}
}
}
}
$stateProvider
.state(login)
.state(dashboard);
})
tags.component('dashModule', {
templateUrl: 'dashboard.html',
controller: function($scope, $state) {
console.log('dashModule loaded!');
}
})
This is the part that should render the social html content in the <div ui-view="social"></div>
views: {
'' : {
templateUrl: 'dashboard.html',
},
'social' : {
templateUrl: 'social-module-template.html',
controller: function($state) {
console.log('Social init', $state.params);
}
}
}
I made changes to your plunker here You were missing # here.
const dashboard = {
name: 'dashboard',
url: '/dashboard',
params: {
ticker: {},
tags: {}
},
template: '<dash-module></dash-module>',
views: {
'' : {
templateUrl: 'dashboard.html',
},
'social#dashboard' : {
templateUrl: 'social-module-template.html',
controller: function($state) {
console.log('Social init', $state.params);
}
}
}
}
In order for these components to appear under the home state, we must define them using absolute naming. Specifically, we must use the # syntax to tell AngularJS that these components of our application should be mapped to a specific state. This follows the viewName#stateName syntax and tells our application to utilize named views from an absolute, or specific state. You can read more about relative vs. absolute names here.
See this for more information.
The problem you have is named view has to render in same state i.e Dashboard.
Change the following and it should work.
social#dashboard
Check this Plunkr
Named Views UI router
Been following through some Angular JS tutorials and I'm trying to translate them into the Ionic framework but running into some problems. I'm trying to write a reusable HTML control but the model is not being bound to the view. Here is my code:
//App.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.directives'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html'
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'PlaylistsCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
//Controller.js
angular.module('starter.controllers', [])
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
//Directives.js
angular.module('starter.directives', [])
.directive('testInfo', function(){
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'templates/test_view.html'
};
});
//Test View
<button class="item ion-item" >
The playlist title is + {{playlist.title}}
</button>
//App View
<ion-content>
<ion-list>
<ion-item ng-repeat="playlist in playlists" >
<div ng-click="playListSelected($index)">
<test-info info="playlist"></test-info>
</div>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
//Index.html
I know I'm linking my js files correctly, however in the custom view the playlist.title never has a value. The controller never seems to bind to the html element. Double checking some angular tutorials I was going through, I'm following a similar approach and can't seem to figure out what the problem is.
In your directive you are defining a value on the directive's scope named info. So inside the template for the directive, you need to reference that with the name info, not playlist.
<button class="item ion-item" >
The playlist title is + {{info.title}}
</button>
I'm new to angular and I'm trying to understand nested views concept.
Based on the example provided in their documentation: https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views
//home.html
<body>
<div ui-view="header"></div>
<div ui-view="settings"></div>
<div ui-view="content"></div>
</body>
I have settings.html which has a check box. If it's checked it will load in the view(not named) the advanced settings template if not it will load the basic template
//settings.html
<input type="checkbox" ng-change="change()" ng-model="advancedSettings" />
<div ui-view></div>
so far I have defined something like this:
$stateProvider
.state('home', {
views: {
'header': {},
'settings': {
templateUrl: 'settings.html'
},
'content': {},
}
})
since I have 2 templates basicSettings.html and advancedSettings.html that I need to load in the view from settings.html based on that checkbox, I thought I have to declare something like this:
.state('settings#home.basic',(){
templateUrl: 'basicSettings.html'
});
but it's not working, instead I receive a lot of errors on console. How is the best way to implement this, without removing names from homepage views(header,settings,content), also how do I change the view based on the check box?
Thanks
There is a working plunker
Solution here could be with states defined like this:
$stateProvider
.state('home', {
abstract: true,
url: "/home",
views: {
'header': {
template: "This is HEADER"
},
'settings': {
templateUrl: 'settings.html',
controller: 'HomeCtrl',
},
'content': {
template: "This is CONTENT"
},
}
})
.state('home.basic', {
url: "/basic",
templateUrl: 'basicSettings.html'
})
.state('home.advanced', {
url: "/advanced",
templateUrl: 'advancedSettings.html'
})
we have parent state "home" and two children. These are triggered on change by 'HomeCtrl', e.g. like this:
.controller('HomeCtrl', ['$scope', '$state',
function($scope, $state) {
$scope.advancedSettings = false;
$scope.change = function(){
var childState = $scope.advancedSettings
? "home.advanced"
: "home.basic";
$state.go(childState);
}
}])
So, based on the setting, the view target "settings" and its ui-view="" (unnamed one) is filled with a child state - basic or advanced
Check it here
I am trying to inject a resolve object with loaded data into my controller but I get an Unknown Provider error :
Unknown provider: configServiceProvider <- configService
Here is my code:
StateProvider
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "#",
resolve: {
configService: function () {
return {
"helloText": "Welcome in Test Panel"
};
}
}
})
Controller
function MainCtrl($scope, configService) {
$scope.config = configService;
};
angular.module('dot', ['ui.router'])
.config(config)
.controller('MainCtrl', MainCtrl)
Snippet
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("#");
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "#",
resolve: {
configService: function() {
return {
"helloText": "Welcome in Test Panel"
};
}
}
})
};
function MainCtrl($scope, configService) {
$scope.config = configService;
};
(function() {
angular.module('dot', [
'ui.router', // Routing
])
.config(config)
.run(function($rootScope, $state) {
$rootScope.$state = $state;
})
.controller('MainCtrl', MainCtrl)
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<div ng-app="dot">
<div ng-controller="MainCtrl as main">
<div ui-view>
</div>
</div>
</div>
It's like my resolve object is defined after my controller has loaded... I'm new to angularJS and I feel like I am definitely missing something very obvious.
Thanks.
The ng-controller and UI-Router state resolve are incompatible. That's why your "another-world" 'MainCtrl' cannot be injected with a resolve/service defined in UI-Router.
But there is a simple way, just convert it into state:
// brand new root state, providing root (index.html) stuff
// not effecting url or state names
.state('root', {
abstract: true,
template: '<div ui-view=""></div>', // a target for child state
resolve: {
configService: function () { // ready for any state in hierarchy
return {
"helloText": "Welcome in Test Panel"
};
}
},
// brand new line, with 'MainCtrl', which is part of UI-Router now
controller: 'MainCtrl',
})
The original root state 'index' will now be placed inside of a real, but abstract, url not effecting state - 'root'
// adjusted state
.state('index', { // will be injected into parent template
parent: 'root'
abstract: true,
url: "/index",
templateUrl: ...,
// resolve not needed, already done in root
//resolve: { }
})
Adjusted index.html
<div ng-app="dot">
<div ui-view="></div> // here will be injected root state, with 'MainCtrl'
//<div ng-controller="MainCtrl as main">
// <div ui-view>
// </div>
//</div>
</div>
Maybe also check - Nested states or views for layout with leftbar in ui-router?
I'm trying to make nested states, but something is wrong and I can't figure out why.
I have these states in my angular app:
/client (list clients)
/client/:id (show client)
/client/new (new client)
And now, I'm trying to do:
/client/:id/task (list clients tasks)
/client/:id/task/new (create new task for this client)
/client/:id/task/:idTask (show the client task)
All the states are working, but the task states is not changing the content.
My index.html with the ui-view "main":
<section id="container">
<header></header>
<sidebar></sidebar>
<section class="main-content-wrapper" ng-class="{'main':collapse}">
<section id="main-content">
<div ui-view="main"></div>
</section>
</section>
</section>
My client.tpl.html with the ui-view "content":
<div class="row">
<div class="col-md-12">
<ul class="breadcrumb">
<li><a href ui-sref="home">Home</a></li>
<li class="active">Clients</li>
</ul>
</div>
</div>
<div ui-view="content"></div>
My app states:
$stateProvider
.state('/', {
url: '/',
templateUrl: '/app/application/application.tpl.html',
abstract: true
})
// CLIENT
.state('client', {
url: '/client',
abstract: true,
views: {
'main': {
templateUrl: '/app/client/client.tpl.html',
controller: 'ClientController'
}
}
})
.state('client.list', {
url: '/list',
views: {
'content': {
templateUrl: '/app/client/client.list.tpl.html',
controller: 'ClientListController'
}
}
})
.state('client.new', {
url: '/new',
views: {
'content': {
templateUrl: '/app/client/client.new.tpl.html',
controller: 'ClientNewController'
}
}
})
.state('client.show', {
url: '/:id',
views: {
'content': {
templateUrl: '/app/client/client.show.tpl.html',
controller: 'ClientShowController',
}
}
})
Tasks states
// TASKS
.state('client.details', {
url: '/:idClient',
abstract: true,
views: {
'content': {
templateUrl: '/app/task/task.tpl.html',
controller: 'TaskController'
}
}
})
.state('client.details.task', {
url: '/task',
views: {
'content': {
templateUrl: '/app/task/task.list.tpl.html',
controller: 'TaskListController'
}
}
})
.state('client.details.task.new', {
url: '/new',
views: {
'content': {
templateUrl: '/app/task/task.new.tpl.html',
controller: 'TaskNewController'
}
}
})
.state('client.details.task.show', {
url: '/:idTask',
views: {
'content': {
templateUrl: '/app/task/task.show.tpl.html',
controller: 'TaskShowController'
}
}
});
So, when I click to go to:
/client
/client/:id
/client/new
Everything works fine, the content change, but, when I click to go to:
/client/:id/task
/client/:id/task/:idTask
/client/:id/task/new
The content don't change, actually, the content gets empty.
UPDATE 1
The link to the task list is in my sidebar, sidebar is a directive:
Directive:
.directive('sidebar', [function () {
return {
restrict: 'E',
replace: true,
templateUrl: '/common/partials/sidebar.html'
};
}])
Template:
<aside class="sidebar" ng-class="{'sidebar-toggle':collapse}" ng-controller="SidebarController as sidebar">
<div id="leftside-navigation" class="nano">
<ul class="nano-content">
<li class="active">
<a href ui-sref="home"><i class="fa fa-dashboard"></i><span>Home</span></a>
</li>
<li class="sub-menu">
<a href ng-click="toggle()">
<i class="fa fa-users"></i>
<span>Clients</span>
<i class="arrow fa fa-angle-right pull-right"></i>
</a>
<ul style="height: {{height}}px; overflow: hidden;">
<li ng-repeat="client in session.clients">
<a href ui-sref="client.details.task({id:client.id})">{{client.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</aside>
The link in ui-sref is: /client/10/task
Solution there is surprisingly simple, but the concept behind could be a bit challenging.
So the state definition should be like this
Client root state is without any change. It does inject its view into ui-view="main" of the root state (index.html)
// CLIENT
.state('client', {
...
views: {
'main': {
templateUrl: '/app/client/client.tpl.html',
...
}
}
})
Now, we have first level children. They will target ui-view="content" of their parent (client and its template injected into ui-view="main")
.state('client.list', {
views: {
'content': {
....
})
.state('client.new', {
url: '/new',
views: {
'content': {
...
})
...
So until now, everything is working. Below is a change. We try again inject our templates into ui-view="content" - good. But it is not defined in our parent. It is in our grand-parent - a Client state. So we are skipping one level. We have to use absolute naming for view name targeting
// TASKS
.state('client.details.task', {
views: {
// wrong
'content': {
// correct
'content#client': {
})
.state('client.details.task.new', {
views: {
// wrong
'content': {
// correct
'content#client': {
}
})
...
Now it should be clear. If not, maybe this could help a bit. The first level children, would work even with this state definition
.state('client.list', {
views: {
// working
'content': {
// also working
'content#client': {
....
})
Because we just used absolute naming - where the it is done for us out of the box (syntactic sugar). For more and even better explanation, please, see documentation:
View Names - Relative vs. Absolute Names
small cite:
Behind the scenes, every view gets assigned an absolute name that follows a scheme of viewname#statename, where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.
For example, the previous example could also be written as:
.state('report',{
views: {
'filters#': { },
'tabledata#': { },
'graph#': { }
}
})