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"
}}
}]
);
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 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 code:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/map');
$locationProvider.html5Mode(true);
$stateProvider
.state('map', {
url: '/map',
templateUrl: 'Views/templates/layout.html'
})
.state('map.controls', {
url: '',
views: {
'ddldistricts': {
templateUrl: 'Views/templates/ddl.districts.html',
controller: 'DistrictsListController'
},
'ddldistributors': {
templateUrl: 'Views/templates/ddl.distributors.html',
controller: 'DistributorsListController'
},
'ddlmanufacturers': {
templateUrl: 'Views/templates/ddl.manufacturers.html',
controller: 'ManufacturersListController'
}
}
});
}]);
The layout.html looks like this:
<h1>Controls</h1>
<div class="row">
<div class="col-md-3">
<div ui-view="ddldistricts"></div>
</div>
<div class="col-md-3">
<div ui-view="ddldistributors"></div>
</div>
<div class="col-md-3">
<div ui-view="ddlmanufacturers"></div>
</div>
The layout template is being displayed but none of other views are... what am I doing wrong?
I know it is something simple but for some reason I can't figure it out.
There is a working plunker
In case that we wanto a child to be default (instead of its parent) we have mark parent as abstract: true
.state('map', {
url: '/map',
abstract: true,
...
})
Then will the child with empty url used as a default redirection:
.state('map.controls', {
url: '',
...
Check it here
BUT in case, we do not want to use abstract state, we'd like to a bit smarter solution - there is one I do like the most:
Redirect a state to default substate with UI-Router in AngularJS
Also, the link to doc (describing the abstract: true solution)
How to: Set up a default/index child state
I have nested states inside neste state here is controller definition:
(function () {
"use strict";
angular.module("gameManagement", ["ui.router", "ngAnimate", "ngResource", "toaster"])
.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/game/MultiStepForm/step1");
$urlRouterProvider.otherwise("/game/Home");
$stateProvider
.state("Home", {
url: "/game/Home",
templateUrl: "/app/game/GameView.html",
controller: "GameController",
controllerAs: "vm"
});
$stateProvider
.state("Log", {
url: "/Game/Log",
templateUrl: "/app/Log/GameLogView.html",
controller: "GameLogController",
controllerAs: "vm"
});
$stateProvider
.state("MultiStepForm.view", {
url: "/Game/MultiStepFormView",
templateUrl: "/app/MultiStepForm/MultiStepFormView.html",
controller: "MultiStepFormViewController",
controllerAs: "MultiStepViewLogic"
})
$stateProvider
.state("MultiStepForm.Edit", {
url: "/Game/MultiStepFormEdit",
templateUrl: "/app/MultiStepFormEdit/MultiStepForm.html",
controller: "MultiStepFormEditController",
controllerAs: "MultiStepEditLogic"
})
.state('MultiStepForm.Edit.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep1.html'
})
.state('MultiStepForm.Edit.step2', {
url: '/step2',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep2.html'
})
.state('MultiStepForm.Edit.step3', {
url: '/step3',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep3.html'
});
}]);
})();
This rows define multi-step form:
.state('MultiStepForm.Edit.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep1.html'
})
.state('MultiStepForm.Edit.step2', {
url: '/step2',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep2.html'
})
.state('MultiStepForm.Edit.step3', {
url: '/step3',
templateUrl: '/app/MultiStepForm/NestedViews/FormStep3.html'
});
Here is view of MultiStepForm.Edit state:
<!-- form.html -->
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<div id="form-multiple-step">
<div class="page-header text-center">
<!-- the links to our nested states using relative paths -->
<!-- add the active class if the state matches our ui-sref -->
<div id="status-buttons" class="text-center">
<a ui-sref-active="active" ui-sref="MultiStepForm.Edit.step1"><span>STEP1</span></a>
<a ui-sref-active="active" ui-sref="MultiStepForm.Edit.step1"><span>STEP2</span></a>
<a ui-sref-active="active" ui-sref="MultiStepForm.Edit.step1"><span>STEP3</span></a>
</div>
</div>
<form id="single-form">
<!-- our nested state views will be injected here -->
<div id="form-views" ui-view></div>
</form>
</div>
</div>
</div>
When MultiStepForm.Edit state activated no netsed view has been displayed they have been display only when the user press button in view form and UI-SREF activate appropriate state.
My question is how can I make MultiStepForm.Edit.step1 state display associated view by default when MultiStepForm.Edit state activated?
The most simple way here would be to use the $urlRouterProvider.when()
$urlRouterProvider.when("/game/MultiStepForm", "/game/MultiStepForm/step1");
Check the doc:
when(what, handler)
Registers a handler for a given url matching. if handle is a string, it is treated as a redirect, and is interpolated according to the syntax of match (i.e. like String.replace() for RegExp, or like a UrlMatcher pattern otherwise).
If the handler is a function, it is injectable. It gets invoked if $location matches. You have the option of inject the match object as $match.
The handler can return
falsy to indicate that the rule didn't match after all, then $urlRouter will continue trying to find another one that matches.
string which is treated as a redirect and passed to $location.url()
void or any truthy value tells $urlRouter that the url was handled.
I have a link in an angular app that looks like this:
<tab ng-controller="childCtrl" heading="Children">
edit
</tab>
How can I load the link inside the tab instead of refreshing the entire view?
I like other approach with one point of handling all routes. ui.router with nested views allows to do it.
Template
<div ><a ui-sref="home.tab1" >Tab1</a></div>
<div><a ui-sref="home.tab2" >Tab2</a></div>
<br>
<div ui-view="tabs"></div>
app
var app = angular.module('plunker', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'main.html',
controller: 'MainCtrl',
virtual: true
})
.state('home.tab1', {
url: '/tab1',
views: {
tabs: {
templateUrl: '1.html'
}
}
})
.state('home.tab2', {
url: '/tab2',
views: {
tabs: {
templateUrl: '2.html'
}
}
});
$urlRouterProvider
.otherwise('/home/tab1');
})
And demo http://plnkr.co/edit/r1jPgkMnPAMlI34gZrMA?refresh&p=preview
You could define the path to the selected tab's content when the link is clicked, and use ng-include to display it.
<div ng-repeat="parent in parents">
<div ng-repeat="child in parent.children">
<a href="" ng-click="selectPath(parent, child);">
Parent {{parent.Id}}, Child {{child.Id}}
</a>
</div>
</div>
<div ng-include="selected.path"></div>
Here is a demo: http://plnkr.co/edit/7SPnluxUfcNNQDyeC6yt?p=preview