How Tos:

How Tos are solutions to common problems. They aren't necessarily the only solution to the problem but typically stemmed from a discussion in an issues thread, where we didn't want to add a new feature but realized it may not be clear how to achieve a certain functionality.

• How to: Configure ui-router from multiple modules
• How to: Open a dialog/modal at a certain state
• How to: Animate ui-view with ng-animate
• How to: Configure your server to work with html5Mode
• How to: Set up a default/index child state
• How to: Use require.js with ui-router
• How to: Lazy load states
• How to: Make states work with tabs
• How to: Retain a state's state
• How to: Make trailing slash optional
• How to: Create rules to prevent access to a state
• How to: Prevent nested ui-sref objects from all firing/triggering

Popular Issues:

• Issue: I'm getting a blank screen, and there are NO errors!
• Issue: My templates are not appearing / loading / showing
• Issue: My assets and templates are not loading
• Issue: Problems when using ng-view alongside ui-view
• Issue: JavaScript errors don't throw within resolve functions
• Issue:TypeError: Attempted to assign to readonly property when runninggrunt tests
• Issue: Firefox is throwing ab.shift is not a fuction error
• Issue: What is the difference between$state.params and$stateParams?

With#492 merged (v0.2.8), you can now register states in any order and across modules. You can register children before the parent state exists. It will queue them up and once the parent state is registered then the child will be registered. Note: You still need to manage module dependencies.

angular.module('main',['main.page1']).config(function($stateProvider){$stateProvider.state('main',{...})});angular.module('main.page1',[]).config(function($stateProvider){$stateProvider.state('main.page1',{...})});

Note: Remember only to declare dependencies once per module creation, so if you make several calls toangular.module for the same module, only the first should define dependencies.

How do I tell ui-router that I'd like a certain state to open a dialog or modal instead of swapping out ui-view templates?

Here's an example of to do it using ui-bootstrap's$uibModal service. This example only specifies an onEnter function. There is no template, controller, etc. So essentially the modal is shown, then when it's closed it returns to theitems state. You are still responsible for handling what state your app transitions to when the modal closes.

$stateProvider.state("items.add",{url:"/add",onEnter:['$stateParams','$state','$uibModal','$resource',function($stateParams,$state,$uibModal,$resource){$uibModal.open({templateUrl:"items/add",resolve:{item:function(){newItem(123).get();}},controller:['$scope','item',function($scope,item){$scope.dismiss=function(){$scope.$dismiss();};$scope.save=function(){item.update().then(function(){$scope.$close(true);});};}]}).result.finally(function(){$state.go('^');});}]});

How do I add animation effects to the ui-view templates that are loaded?

This is just one example of how you can do it. I had to set the ui-view container to be position relative as well as set the ui-view to be position absolute to obtain the effect I wanted, but those are not required depending on the effect you are trying to achieve.

Plunkr:http://plnkr.co/edit/NsZhDL?p=preview

HTML

<divclass="row"><divclass="span12 ui-view-container"><divclass="well"ui-view></div></div></div>

CSS

/* Have to set height explicity on ui-viewto prevent collapsing during animation*/.ui-view-container {position: relative;height:65px;}[ui-view].ng-enter, [ui-view].ng-leave {position: absolute;left:0;right:0;-webkit-transition:all.5s ease-in-out;-moz-transition:all.5s ease-in-out;-o-transition:all.5s ease-in-out;transition:all.5s ease-in-out;}[ui-view].ng-enter {opacity:0;-webkit-transform:scale3d(0.5,0.5,0.5);-moz-transform:scale3d(0.5,0.5,0.5);transform:scale3d(0.5,0.5,0.5);}[ui-view].ng-enter-active {opacity:1;-webkit-transform:scale3d(1,1,1);-moz-transform:scale3d(1,1,1);transform:scale3d(1,1,1);}[ui-view].ng-leave {opacity:1;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}[ui-view].ng-leave-active {opacity:0;-webkit-transform:translate3d(100px,0,0);-moz-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0);}

Another forward、go back animationdemo :http://plnkr.co/edit/3cBugxsAglHHpt9XAkMp

Make sure you are using the 1.1.5 version of Angular. It's not the newest angular but this is for devs who may be stuck with that version (Note: 1.1.4 had a totally different syntax that won't work with this example).

Plunkr:http://plnkr.co/edit/EmNvz8?p=preview

Addng-animate="'view'" to your ui-view:

<divui-viewng-animate="'view'"></div>

The animation class doesn't have to be "view" that's just an example. Then create a view-enter, view-enter-active, view-leave, and view-leave-active class styles in your css. The "-enter" class will be used to set up the animations and the "-enter-active" will be used as the end point of the animation.

When I add$locationProvider.html5Mode(true), my site will not allow pasting of urls. How do I configure my server to work when html5Mode is true?

Warning: If you have server side rewrites already set up and still experience issues, please seeIssue: assets and templates are not loading.

When you have html5Mode enabled, the# character will no longer be used in your urls. The# symbol is useful because it requires no server side configuration. Without#, the url looks much nicer, but it also requires server side rewrites. Here are some examples:

Apache Rewrites

<VirtualHost*:80>ServerName my-appDocumentRoot /path/to/app    <Directory/path/to/app>RewriteEngineon# Don't rewrite files or directoriesRewriteCond%{REQUEST_FILENAME}-f [OR]RewriteCond%{REQUEST_FILENAME}-dRewriteRule^- [L]# Rewrite everything else to index.html to allow html5 state linksRewriteRule^index.html [L]    </Directory></VirtualHost>

Nginx Rewrites

server{server_name my-app;indexindex.html;root /path/to/app;location /{try_files$uri$uri/ /index.html;}}

Azure IIS Rewrites

<system.webServer>  <rewrite>    <rules>       <rulename="Main Rule"stopProcessing="true">        <matchurl=".*" />        <conditionslogicalGrouping="MatchAll">          <addinput="{REQUEST_FILENAME}"matchType="IsFile"negate="true" />          <addinput="{REQUEST_FILENAME}"matchType="IsDirectory"negate="true" />        </conditions>        <actiontype="Rewrite"url="/" />      </rule>    </rules>  </rewrite></system.webServer>

Express Rewrites

varexpress=require('express');varapp=express();app.use('/js',express.static(__dirname+'/js'));app.use('/dist',express.static(__dirname+'/../dist'));app.use('/css',express.static(__dirname+'/css'));app.use('/partials',express.static(__dirname+'/partials'));app.all('/*',function(req,res,next){// Just send the index.html for other files to support HTML5Moderes.sendFile('index.html',{root:__dirname});});app.listen(3006);//the port you want to use

Also, read this great tutorial aboutAngular + Express

ASP.Net C# Rewrites

In Global.asax

privateconststringROOT_DOCUMENT="/default.aspx";protectedvoidApplication_BeginRequest(Objectsender,EventArgse){stringurl=Request.Url.LocalPath;if(!System.IO.File.Exists(Context.Server.MapPath(url)))Context.RewritePath(ROOT_DOCUMENT);}

Java EE

In web.xml

<?xml version="1.0" encoding="UTF-8"?><web-appversion="3.0"xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"><error-page><error-code>404</error-code><location>/</location></error-page></web-app>

Play FrameworkIn routes file:

GET        /                                 controllers.Application.index(someRandomParameter = "real index")# All other routes should be here, in betweenGET        /*someRandomParameter             controllers.Application.index(someRandomParameter)

When I have several nested states, how do I set up one particular child state to be the index, or default, state of its parent?

Let's say you have the following states:

• 'parent'
• 'parent.index'
• 'parent.page2'

You want that when the user tries to go to 'parent', it will automatically go to 'parent.index'.

1. First, add a property to the'parent' state ofabstract:true. You want to set this since this state will never be activated directly, users will always go to one of its child states instead. You must also specify a template containing a<ui-view/> directive, which will be populated with the child state's template.

// url '/home', but you'll never see this state directly.state('parent',{url:'/home',abstract:true,template:'<ui-view/>'})

2. Then doone of the following:

• Give the'parent.index' state an empty url. This will make it match the same url as its parent state url, because it appends nothing to the parent url.

$stateProvider.state('parent',{url:'/home',abstract:true,template:'<ui-view/>'})// ALSO url '/home', overriding its parent's activation.state('parent.index',{url:''})

However, using this method will cause usage ofui-sref to theparent state to fail. Reference byhref to#/parent is recommended. See thisSO post for additional information.

• Or if you want the'parent.index' url to be non-empty, then set up a redirect in your module.config using $urlRouterProvider and remove theabstract property from the parent state definition:

$urlRouterProvider.when('/home','/home/index');$stateProvider.state('parent',{url:'/home',template:'<ui-view/>'})// url '/home/index'.state('parent.index',{url:'/index'})

How can I load ui-router with Require.js? Note: This is not lazy loading, for that see the section below.

The answer to this FAQ can be found here:https://github.com/angular-ui/ui-router/issues/479#issuecomment-26232775

How can I load/define a state right when a user attempts to navigate to it?

Take a look atFuture States by UI-Router-Extras.

Take a look atSticky States by UI-Router-Extras.

Take a look atDeep State Redirect by UI-Router-Extras.

How can I have my routes be activated when the url contains either a trailing slash or not?

SetstrictMode to false in your config block:

$urlMatcherFactoryProvider.strictMode(false)

For older version of ui-router, add this snippet to your module's config function. It creates a rule on $urlRouterProvider that maps all urls that are missing a trailing slash to the same url but with the trailing slash appended.

You'll need to specify all urls with a trailing slash if you use this method.

$urlRouterProvider.rule(function($injector,$location){varpath=$location.url();// check to see if the path already has a slash where it should beif(path[path.length-1]==='/'||path.indexOf('/?')>-1){return;}if(path.indexOf('?')>-1){returnpath.replace('?','/?');}returnpath+'/';});

Note: All routes inapp/scripts/app.js must be redefined with trailing/. This means that routes such as/things/:id become/things/:id/ as well.

How can I have my states guarded by some logic that determines if a user is allowed to access that state? What if I also want to redirect them based on that logic?

Example: Uses thedata object on the state config to define a rule function that will run logic against the user (here using an example service called $currentUser). The$stateChangeStart handler catches all state transition and performs this rule check before allowing the transition, potentially blocking it and/or redirecting to a different state.

app.config(function($stateProvider){$stateProvider.state('privatePage',{data:{rule:function(user){// ...}});});app.run(function($rootScope,$state,$currentUser){$rootScope.$on('$stateChangeStart',function(e,to){if(!angular.isFunction(to.data.rule))return;varresult=to.data.rule($currentUser);if(result&&result.to){e.preventDefault();// Optionally set option.notify to false if you don't want// to retrigger another $stateChangeStart event$state.go(result.to,result.params,{notify:false});}});});

In some cases you'll want to nest elements that both (or more) contain a ui-sref attribute. If you click the deepest nested element it will trigger all the ui-srefs by default. To stop propogation do the following:

<divui-sref="root.child"ng-click="$event.stopPropagation()">        Child-detail</div>

UI.Router intentionally does not log console debug errors out of the box. Add the following to your app in order to get some verbosity, and make debugging a hell of a lot easier:

app.run(function($rootScope) {  $rootScope.$on("$stateChangeError", console.log.bind(console));});

If you're wondering why the errors aren't logged by default, seeIssue: JavaScript errors don't throw within resolve functions

It isvery common to forget to place a<ui-view/> in the parent state's template. If you are not using the more advancedviews property then a template will always, by default, attempt to populate the ui-view in the parent state (for root states, this means index.html).

Often it's easy to remember to put the<ui-view/> in index.html but then when you start creating your template partials and declaring nested states, you will forget that your partials also need a<ui-view/> too if they will be loading a template from a child state.

This may be related to a nasty issue where assets and templates are not loading. It showed up during Angular 1.1.5 and is a bug in the core library. This tree helps you decide what response to take.

1)Using Angular 1.1.5?

---Yes: See solution below.

---No:2)Using HTML5 urls?

--------------No: No base tag needed.

--------------Yes:3)Deploying to root?

--------------------------Yes: No base tag needed.

--------------------------No: See solution below.

You'll need to either:

1. Use absolute anchor urls (preferred)
2. Add tag to your index.html BUT all anchor urls will be broken for you :/

If you've chosen #2, then add the following tag to your index.html head:

<head>    ...    <base href="/"></base>    ... </head>

... if your application is running at the root of your domain.

... and if your application is running in a subdirectory, specify that subdirectory (e.g. 'myapp'):

<head>    ...    <base href="/myapp/"></base>    ... </head>

Bugs that were solved by this solution:89,200,208,250,SO 17200231

Other Resources:

• See bug in core:issues/2799
• Pull that fixes it:pull/2969

Don't do that.You can use some thing like ng-include to assemble your page.

If you are having issues where a trivial error wasn't being caught because it was happening within the resolve function of a state, this is actually the intended behavior of promises per thespec.

If the callback throws an error, the returned promise will be moved to failed state.

The promise is rejected with the error. Additionally the$stateChangeError event is triggered. It's very important to always set up your $stateChangeError handler early in the project to avoid headaches.

You were probably running PhantomJS >= 1.9.2 and the script under test is producing DOM exceptions. Please refer tohttps://github.com/angular/angular.js/commit/7e916455b36dc9ca4d4afc1e44cade90006d00e3 and fix your angular-mock.js .

This occurs when you have a state namedwatch. Use a different name for your state.

$state.params is a global representing the current state parameters for the current state, whereas$stateParams is a special local injectable that is created for each resolve or controller and populated only with the params for the particular state.