I am new to angularjs and what I need is to build a dynamic routing mechanism in angular UI router. I have three modules like docs,tasks,dashboard and have various views within each module. Please have a look on what I have tried and suggest a solution.
app.js
var app= angular.module('myApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home.documentTree', {
url: '/documentTree',
views: {
'main' :{
templateUrl: "app/documents/views/documentTree.html",
controller: 'documentCtrl',
controllerAs: 'documentCtrl'
}
}
})
.state('home.documents', {
url: '/documents',
views: {
'main' :{
templateUrl: "app/documents/views/documentList.html",
controller: 'documentCtrl',
controllerAs: 'documentCtrl'
}
}
})
.state('home.documentDetails', {
url: '/documentDetails',
views: {
'main' :{
templateUrl: "app/documents/views/documentDetails.html",
controller: 'documentCtrl',
controllerAs: 'documentCtrl'
}
}
})
$urlRouterProvider.otherwise('login');
});
My html page snippet is as follows:
<a ui-sref="home.documentTree">Document Tree</a>
<a ui-sref="home.documents">Document Lists</a>
<a ui-sref="home.documentDetails">Document Deatils</a>
I have to generalize the above three routes for documents into one with dynamic parameters.
For doing this I tried the following :
<a ui-sref="home.:documents.:documentTree">Document Tree</a>
.state('home.:folder.:action', {
url: 'home/:folder/:action',
templateUrl: ['$stateParams', function ($stateParams) {
return '/app/'+ $stateParams.folder+'/' + $stateParams.action + '.html';
}],
controller: 'documentCtrl',
controllerAs: 'documentCtrl',
})
But not seems to be working fine. Please suggest your thoughts.
At last I got the solution !
Route:
.state('home.documents', {
url: '/:folder/:action',
views: {
'main' :{
templateUrl: function($stateParams) {
return 'app/' + $stateParams.folder + '/views/' + $stateParams.action + '.html';
},
controller: 'documentCtrl',
controllerAs: 'documentCtrl'
}
}
})
Html Code :
<a ui-sref="home.documents({folder:'documents',action:'documentTree'})">Document tree</a>
Just try .
Related
Trying to get the following url structure to work:
/page/
/page/article
/page/article/third-level-1
/page/article/third-level-2
Ive tried the follow but it doesn't render the article view at all. The page view renders fine:
<section ui-view></section>
$stateProvider
.state('index', {
external: true,
url: '/'
})
.state('page', {
url: '/page',
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page.html',
})
.state('page.article', {
url: '/article/',
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html'
});
I then tried everything under the sun, and managed to get the second view to render with the following, however the Controller doesnt run on the article view:
<section ui-view="app"></section>
$stateProvider
.state('index', {
external: true,
url: '/'
})
.state('page', {
url: '/page',
views: {
'app': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page.html',
}
}
})
.state('page.article', {
url: '/article/',
views: {
'app#': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html',
}
}
});
How can i get the child view to render and use the/a controller? Haven't even gotten down to the third level.
It should be this.
.state('page.article', {
url: '/page/article/',
views: {
'app#': {
controller: Controller,
controllerAs: 'ctrl',
templateUrl: '/static/views/page/page-article.html',
}
}
I am trying to develop an app using Angular 1.4.(Refer below image). I need suggestions on below
What is the best way to develop home Page in this. Should I use <ui-view>(UI routing) to creates the 8 states or should I use 8 different custom directives to tabs(tab1, tab2, tab3, etc...)
Can my application has both routeprovider and stateprovider together in config file.(Another post from Stackoverflow)
--------------------------------------------------------------------------->
My view/idea for developing this---->
will be using ng-view to load the pages(home, nav2, nav3, etc)
will be using ui-view to load the tabs/panel inside home page(tab1, tab2, tab3, etc)
Using Both ng-view and ui-view does not show any results in the file. i.e, App crashes.. So I have moved to ui-view to display all the states.
Below is the code which works fine.
Tutorial
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state("home", {
url:"/home",
views:{
"":{
templateUrl: "views/home.html"
},
"profile#home":{
templateUrl: "views/home/profile.html"
},
"companyAnnouncement#home":{
templateUrl: "views/home/company-announcement.html"
},
"leaveBalance#home":{
templateUrl: "views/home/leave-balance.html"
},
"leaveDetails#home":{
templateUrl: "views/home/leave-details.html"
},
"attendenceDetails#home":{
templateUrl: "views/home/attendence-details.html"
},
"holidayList#home":{
templateUrl: "views/home/holiday-list.html"
},
"queryStatus#home":{
templateUrl: "views/home/query-status.html"
},
"payrolQueryStatus#home":{
templateUrl: "views/home/payrol-query-status.html"
}
}//views ends here
})
.state("login", {
url: "/login",
templateUrl: "views/login.html"
})
.state("selfService", {
url:"/self-service",
views:{
"":{
templateUrl: "views/self-service.html"
}
}
})
.state("edirectory", {
url: "/edirectory",
templateUrl: "views/edirectory.html",
controller: 'edirectoryController',
controllerAs: 'edirectoryCtrl',
resolve: {
employeeList: function (edirectoryService) {
return edirectoryService.getAllEmployees();
}
}
})
.state("myLeave", {
url: "/my-leave",
templateUrl: "views/my-leave.html"
})
.state("attendence", {
url: "/attendence",
templateUrl: "views/attendence.html"
})
.state("compOffRequest", {
url: "/comp-off-request",
templateUrl: "views/comp-off-request.html"
})
.state("raiseQuery", {
url: "/raise-query",
templateUrl: "views/raise-query.html"
})
.state("eacademy", {
url: "/eacademy",
templateUrl: "views/eacademy.html"
})
.state("downloads", {
url: "/downloads",
templateUrl: "views/downloads.html"
});
});
I scaffolded an ionic V1 site using tab template and created the following link in a page.
<a href="#/tab/Test">
Test
</a>
And an empty control for "Test" page.
.controller('TestCtrl', function ($scope) {
})
The following is the router
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
However, when testing using ionic serve, click the link doesn't go to the page. It stays in the page but the URL in the address bar changed to localhost:8100/#/tab/test.
Full router.
.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('events', {
url: '/events',
templateUrl: 'templates/events.html',
controller: 'EventsCtrl'
})
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.settings', {
url: '/settings',
views: {
'tab-settings': {
templateUrl: 'templates/tab-settings.html',
controller: 'SettingsCtrl'
}
}
})
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
.state('tab.venues', {
url: '/venues',
views: {
'tab-venues': {
templateUrl: 'templates/tab-venues.html',
controller: 'VenuesCtrl'
}
}
})
// Each tab has its own nav history stack:
.state('tab.events', {
url: '/events',
views: {
'tab-events': {
templateUrl: 'templates/tab-events.html',
controller: 'EventsCtrl'
}
}
})
.state('tab.categories', {
url: '/categories',
views: {
'tab-categories': {
templateUrl: 'templates/tab-categories.html',
controller: 'CategoriesCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/login');
});
Update:
It will works if I change the router to the following. But it will be full screen and the tabs are gone.
.state('test', {
url: '/test',
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
})
and the link href to href="#/privacy".
Change the href url href="#/test'" instead of href="#/tab/Test"
I am using this code
<ion-tab title="" icon-off="ion-ios-home-outline" icon-on="ion-ios-home" href="#/tab/test" ng-if="userkey">
<ion-nav-view name="tab-test"></ion-nav-view>
</ion-tab>
if you want to navigate
< ion-nav-view name="tab-test">
and state name sould be same
.state('tab.test', {
url: '/test',
views: {
'tab-test': {
templateUrl: 'templates/tab-test.html',
controller: 'TestCtrl'
}
}
})
I want to create multi step form using angularjs.
Here is the code:
(function () {
"use strict";
angular.module("gameManagement", ["ui.router", "ngAnimate", "ngResource", "toaster"])
.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterPorvider) {
$urlRouterPorvider.otherwise("/Game/Home");
$stateProvider
.state("Home", {
url: "/Game/Home",
templateUrl: "/app/Game/GameView.html",
controller: "GameController as vm"
});
$stateProvider
.state("Log", {
url: "/Game/Log",
templateUrl: "/app/Log/GameLogView.html",
controller: "GameLogController as vm"
});
$stateProvider
.state("MultiStepForm", {
url: "/Game/MuiltyStepForm",
templateUrl: "/app/MultiStepForm/MuiltyStepForm.html"
});
$stateProvider
.state("MultiStepForm.view", {
url: "/Game/MuiltyStepForm/view",
templateUrl: "/app/MultiStepForm/MuiltyStepForm.html"
})
.state('MultiStepForm.view.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/FormStep1.html'
})
.state('MultiStepForm.view.step2', {
url: '/step2',
templateUrl: '/app/MultiStepForm/FormStep2.html'
})
.state('MultiStepForm.view.step3', {
url: '/step3',
templateUrl: '/app/MultiStepForm/FormStep3.html'
})
}]);
})();
I get this error when I try to move to state MultiStepForm.view.step2
Error: Could not resolve '.MultiStepForm.view.step2' from state 'MultiStepForm.view'
Any idea why I get the error?
And can I create nested state inside nested state?
Hi this is because you are using nested states so in your example
.state('MultiStepForm.view.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/FormStep1.html'
})
.state('MultiStepForm.view.step2', {
url: '/step2',
templateUrl: '/app/MultiStepForm/FormStep2.html'
})
.state('MultiStepForm.view.step3', {
url: '/step3',
templateUrl: '/app/MultiStepForm/FormStep3.html'
})
step2 inherits from step1 and not from multistepform.view
I think you should be able to fix it by doing this :
.state('MultiStepForm.view.step1', {
url: '/step1',
templateUrl: '/app/MultiStepForm/FormStep1.html'
})
.state('MultiStepForm.view.step2', {
url: '/step2',
parent: MultiStepForm.view,
templateUrl: '/app/MultiStepForm/FormStep2.html'
})
.state('MultiStepForm.view.step3', {
url: '/step3',
parent: MultiStepForm.view,
templateUrl: '/app/MultiStepForm/FormStep3.html'
})
check out this url for more info about nested states nested views in angular
just a quick question. Can named views in the ui-router for angular have routes and an url? And if so, how can I activate them?
I searched through the wiki, but can't find any info on that.
What I want is a app with three different child routes so only one can be active at a time, but they're supposed to be in different views, so I can nicely animate between them with an accordion effect.
Any help there?
Thanks!
EDIT: Here's some code of my routing so far:
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
//templateUrl: 'app/main/main.html',
//controller: 'MainController',
//controllerAs: 'main',
views: {
'' : {
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
},
'contact': {
templateUrl: 'app/contact/contact.html',
controller: 'ContactController',
controllerAs: 'contact'
},
'profile': {
templateUrl: 'app/profile/profile.html',
controller: 'ProfileController',
controllerAs: 'profile'
},
'works': {
templateUrl: 'app/works/works.html',
controller: 'WorksController',
controllerAs: 'works'
}
}
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
}
I'd recommend just creating different states for each view. There's no reason you can't animate smoothly between different states.
So:
function routeConfig($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('home.contact', {
templateUrl: 'app/contact/contact.html',
controller: 'ContactController',
controllerAs: 'contact'
})
.state('home.profile', {
templateUrl: 'app/profile/profile.html',
controller: 'ProfileController',
controllerAs: 'profile'
params: {
"user" : {}
}
})
.state('home.works', {
templateUrl: 'app/works/works.html',
controller: 'WorksController',
controllerAs: 'works'
})
}
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
}
In your ui-sref links, you can pass data to those views using parameters, like this: <a ui-sref="home.profile({user: contact.user}) along with the 'params' section in the state definition as I've included above.
Routing is serverside so if you call any address your serverside routing needs to launch proper html or javascripts which will let you render what you want.
For more accurate answer please respond with more details: what is your serverside engine, which version of angular you use etc.