<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.navbar { border-radius:0; }
</style>
<!-- JS (load angular, ui-router, and our custom js file) -->
<script type="text/javascript" src="//code.angularjs.org/1.4.7/angular.js"></script>
<script type="text/javascript" src="//rawgit.com/stonexx/angular-extends/master/dist/angular-extends.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<!-- apply our angular app to our site -->
<body ng-app="routerApp">
<ul>
<li>
<b>Host: </b> {{$location.host()}}
</li>
<li>
<b>Location.url: </b> {{$location.url()}}
</li>
<li>
<b>Location.path: </b> {{$location.path()}}
</li>
<li>
<b>PlayRoutes:</b>
<pre>{{$playRoutes | json}}</pre>
<div ng-if="!!$playRoutes.controllers.api.Application.index">
<b>controllers.api.Application.index:</b>
<div ng-init="indexRoute = $playRoutes.controllers.api.Application.index()">
<div>- <b>method: </b> {{indexRoute.method}}</div>
<div>- <b>url: </b> {{indexRoute.url}}</div>
<div>- <b>absoluteURL: </b> {{indexRoute.absoluteURL()}}</div>
<div>- <b>webSocketURL: </b> {{indexRoute.webSocketURL()}}</div>
</div>
</div>
</li>
</ul>
<!-- NAVIGATION -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI Router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="directives">Directives</a></li>
<li><a ui-sref="filters">Filters</a></li>
<li><a ui-sref="form">Form</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<!-- MAIN CONTENT -->
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div class="container">
<div ui-view></div>
</div>
<div class="text-center">
<p>A tutorial by <a href="http://scotch.io" target="_blank">scotch.io</a></p>
<p>View the tutorial: <a href="http://scotch.io/tutorials/javascript/angular-routing-using-ui-router" target="_blank">AngularJS Routing using UI-Router</a></p>
</div>
</body>
</html>
var routerApp = angular.module('routerApp', ['ui.router', 'ngExtends']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
// HOME STATES AND NESTED VIEWS ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
// nested list with custom controller
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
// nested list with just some random string data
.state('home.paragraph', {
url: '/paragraph',
template: 'I could sure use a drink right now.'
})
//test directives
.state('directives', {
url: '/directives',
templateUrl: 'partial-directives.html',
controller: function($scope, $interval, $timeout){
$scope.focus = false;
$scope.doFocus = function(){
$scope.focus = true;
$timeout(function(){
$scope.focus = false;
}, 2000);
};
$scope.lowerString = '';
$scope.upperString = '';
$scope.alphabets = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
$scope.testRepeatDone = function(elem){
elem.text(elem.text() + '!');
};
$scope.rotate = 0;
$interval(function(){
if ($scope.rotate >= 100)
$scope.rotate = 0;
else
$scope.rotate++;
}, 100);
}
})
//test filters
.state('filters', {
url: '/filters',
templateUrl: 'partial-filters.html',
controller: function($scope){
$scope.combineTransform = function(o){ return o.a; };
}
})
//test $searchForm
.state('form', {
url: '/form',
templateUrl: 'partial-form.html',
controller: function($scope){
$scope.search = $scope.$root.search;
}
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
.state('about', {
url: '/about',
views: {
'': { templateUrl: 'partial-about.html' },
'columnOne@about': { template: 'Look I am a column!' },
'columnTwo@about': {
templateUrl: 'table-data.html',
controller: 'scotchController'
}
}
})
;
});
routerApp.config(function($playRoutesProvider){
$playRoutesProvider.jsRoutes = {
"controllers": {
"api": {
"Application":{
"index": function() {
return {
method: "GET",
type: "GET",
url: "/",
absoluteURL: function(secure){
return (secure ? 'https' : 'http') + '://api.server.dev/';
},
ajax: function(o) {
o = o || {};
o.url = '/',
o.type = 'GET';
return jQuery.ajax(o);
},
webSocketURL: function(secure){
return (secure ? 'wss' : 'ws') + '://api.server.dev/';
}
};
}
}
}
}
}
});
routerApp.run(function($rootScope, $location, $playRoutes, $searchForm){
$rootScope.$location = $location;
$rootScope.$playRoutes = $playRoutes;
$rootScope.search = $searchForm({
defaults: {
a: 1,
b: 2
},
preSubmit: function(form, filters, unfilters){
console.log('preSubmit', form, filters, unfilters);
},
preReset: function(form){
console.log('postSubmit', form);
},
submit: function(form, filters, unfilters) {
console.log('submit', form, filters, unfilters);
},
reset: function(form){
console.log('reset', form);
},
action: function(form){
console.log('action', form);
},
transform: function(key, value){
console.log('transform', key, value);
return value;
}
});
});
routerApp.controller('scotchController', function($scope) {
$scope.message = 'test';
$scope.scotches = [
{
name: 'Macallan 12',
price: 50
},
{
name: 'Chivas Regal Royal Salute',
price: 10000
},
{
name: 'Glenfiddich 1937',
price: 20000
}
];
});
# Demonstration of AngularUI Router
Code and demo for the scotch.io tutorial
[AngularJS Routing Using UI-Router](http://scotch.io/tutorials/javascript/angular-routing-using-ui-router)
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref=".list" class="btn btn-primary">List</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
<div ui-view></div>
<div class="jumbotron text-center">
<h1>The About Page</h1>
<p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
</div>
<div class="row">
<div class="col-sm-6">
<div ui-view="columnOne"></div>
</div>
<div class="col-sm-6">
<div ui-view="columnTwo"></div>
</div>
</div>
<ul>
<li ng-repeat="dog in dogs">{{ dog }}</li>
</ul>
<h2>Fine Scotches</h2>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<td>Name</td>
<td>Cost</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="scotch in scotches">
<td>{{ scotch.name }}</td>
<td>${{ scotch.price }}</td>
</tr>
</tbody>
</table>
<pre>{{search | json}}</pre>
<form name="searchForm" class="form-horizontal" ng-submit="search.submit(searchForm)">
<div class="form-group">
<label for="search-a" class="col-sm-1 control-label">A</label>
<div class="col-sm-5">
<input id="search-a" type="text" name="a" class="form-control" placeholder="input the a" ng-model="search.form.a">
</div>
<label for="search-b" class="col-sm-1 control-label">B</label>
<div class="col-sm-5">
<input id="search-b" type="text" name="b" class="form-control" placeholder="input the b" ng-model="search.form.b">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-8">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-default" ng-click="search.reset(searchForm)">Reset</button>
</div>
</div>
</form>
<h1>Directives:</h1>
<ul>
<li><b>Count-To:</b> <span ex-count-to="1000000" value="0" duration="10000"></span></li>
<li><b>Dom-Init:</b> <span ex-dom-init="msg = 'initialized'">{{msg}}</span></li>
<li>
<label for="test1"><b>Focus-Me</b></label>:
<input type="text" id="test1" ex-focus-me="focus"/>
<button class="btn btn-primary" ng-click="doFocus()">Focus</button>
</li>
<li>
<label for="test2"><b>Lower</b></label>: <input type="text" id="test2" ng-model="lowerString" ex-lower/>
</li>
<li>
<label for="test3"><b>Upper</b></label>: <input type="text" id="test3" ng-model="upperString" ex-upper/>
</li>
<li>
<b>Repeat-Done:</b> <span ng-repeat="a in alphabets" ex-repeat-done="testRepeatDone">{{a}}</span>
</li>
<li>
<span><b>Rotate2d:</b></span>
<div style="border: 2px #000000 solid; width: 20px; height: 20px;" ex-rotate2d="rotate" limit="100"></div>
</li>
</ul>
<h1>Filters:</h1>
<ul>
<li>
<h3>Arrays:</h3>
<ul>
<li><b>MakeArray:</b> <span ng-non-bindable>{{'test' | makeArray}}</span> = <span>{{'test' | makeArray}}</span></li>
<li><b>Range:</b> <span ng-non-bindable>{{'a'|range:'z'}}</span> = <span>{{'a'|range:'z'}}</span></li>
<li><b>Join:</b> <span ng-non-bindable>{{'a' | range:'z' | join:'-'}}</span> = <span>{{'a' | range:'z' | join:'-'}}</span></li>
<li>
<div><b>Combine:</b></div>
<ul>
<li>
<span ng-non-bindable>{{'a' | range:'z' | combine}}</span> = <span>{{'a' | range:'z' | combine}}</span>
</li>
<li>
<span ng-non-bindable>{{'1' | range:'9' | combine:'=integer'}}</span> = <span>{{'1' | range:'9' | combine:'=integer'}}</span>
</li>
<li>
<span ng-non-bindable>{{['1.1', '1.2', '1.3'] | combine:'=float'}}</span> = <span>{{['1.1', '1.2', '1.3'] | combine:'=float'}}</span>
</li>
<li>
<span ng-non-bindable>{{[{a:1}, {a:2}, {a:3}] | combine:'a'}}</span> = <span>{{[{a:1}, {a:2}, {a:3}] | combine:'a'}}</span>
</li>
<li>
<span ng-non-bindable>{{[{a:1}, {a:2}, {a:3}] | combine:combineTransform}}</span> = <span>{{[{a:1}, {a:2}, {a:3}] | combine:combineTransform}}</span>
</li>
</ul>
</li>
<li>
<div><b>Limit:</b></div>
<ul>
<li>
<span ng-non-bindable>{{'a'|range:'z' | limit:1:10}}</span> = <span>{{'a'|range:'z' | limit:1:10}}</span>
</li>
<li>
<span ng-non-bindable>{{'a'|range:'z' | limit:2:10}}</span> = <span>{{'a'|range:'z' | limit:2:10}}</span>
</li>
</ul>
</li>
<li>
<div><b>Trim:</b></div>
<ul>
<li>
<span ng-non-bindable>[{{' a ' | trim}}]</span> = <span>[{{' a ' | trim}}]</span>
</li>
<li>
<span ng-non-bindable>{{[' a ', ' b', 'c '] | trim}}</span> = <span>{{[' a ', ' b', 'c '] | trim}}</span>
</li>
</ul>
</li>
</ul>
</li>
<li>
<h3>Strings:</h3>
<ul>
<li>
<b>TrustAsHtml:</b>
<span ng-non-bindable><span ng-bind-html="'<span style=\'border: 1px red solid;\'>test</span>' | trustAsHtml"></span></span> =
<span ng-bind-html="'<span style=\'border: 1px red solid;\'>test</span>' | trustAsHtml"></span>
</li>
<li>
<b>TrustAsJs:</b>
<span ng-non-bindable><span ng-bind="{{'1 + 1' | trustAsJs}}"></span></span> =
<span ng-bind="{{'1 + 1' | trustAsJs}}"></span>
</li>
<li>
<div><b>TrustAsResourceUrl:</b></div>
<span ng-non-bindable><iframe width="560" height="315" ng-src="{{'http://www.youtube.com/embed/4wOoLLDXbDY' | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe></span> =
<iframe width="560" height="315" ng-src="{{'http://www.youtube.com/embed/4wOoLLDXbDY' | trustAsResourceUrl}}" frameborder="0" allowfullscreen></iframe>
</li>
<li>
<b>TrustAsUrl:</b>
<span ng-non-bindable><a ng-href="{{'http://www.naver.com' | trustAsUrl}}" target="_blank">Click!</a></span> =
<a ng-href="{{'http://www.naver.com' | trustAsUrl}}" target="_blank">Click!</a>
</li>
<li>
<b>Replace:</b>
<ul>
<li>
<span ng-non-bindable>{{'axaxa' | replace:'x':'-'}}</span> = <span>{{'axaxa' | replace:'x':'-'}}</span>
</li>
<li>
<span ng-non-bindable>{{'axaxa' | replace:'x':'-':'g'}}</span> = <span>{{'axaxa' | replace:'x':'-':'g'}}</span>
</li>
</ul>
</li>
<li>
<b>Nl2br:</b>
<span ng-non-bindable><span ng-bind-html="'\na\nb\nc' | nl2br | trustAsHtml"></span></span> =
<span ng-bind-html="'\na\nb\nc' | nl2br | trustAsHtml"></span>
</li>
<li>
<b>Br2nl:</b>
<span ng-non-bindable><span ng-bind-html="'<br/>a<br/>b<br/>c' | br2nl | trustAsHtml"></span></span> =
<span ng-bind-html="'<br/>a<br/>b<br/>c' | br2nl | trustAsHtml"></span>
</li>
<li>
<b>Space2nbsp:</b>
<span ng-non-bindable><span ng-bind-html="'[ ]' | space2nbsp | trustAsHtml"></span></span> =
<span ng-bind-html="'[ ]' | space2nbsp | trustAsHtml"></span>
</li>
<li>
<b>Nbsp2space:</b>
<span ng-non-bindable>{{'[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]' | nbsp2space}}</span> =
<span>{{'[&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]' | nbsp2space}}</span>
</li>
<li>
<b>Split:</b>
<span ng-non-bindable>{{'a-b-c-d-e' | split:'-'}}</span> =
<span>{{'a-b-c-d-e' | split:'-'}}</span>
</li>
<li>
<b>Cutstring:</b>
<span ng-non-bindable>{{'a'|range:'z' | join:'' | cutstring:10}}</span> =
<span>{{'a'|range:'z' | join:'' | cutstring:10}}</span>
</li>
<li>
<b>Roundcutstring:</b>
<span ng-non-bindable>{{'a'|range:'z' | join:'' | roundcutstring:'mno':20}}</span> =
<span>{{'a'|range:'z' | join:'' | roundcutstring:'mno':20}}</span>
</li>
</ul>
</li>
</ul>