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>
Related
I configured a route using ui-route as follows,
var app = angular.module("productManagement",
["common.services",
"ui.router",
"productResourceMock"]);
app.config(["$stateProvider",
function($stateProvider){
// Products
$stateProvider
.state("productList", {
url: "/products",
templateUrl: "app/products/productListView.html",
controller: "ProductListCtrl as vm"
})
}]
);
below is my index.html
<body ng-app="productManagement">
<div class="container">
<div ui-view></div>
</div>
</body>
it is not showing any error in console, and no views shown at all !!?
it used to work fine just before adding the route
this is part of the course AngularJS Line of Business Applications from www.pluralsite.com by Deborah Kuratah episode 26 "setting up the routing"
You have to
1. have a default route
2. redirect to home if the state is not defined
app.config(["$stateProvider","$urlRouterProvider",
function($stateProvider,$urlRouterProvider){
// Products
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home", {
url: "/",
templateUrl: "app/products/productListView.html",
controller: "ProductListCtrl as vm"
})
.state("productList", {
url: "/products",
templateUrl: "app/products/productListView.html",
controller: "ProductListCtrl as vm"
}}
}]
);
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 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.
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.