I have the following states:
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.myClients', {
url: '/myClients',
//templateUrl: 'templates/myClients/myClients.html',
views: {
'menuContent': {
templateUrl: 'templates/myClients/myClients.html',
controller: 'clientController'
}
}
})
.state('app.myClients.rapida', {
url: '/rapida',
//templateUrl: 'templates/myClients/myClients.html',
views: {
'content_rapida#menuContent#app': {
templateUrl: 'templates/myClients/partials/rapida.html',
// controller: 'qSearchController'
}
}
})
menu.html
<ion-side-menus hide-back-button="true" enable-menu-with-back-views="true" ng-controller="menuCtrl">
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
myClients.html
<div class="div_clients" ng-controller="clientController">
<ion-nav-view name="content_rapida"></ion-nav-view>
<ion-nav-view name="content_lenta"></ion-nav-view>
<div class="clientFilter">
<h1 class="searchTitle">
FILTROS
</h1>
<div class="filtereRow">
Filtros (0)
<div class="executeBt">
<button class="execute" ng-click="">Ejecutar<i class="ion-ios-loop execute-icon"></i></button>
</div>
</div>
</div>
</div>
rapida.html
<h1>HI guys!</h1>
This works
/app/myClients
This doesn't works
/app/myClients/rapida
Hace you tried with
'content_rapida'
instead of
'content_rapida#menuContent#app'
at state definition?
Your view should already identify 'content_rapida' inside the parent view...
I finally did it!
I changed this
.state('app.myClients.rapida', {
url: '/rapida',
//templateUrl: 'templates/myClients/myClients.html',
views: {
'content_rapida#menuContent#app': {
templateUrl: 'templates/myClients/partials/rapida.html',
controller: 'qSearchController'
}
}
})
To this
.state('app.myClients.rapida', {
url: '/rapida',
templateUrl: 'templates/myClients/myClients.html',
views: {
'content_rapida': {
templateUrl: 'templates/myClients/partials/rapida.html',
controller: 'qSearchController'
}
}
})
Note that I have to use templateUrl twice.
Related
I have ui-view in index.html and I have a page for info and there I want to put second ui-view with 4 links.
In my index.html
<body ng-app="myApp">
<div ui-view></div>
</body>
This is my info. I want to open default in info.html a page info-number.html.
<div class="col-sm-8" style="border:1px solid; min-height:
<h1>Some text</h1>
<div ui-sref></div>
</div>
This is my app.
myApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url: "/home",
templateUrl: "home.html"
})
.state("info", {
url: "/info",
templateUrl: "info.html",
})
.state("info-number", {
abstract: true,
parent: "info",
url: "/info-number",
templateUrl: "info-number.html"
})
.state("info-about", {
parent: "info",
url: "/info-about",
templateUrl: "info-about.html"
})
.state("info-where", {
parent: "info",
url: "/info-where",
templateUrl: "info-where.html"
})
}
]);
Schema of my page for info
Thanks for help.
You don't need put info-number to be abstract even if its default.
Your abstract view should be info. So when user clicks on "info" link (button) you can just redirect him to info/info-number as default.
I would write it as:
$stateProvider
.state("home", {
url: "/home",
templateUrl: "home.html"
})
.state("info", {
url: "/info",
abstract: true,
templateUrl: "info.html",
})
.state("info.info-number", {
url: "/info-number",
templateUrl: "info-number.html"
})
.state("info.info-about", {
url: "/info-about",
templateUrl: "info-about.html"
})
.state("info.info-where", {
url: "/info-where",
templateUrl: "info-where.html"
})
The info.html has structure similar to:
<div>
<h1>Some Text</h1>
<div ui-view></div>
</div>
I'm working on something and I want to redirect the content to a page in angularjs, but I face the following error:
angular.js:12477 Error: Could not resolve 'dashboard.home' from state 'dashboard'
My code:
.state(
'dashboard.home',
{
url: '/home',
views: {
"content#main": {
templateUrl: '/home'
// controller: 'HomeController',
}
}
}
)
.state(
'dashboard',
{
url: '',
parent: "main",
views: {
"sidebar#main": {
templateUrl: "/sidebar/view"
}
}
})
sidebar.html.twig
<li>
<a ui-sref="dashboard.home">Home <span class="sr-only">(current)</span></a>
</li>
The state 'dashboard.home' exists, why the error appears?
I think you're probably trynig to use views to split header/footer/siderbar from the content which is the only thing to change according states.
I don't have the answer of what exactly is your problem but I may have an answer to a more broader question that you might are trying to solve :
How to mix views for header/content/footer and nested stated for content navigation ?
Solution : use views only for header/content/footer, use '#' to insert direct child by using the default view (no name) and use grand child as you would do normally without views
// root state
.state('home', {
url:'/home',
views:{
'header':{
templateUrl: 'template/header.html',
controller:'HeaderCtrl'
},'sidepanel':{
templateUrl: 'template/sidepanel.html',
controller:'SidePanelCtrl',
},'footer':{
templateUrl: 'template/footer.html'
}
},
'abstract':false
})
//direct child
.state('home.main', {
url:'/main',
// need that for every direct child of home
views:{
'#':{templateUrl: 'template/main.html',
controller: 'MainCtrl'
}
}
})
//grandchild
.state('home.main.child1', {
url:'/child1',
templateUrl: 'template/child1.html',
controller: 'Child1Ctrl'
// NO view anymore for grand child!!
}
})
And the Relevant HTML
<section id="header">
<!--- not container -->
<div data-ui-view="header"></div>
</section>
<section id="content">
<div class="row clearfix">
<div id="mySidebar>
<div data-ui-view="sidepanel"></div>
</div>
<div id="myContent">
<div data-ui-view></div>
</div>
</div>
</section>
<section id="footer">
<div data-ui-view="footer"></div>
</section>
The templateUrl expects the relative path of the html template that you want to render.
.state(
'dashboard.home',
{
url: '/home',
views: {
"content#main": {
templateUrl: 'home.html'
}
}
}).state(
'dashboard',
{
url: '',
parent: "main",
views: {
"sidebar#main": {
templateUrl: "sidebar/view.html"
}
}
})
I'm creating an application and in the dashboard I have the header and the sidebar that will be in every single page of the dashboard, and for that reason I created partial files for them.
The problem is that if I access /dashboard/users I get the same thing that is in the /dashboard, I was wondering how to keep the header and sidebar but change the main content to the /views/dashboard/users.html file?
I created the states like this:
.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.state('dashboard', {
url: '/dashboard',
views: {
'': {
templateUrl: 'views/dashboard.html'
},
'header#dashboard': {
templateUrl: 'views/dashboard/partials/header.html'
},
'sidebar#dashboard': {
templateUrl: 'views/dashboard/partials/sidebar.html'
}
},
controller: 'DashboardCtrl',
controllerAs: 'dashboard'
})
.state('dashboard.users', {
url: '/users',
views: {
'': {
templateUrl: 'views/dashboard/users.html'
}
},
controller: 'DashboardUsersCtrl',
controllerAs: 'dashboard/users'
});
});
/main.html
<p>main</p>
/index.html
<body ng-app="freelancerApp">
<div ui-view></div>
</body>
/views/dashboard.html
<div ui-view="header"></div>
<p>dashboard</p>
<div ui-view="sidebar"></div>
/views/dashboard/users.html
<div ui-view="header"></div>
<p>users</p>
<div ui-view="sidebar"></div>
/views/dashboard/partials/header.html
</p>header</p>
/views/dashboard/partials/sidebar.html
<p>sidebar</p>
I would say, that your parent template, is just missing place for a child (unnamed view target)
//views/dashboard.html
<div ui-view="header"></div>
<p>dashboard</p>
<div ui-view="sidebar"></div>
should be
//views/dashboard.html
<div ui-view="header"></div>
<div ui-view="">
// we can keep it or remove the content
<p>dashboard</p> // just visible in parent
</div>
<div ui-view="sidebar"></div>
Now, we have a target <div ui-view=""></div> for an unnamed child view, defined as views :{ '': {...}} in a .state('dashboard.users'...
Add abstract:true in this snippet
.state('dashboard', {
url: '/dashboard',
abstract: true,
views: {
'': {
templateUrl: 'views/dashboard.html'
},
'header#dashboard': {
templateUrl: 'views/dashboard/partials/header.html'
},
'sidebar#dashboard': {
templateUrl: 'views/dashboard/partials/sidebar.html'
}
},
controller: 'DashboardCtrl',
controllerAs: 'dashboard'
})
I have a layout with header, footer, sidebar and content that should be used for some pages. All pages should be includes inside the content section.
<div class="wrapper">
<header class="main-header" ui-view="header"></header>
<aside class="main-sidebar" ui-view="left"></aside>
<div class="content-wrapper" ui-view></div><!-- all pages should be included here -->
<footer class="main-footer" ui-view="footer"></footer>
<aside class="control-sidebar control-sidebar-dark" ui-view="right"></aside>
<div class="control-sidebar-bg"></div>
</div>
My routes:
.state('main', {
views: {
'left': {
templateUrl: 'partials/design/left.html'
},
'header': {
templateUrl: 'partials/design/header.html'
},
'right': {
templateUrl: 'partials/design/right.html'
},
'footer': {
templateUrl: 'partials/design/footer.html'
}
},
url: '/'
})
.state('info', {
url: '/info',
templateUrl: "partials/info.html",
})
.state('foobar', {
url: '/foobar',
templateUrl: "partials/foobar.html",
})
So info and foobar should be childrens of main, but I don't know how to do this.
Instead of
.state('info', {
url: '/info',
templateUrl: "partials/info.html",
})
.state('foobar', {
url: '/foobar',
templateUrl: "partials/foobar.html",
})
Do this:
.state('main.info', {
url: '/info',
templateUrl: "partials/info.html",
})
.state('main.foobar', {
url: '/foobar',
templateUrl: "partials/foobar.html",
})
I found out that it is also possible with ng-include
<div class="wrapper">
<header class="main-header" ng-include src="'partials/design/header.html'"></header>
<aside class="main-sidebar" ng-include src="'partials/design/left.html'"></aside>
<div class="content-wrapper"><ui-view></ui-view></div><!-- all pages should be included here -->
<footer class="main-footer"ng-include src="'partials/design/footer.html'"></footer>
<aside class="control-sidebar control-sidebar-dark" ng-include src="'partials/design/right.html'"></aside>
<div class="control-sidebar-bg"></div>
</div>
So everyone who has this template as parent will be shown in the <ui-view></ui-view>section.
Here's my Plunker .
.state('tabs', {
url: "/tab",
abstract: true,
cache: false,
templateUrl: "tabs.html"
// controller: 'AppCtrl'
})
.state('tabs.home', {
url: "/home",
cache: false,
views: {
'home-tab': {
templateUrl: "home.html"
// controller: 'welcomeController'
}
}
})
.state('tabs.list', {
url: "/list",
cache: false,
views: {
'category-tab': {
templateUrl: "list.html"
//
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/home');
Now when i switch between views , views load on each other and you can see both of them . or better to say : Url change but views don't change.
Am i missing something ? Thanks
Seems like you have forgort to wrap you list.html content inside ion-view
List.html
<ion-view>
<ion-header-bar align-title="center" class="bar-royal">
<h1 class="title">
list
</h1>
</ion-header-bar>
<ion-content class="">
<button class="button btn-custom button-full button-assertive icon icon-left ion-android-bicycle no-border red-custom no-margin">
Sport
</button>
</ion-content>
</ion-view>
Demo here