here i have a neatly configured routing pattern in ui.route
'use strict';
var app = angular.module('myApp', [ 'ngAnimate', 'ui.router']);
app.config([ '$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('App', {
url : '/',
views : {
'header' : {
templateUrl : 'partials/header.jsp',
controller : 'headerController'
},
'body' : {
templateUrl : 'partials/indexbody.jsp',
controller : 'indexBodyController'
},
'footer' : {
templateUrl : 'partials/footer.jsp'
}
}
}).state('App.Dashboard', {
url : 'Dashboard',
views : {
'body#' : {
templateUrl : 'partials/dashboard.jsp',
controller : 'dashboardController'
},
'dashboardBody#App.Dashboard' : {
templateUrl : 'partials/dashboard_adddeal.jsp'
}
}
}).state('App.Dashboard.AddDeal', {
url : '/AddDeal',
views : {
'dashboardBody#App.Dashboard' : {
templateUrl : 'partials/dashboard_adddeal.jsp'
}
}
}).state('App.Dashboard.Section2', {
url : '/Section2',
views : {
'dashboardBody#App.Dashboard' : {
templateUrl : 'partials/a.html'
}
}
});
} ]);
Everything is working fine, but i want to change the "body-view" in 'App' State After the authentication is successful
to simply put it i want to show a different state after authentication.
im new to angular, so go easy on me ;)
The solution will be dependent on how you have implemented your authentication, but there are a couple of ways to dynamically specify a template.
templateUrl can be a function which takes one parameter,$stateParams, and returns a URL
Alternatively, templateProvider can be a function with injected parameters that returns template HTML.
Detail here: https://github.com/angular-ui/ui-router/wiki#templates
With that said, I would exercise caution with either of these paths. If the user's authentication status changes without a state change, the template in use may not be updated.
You can use the resolve promise on your $stateProvider.state call.
Ex:
.state('App', {
url: '/',
/*some skipped lines*/
resolve: {
/*verify the authentication*/
verify();
$state.go('App.Dashboard');
}
});
More details about you can do in here: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#resolve
Related
I was testing ui-router for my application and wanted to have a default state for my route.
For example, when I go to localhost:3000/r, I can load either /a or /b in the page given as,
app.config(function($stateProvider) {
$stateProvider.state('a', {
templateUrl : '/a',
url : '',
controller : 'mainController'
})
.state('b', {
templateUrl : '/b',
url : '',
controller : 'mainController'
});
});
What exactly is the significance or the url attribute? If i leave it blank it acts as a default state for my route localhost:3000/r and loads /a into the page?
You need to inject another provider to your config function, that will be used to set the default route
And you need to set urls for your current states (a,b)
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/a");
$stateProvider.state('a', {
templateUrl : '/a',
url : '/a',
controller : 'mainController'
})
.state('b', {
templateUrl : '/b',
url : '/b',
controller : 'mainController'
});
});
By doing this, your default route will be "/a"
I am currently working on an Angular app and facing some issues with URLs.
Problem:
My application has the main page which has multiple sections and all sections fetch data from backend. There is an animated scroller on each section, e.g. If I am at section1 and select Section3, it scrolls me to Section3 in a nice animated way. I have few pages which also are fetched from backend but totally changes the view. This is the hierarchy of views:
Page1:
Section1, Section2, Section3, Section4, Section5 (Will be visible in whole application aka HEADER)
Section5:
Link1, Link2 (Each link is totally a separate view)
If I am on Link1 and click any of the Section, it appends # to the URL relatively and doesn't redirect me to the actual section.
Question(s):
I do not want to use # anywhere at all, how can I get rid of it?
I do not want to remove animation from my home page.
If I am on some other view and click on any section (HEADER), it should take me to that particular position, how can I achieve this?
This is my routes.js file:
var webApp = angular.module('webApp', ['ngRoute','ngSanitize']);
webApp.config(function($routeProvider, $locationProvider) {
if(window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
$routeProvider
.when('/', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
//section2
.when('/section2', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section3', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section4', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section5', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section7', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section8', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/Link1', {
templateUrl : 'application/link1.jsp',
controller : 'link1Controller'
})
.when('/Link2', {
templateUrl : 'application/link2.jsp',
controller : 'link2Controller'
})
.when('/Link3', {
templateUrl : 'application/link3.jsp',
controller : 'link3Controller'
});
});
Any help will be greatly appreciated or if anything is missing or required, please do let me know.
Using my local host, i was worked my angular app. i moved this app to my dev environment, where i am working now.
But after i move to dev my router not working. i guess i need to do some configuration to work that. But i tried up to changing my routes but nothing works.
my new dev app url : http://azvsp14devapp01:123/_layouts/15/cpmd/public/ - in the public folder my index.html nested.
here is my app.js :
(function () {
"user strict";
angular.module("tcpApp", ["ngRoute","ngResource", "ngAnimate"])
.run(['$route', function ($route) {
$route.reload();
}])
.config(function ($routeProvider, $locationProvider) {
// $locationProvider.html5Mode(true);
$routeProvider
.when ("123/_layouts/15/cpmd/public/", { //trying for equalient of `/`
templateUrl : "views/login/login.html",
controller : "loginController",
className : "body-login"
});
$routeProvider
.when ("/lock", {
templateUrl : "views/lock/lockScreen.html",
controller : "lockScreenController",
className : "body-lockScreen"
});
$routeProvider
.when ("/home", {
templateUrl : "views/home/home.html",
controller : "homeController",
className : "body-home"
});
$routeProvider
.when ("/projectSummary/:id", {
templateUrl : "views/projectSummary/projectSummary.html",
controller : "projectSummaryController",
className : "body-projectSummary"
});
$routeProvider
.when ("/projectDetails", {
templateUrl : "views/projectDetails/projectDetails.html",
controller : "projectDetailsController",
className : "body-projectDetails"
});
$routeProvider
.otherwise ({
redirectTo:'123/_layouts/15/cpmd/public/'
});
})
})();
Change
"123/_layouts/15/cpmd/public/"
to
"/"
In both when and otherwise.
This because router place with index.html treats as root.
I have the following setup in my code
.config(function config($stateProvider)
$stateProvider
.state('home', {
url : '/home',
views : {
'main' : {
controller : 'HomeCtrl',
templateUrl : 'home/home.tpl.html'
}
}
})
.state('home.details', {
url : '/details',
views : {
" " : {
template : "<h1>hello</h1>",
controller : function ($scope, $http, $state) {
//do some stuff here
//does not seem to reach code in here
}
}
}
});
})
.controller('HomeCtrl', function ($scope, $http, $state) {
//on a button click do $state.go('.details');
});
When I do this , the button click on my HomeCtrl seems to take me to /home/details but it does not seems to go inside the controller in that particular route at that point. (I checked by putting a break point inside the controller for the details.) Is there something wrong with my setup? I'm trying to do something similar to this sample app shown in the ui-router webpage.
The solution here would in a named-view (not) matching. Here is the working plunker.
We have to place the named ui-view inside of the parent view (or use more precise naming, see for example here)
So, the parent, home template should contain the named ui-view, e.g. nameOtherThanSpace
<div ui-view="nameOtherThanSpace" ></div>
And the child defintion must target that view, the complete snippet is:
$stateProvider
.state('home', {
url: '/home',
views: {
'main': {
controller: 'HomeCtrl',
template: '<div>' +
'<h1>hello from parent</h1>' +
'<hr />' +
'<div ui-view="nameOtherThanSpace" ></div>' +
'<div>',
}
}
})
.state('home.details', {
url: '/details',
views: {
"nameOtherThanSpace": {
template: "<h2>hello from a child</h3>",
controller: function($scope, $http, $state) {},
}
}
});
How to use more specific view names:
View Names - Relative vs. Absolute Names
UI-Router isnt rendering childs correctly with templateurl in Asp.net Mvc
The working plunker using the name nameOtherThanSpace, instead of " " (space)
Try registering your controller on the app instead of on your $stateProvider. e.g.
var app = angular.module('myApp', []);
app.controller('HomeCtrl', function ($scope, $http, $state) {
//on a button click do $state.go('.details');
});
Update 1:
You should only need to specify a view if you have multiple views in which case the view probably needs to have a name. But you only have one view for that state so I would just do this.
.state('home.details', {
url : '/details'
template : "<h1>hello</h1>",
controller : function ($scope, $http, $state) {
//do some stuff here
//does not seem to reach code in here
}
}
I use angular 1.1.5 and ui-router. My Spring-based webapp is reachable at http://mydomain:8080/webapp/app/index.html
All the resource files are loaded, and when angular bootstrap the main module, the URL is changed to http://mydomain:8080/webapp/app/index.html#/index.html and the page is blank.
ui-router is configured as
myapp
.config(function($stateProvider) {
$stateProvider
.state('layout', {
abstract : true,
views : {
"headerView" : {
templateUrl : 'partials/header.html',
controller : 'LoginController'
},
"navigationView" : {
templateUrl : 'partials/navigation.html',
controller : 'NavigationController'
}
}
})
.state(
'layout.home',
{
url : "", // root route
views : {
"contentView#" : {
templateUrl : 'partials/content.html',
controller : function() {
console.log("Root URL");
}
}
}
});
I tried to create a plunker to show the issue but I did not succeed.
Add url:'/' to the base abstract view.
.state('layout', {
abstract : true,
url:'/',
views : {
"headerView" : {
templateUrl : 'partials/header.html',
controller : 'LoginController'
},
"navigationView" : {
templateUrl : 'partials/navigation.html',
controller : 'NavigationController'
}
}
})