<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS: UI-Router Quick Start</title>
<!-- Bootstrap CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<p><i>Best viewed in pop-out mode to see location changes. Click blue button on the right.</i>
</p>
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Quick Start</a>
<ul class="nav">
<li><a ui-sref="route1">Route 1</a>
</li>
<li><a ui-sref="route2">Route 2</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="span12" data-ng-controller="LeakTest">
<button data-ng-click="start();">Start</button>
<button data-ng-click="stop();">Stop</button>
</div>
</div>
<div class="row">
<div class="span12">
<div class="well" ui-view></div>
</div>
</div>
<!-- Angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
<!-- UI-Router -->
<script src="//angular-ui.github.io/ui-router/build/angular-ui-router.js"></script>
<!-- App Script -->
<script>
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider) {
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html"
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list",
templateUrl: "route2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
})
myapp.controller('LeakTest', function($scope, $state, $timeout) {
$scope.leak = null;
$scope.start = function() {
$scope.leak = setInterval(function() {
$timeout(function() {
$state.transitionTo('route1')
}, 0);
$timeout(function() {
$state.transitionTo('route2')
}, 300);
}, 600);
};
$scope.stop = function() {
clearInterval($scope.leak);
};
});
</script>
</body>
</html>
/**
* State-based routing for AngularJS
* @version v0.0.1 - 2013-05-23
* @link http://angular-ui.github.com/
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
(function(t,r,e){"use strict";function n(t,r){return g(new(g(function(){},{prototype:t})),r)}function a(t){return d(arguments,function(r){r!==t&&d(r,function(r,e){t.hasOwnProperty(e)||(t[e]=r)})}),t}function i(t,r,e){this.fromConfig=function(t,r,e){return h(t.template)?this.fromString(t.template,r):h(t.templateUrl)?this.fromUrl(t.templateUrl,r):h(t.templateProvider)?this.fromProvider(t.templateProvider,r,e):null},this.fromString=function(t,r){return p(t)?t(r):t},this.fromUrl=function(e,n){return p(e)&&(e=e(n)),null==e?null:t.get(e,{cache:r}).then(function(t){return t.data})},this.fromProvider=function(t,r,n){return e.invoke(t,null,n||{params:r})}}function o(t){function r(r){if(!/^\w+$/.test(r))throw Error("Invalid parameter name '"+r+"' in pattern '"+t+"'");if(i[r])throw Error("Duplicate parameter name '"+r+"' in pattern '"+t+"'");i[r]=!0,l.push(r)}function e(t){return t.replace(/[\\\[\]\^$*+?.()|{}]/g,"\\$&")}var n,a=/([:*])(\w+)|\{(\w+)(?:\:((?:[^{}\\]+|\\.|\{(?:[^{}\\]+|\\.)*\})+))?\}/g,i={},o="^",s=0,u=this.segments=[],l=this.params=[];this.source=t;for(var c,f,h;(n=a.exec(t))&&(c=n[2]||n[3],f=n[4]||("*"==n[1]?".*":"[^/]*"),h=t.substring(s,n.index),!(h.indexOf("?")>=0));)o+=e(h)+"("+f+")",r(c),u.push(h),s=a.lastIndex;h=t.substring(s);var p=h.indexOf("?");if(p>=0){var m=this.sourceSearch=h.substring(p);h=h.substring(0,p),this.sourcePath=t.substring(0,s+p),d(m.substring(1).split(/[&?]/),r)}else this.sourcePath=t,this.sourceSearch="";o+=e(h)+"$",u.push(h),this.regexp=RegExp(o),this.prefix=u[0]}function s(){this.compile=function(t){return new o(t)},this.isMatcher=function(t){return t instanceof o},this.$get=function(){return this}}function u(t){function r(t){var r=/^\^((?:\\[^a-zA-Z0-9]|[^\\\[\]\^$*+?.()|{}]+)*)/.exec(t.source);return null!=r?r[1].replace(/\\(.)/g,"$1"):""}function e(t,r){return t.replace(/\$(\$|\d{1,2})/,function(t,e){return r["$"===e?0:Number(e)]})}function n(t,r,e){if(!e)return!1;var n=r(e,t);return h(n)?n:!0}var a=[],i=null;this.rule=function(t){if(!p(t))throw Error("'rule' must be a function");return a.push(t),this},this.otherwise=function(t){if(m(t)){var r=t;t=function(){return r}}else if(!p(t))throw Error("'rule' must be a function");return i=t,this},this.when=function(a,i){var o,s;if(m(a)&&(a=t.compile(a)),t.isMatcher(a)){if(m(i))s=t.compile(i),i=function(t){return s.format(t)};else if(!p(i))throw Error("invalid 'handler' in when()");o=function(t){return n(t,i,a.exec(t.path(),t.search()))},o.prefix=m(a.prefix)?a.prefix:""}else{if(!(a instanceof RegExp))throw Error("invalid 'what' in when()");if(m(i))s=i,i=function(t){return e(s,t)};else if(!p(i))throw Error("invalid 'handler' in when()");if(a.global||a.sticky)throw Error("when() RegExp must not be global or sticky");o=function(t){return n(t,i,a.exec(t.path()))},o.prefix=r(a)}return this.rule(o)},this.$get=["$location","$rootScope",function(t,r){function e(){var r,e,n=a.length;for(r=0;n>r;r++)if(e=a[r](t)){m(e)&&t.replace().url(e);break}}return i&&a.push(i),r.$on("$locationChangeSuccess",e),{}}]}function l(t,r){function e(t){var r;if(m(t)){if(r=c[t],!r)throw Error("No such state '"+t+"'")}else if(r=c[t.name],!r||r!==t&&r.self!==t)throw Error("Invalid or unregistered state");return r}function i(a){a=n(a,{self:a,toString:function(){return this.name}});var i=a.name;if(!m(i)||i.indexOf("@")>=0)throw Error("State must have a valid name");if(c[i])throw Error("State '"+i+"'' is already defined");var o=u;if(h(a.parent))null!=a.parent&&(o=e(a.parent));else{var s=/^(.+)\.[^.]+$/.exec(i);null!=s&&(o=e(s[1]))}a.parent=o;var f=a.url;if(m(f))f=a.url="^"==f.charAt(0)?r.compile(f.substring(1)):(o.navigable||u).url.concat(f);else if($(f)&&p(f.exec)&&p(f.format)&&p(f.concat));else if(null!=f)throw Error("Invalid url '"+f+"' in state '"+a+"'");a.navigable=f?a:o?o.navigable:null;var w=a.params;if(w){if(!v(w))throw Error("Invalid params in state '"+a+"'");if(f)throw Error("Both params and url specicified in state '"+a+"'")}else w=a.params=f?f.parameters():a.parent.params;var b={};if(d(w,function(t){b[t]=!0}),o){d(o.params,function(t){if(!b[t])throw Error("Missing required parameter '"+t+"' in state '"+i+"'");b[t]=!1});var E=a.ownParams=[];d(b,function(t,r){t&&E.push(r)})}else a.ownParams=w;var x={};d(h(a.views)?a.views:{"":a},function(t,r){0>r.indexOf("@")&&(r=r+"@"+a.parent.name),x[r]=t}),a.views=x,a.path=o?o.path.concat(a):[];var P=a.includes=o?g({},o.includes):{};return P[i]=!0,a.resolve||(a.resolve={}),!a.abstract&&f&&t.when(f,function(t){l.transitionTo(a,t,!1)}),c[i]=a,a}function o(t,r){return $(t)?r=t:r.name=t,i(r),this}function s(t,r,i,o,s,c){function f(t,e,n,s,u){function l(e,n){d(e,function(e,a){f.push(r.when(m(e)?o.get(e):o.invoke(e,t.self,h)).then(function(t){n[a]=t}))})}var c,f=[s];n?c=e:(c={},d(t.params,function(t){c[t]=e[t]}));var h={$stateParams:c},p=u.globals={$stateParams:c};return l(t.resolve,p),p.$$state=t,d(t.views,function(e,n){var a=u[n]={$$controller:e.controller};f.push(r.when(i.fromConfig(e,c,h)||"").then(function(t){a.$template=t})),e.resolve!==t.resolve&&l(e.resolve,a)}),r.all(f).then(function(r){return a(u.globals,r[0].globals),d(t.views,function(t,r){a(u[r],u.globals)}),u})}function p(t,r,e){for(var n=0;e.length>n;n++){var a=e[n];if(t[a]!=r[a])return!1}return!0}var $=r.reject(Error("transition superseded")),v=r.reject(Error("transition prevented"));return l={params:{},current:u.self,$current:u,transition:null},l.transitionTo=function(a,i,m){if(h(m)||(m=!0),a=e(a),a.abstract)throw Error("Cannot transition to abstract state '"+a+"'");var g,b,E=a.path,x=l.$current,P=l.params,C=x.path,S=u.locals,y=[];for(g=0,b=E[g];b&&b===C[g]&&p(i,P,b.ownParams);g++,b=E[g])S=y[g]=b.locals;if(a===x&&S===x.locals)return l.transition=null,r.when(l.current);var j={};if(d(a.params,function(t){var r=i[t];j[t]=null!=r?r+"":null}),i=j,t.$broadcast("$stateChangeStart",a.self,i,x.self,P).defaultPrevented)return v;for(var R=r.when(S),I=g;E.length>I;I++,b=E[I])S=y[I]=n(S),R=f(b,i,b===a,R,S);var k=l.transition=R.then(function(){var r,e,n;if(l.transition!==k)return $;for(r=C.length-1;r>=g;r--)n=C[r],n.self.onExit&&o.invoke(n.self.onExit,n.self,n.locals.globals),n.locals=null;for(r=g;E.length>r;r++)e=E[r],e.locals=y[r],e.self.onEnter&&o.invoke(e.self.onEnter,e.self,e.locals.globals);l.$current=a,l.current=a.self,l.params=i,w(l.params,s),l.transition=null;var u=a.navigable;return m&&u&&c.url(u.url.format(u.locals.globals.$stateParams)),t.$broadcast("$stateChangeSuccess",a.self,i,x.self,P),l.current},function(e){return l.transition!==k?$:(l.transition=null,t.$broadcast("$stateChangeError",a.self,i,x.self,P,e),r.reject(e))});return k},l.is=function(t){return l.$current===e(t)},l.includes=function(t){return l.$current.includes[e(t).name]},l}var u,l,c={};u=i({name:"",url:"^",views:null,"abstract":!0}),u.locals={globals:{$stateParams:{}}},u.navigable=null,this.state=o,this.$get=s,s.$inject=["$rootScope","$q","$templateFactory","$injector","$stateParams","$location","$urlRouter"]}function c(t,e,n,a,i){var o;try{o=a.get("$animator")}catch(s){}var u={restrict:"ECA",terminal:!0,link:function(a,s,l){function c(){var o=t.$current&&t.$current.locals[p];if(o!==h)if(f&&($?$.leave(s.contents(),s):s.html(""),f.$destroy(),f=null),o){h=o,d.state=o.$$state;var u;$?(u=r.element("<div></div>").html(o.$template).contents(),$.enter(u,s)):(s.html(o.$template),u=s.contents());var l=e(u);if(f=a.$new(),o.$$controller){o.$scope=f;var c=n(o.$$controller,o);s.children().data("$ngControllerController",c)}l(f),f.$emit("$viewContentLoaded"),f.$eval(m),i()}else h=null,d.state=null}var f,h,p=l[u.name]||l.name||"",m=l.onload||"",$=o&&o(a,l),v=s.parent().inheritedData("$uiView");0>p.indexOf("@")&&(p=p+"@"+(v?v.state.name:""));var d={name:p,state:null};s.data("$uiView",d),a.$on("$stateChangeSuccess",c),c()}};return u}function f(t,r){function a(t){this.locals=t.locals.globals,this.params=this.locals.$stateParams}function i(){this.locals=null,this.params=null}function o(e,o){if(null!=o.redirectTo){var s,l=o.redirectTo;if(m(l))s=l;else{if(!p(l))throw Error("Invalid 'redirectTo' in when()");s=function(t,r){return l(t,r.path(),r.search())}}r.when(e,s)}else t.state(n(o,{parent:null,name:"route:"+encodeURIComponent(e),url:e,onEnter:a,onExit:i}));return u.push(o),this}function s(t,r,n){function a(t){return""!==t.name?t:e}var i={routes:u,params:n,current:e};return r.$on("$stateChangeStart",function(t,e,n,i){r.$broadcast("$routeChangeStart",a(e),a(i))}),r.$on("$stateChangeSuccess",function(t,e,n,o){i.current=a(e),r.$broadcast("$routeChangeSuccess",a(e),a(o)),w(n,i.params)}),r.$on("$stateChangeError",function(t,e,n,i,o,s){r.$broadcast("$routeChangeError",a(e),a(i),s)}),i}var u=[];a.$inject=["$$state"],this.when=o,this.$get=s,s.$inject=["$state","$rootScope","$routeParams"]}var h=r.isDefined,p=r.isFunction,m=r.isString,$=r.isObject,v=r.isArray,d=r.forEach,g=r.extend,w=r.copy;r.module("ui.util",["ng"]),r.module("ui.router",["ui.util"]),r.module("ui.state",["ui.router","ui.util"]),r.module("ui.compat",["ui.state"]),i.$inject=["$http","$templateCache","$injector"],r.module("ui.util").service("$templateFactory",i),o.prototype.concat=function(t){return new o(this.sourcePath+t+this.sourceSearch)},o.prototype.toString=function(){return this.source},o.prototype.exec=function(t,r){var e=this.regexp.exec(t);if(!e)return null;var n,a=this.params,i=a.length,o=this.segments.length-1,s={};for(n=0;o>n;n++)s[a[n]]=decodeURIComponent(e[n+1]);for(;i>n;n++)s[a[n]]=r[a[n]];return s},o.prototype.parameters=function(){return this.params},o.prototype.format=function(t){var r=this.segments,e=this.params;if(!t)return r.join("");var n,a,i,o=r.length-1,s=e.length,u=r[0];for(n=0;o>n;n++)i=t[e[n]],null!=i&&(u+=i),u+=r[n+1];for(;s>n;n++)i=t[e[n]],null!=i&&(u+=(a?"&":"?")+e[n]+"="+encodeURIComponent(i),a=!0);return u},r.module("ui.util").provider("$urlMatcherFactory",s),u.$inject=["$urlMatcherFactoryProvider"],r.module("ui.router").provider("$urlRouter",u),l.$inject=["$urlRouterProvider","$urlMatcherFactoryProvider"],r.module("ui.state").value("$stateParams",{}).provider("$state",l),c.$inject=["$state","$compile","$controller","$injector","$anchorScroll"],r.module("ui.state").directive("uiView",c),f.$inject=["$stateProvider","$urlRouterProvider"],r.module("ui.compat").provider("$route",f).directive("ngView",c)})(window,window.angular);
<h1>Route 1</h1>
<hr/>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
<h1>Route 2</h1>
<hr/>
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre><h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
<pre><code>
#header h1 a {
display: block;
width: 300px;
height: 80px;
}
</code></pre>
<a ui-sref=".list">Show List</a>
<div ui-view></div>
<h3>List of Route 2 Things</h3>
<ul>
<li ng-repeat="thing in things">{{thing}}</li>
</ul>
<h3>List of Route 1 Items</h3>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>