update w/ ui-router

This commit is contained in:
Adam Bradley
2014-01-07 19:50:39 -06:00
parent 950df2bb3e
commit cfdefd452e
33 changed files with 152 additions and 468 deletions

View File

@@ -19,6 +19,7 @@
<script src="/dist/js/angular/angular-touch.js"></script>
<script src="/dist/js/angular/angular-sanitize.js"></script>
<script src="/dist/js/angular/angular-resource.js"></script>
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
<script src="/dist/js/ionic-angular.js"></script>

View File

@@ -14,6 +14,7 @@
<script src="/dist/js/angular/angular-route.js"></script>
<script src="/dist/js/angular/angular-touch.js"></script>
<script src="/dist/js/angular/angular-sanitize.js"></script>
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
<script src="/dist/js/ionic-angular.js"></script>
<!-- your app's script -->
@@ -24,20 +25,19 @@
<!--
'listExample' is the name of this angular module (app.js)
'nav-router' attribute updates the nav-bar title and animations as you navigate
'animation' attribute sets which type of animations to use
-->
<body ng-app="listExample" nav-router animation="slide-left-right-ios7">
<body ng-app="listExample" animation="slide-left-right-ios7">
<!-- The nav bar that will be updated as we navigate -->
<nav-bar
class="nav-title-slide-ios7"
animation="nav-title-slide-ios7"
type="bar-positive"
back-button-type="button-icon"
back-button-icon="ion-arrow-left-c"></nav-bar>
<!-- where the content of each page will be rendered -->
<ng-view></ng-view>
<ui-view animation="slide-left-right"></ui-view>
<!--
@@ -51,7 +51,7 @@
The MovieIndexCtrl gets data from the MovieService (service.js)
-->
<script type="text/ng-template" id="/index.html">
<nav-page title="title">
<view title="title">
<content has-header="true">
<list>
@@ -61,7 +61,7 @@
</list>
</content>
</nav-page>
</view>
</script>
<!--
@@ -70,7 +70,7 @@
The MovieDetailCtrl gets data from the MovieService (service.js)
-->
<script type="text/ng-template" id="/movie.html">
<nav-page title="title">
<view title="title">
<content has-header="true" padding="true">
<h1>{{ movie.title }}</h1>
<dl>
@@ -90,7 +90,7 @@
<dd>{{ movie.rating }}</dd>
</dl>
</content>
</nav-page>
</view>
</script>

View File

@@ -3,34 +3,29 @@
// the 2nd parameter is an array or 'requires'
// 'listExample.services' is found in services.js
// 'listExample.controllers' is found in controllers.js
angular.module('listExample', ['ionic', 'ngRoute', 'ngAnimate', 'listExample.services', 'listExample.controllers'])
angular.module('listExample', ['ionic', 'listExample.services', 'listExample.controllers'])
.config(function ($compileProvider){
// Needed for routing to work
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
.config(function($routeProvider, $locationProvider) {
.config(function($stateProvider, $urlRouterProvider) {
// Set up the initial routes that our app will respond to.
// These are then tied up to our nav router which animates and
// updates a navigation bar
$routeProvider.when('/', {
templateUrl: '/index.html',
controller: 'MovieIndexCtrl'
});
$stateProvider
.state('movieIndex', {
url: '/',
templateUrl: '/index.html',
controller: 'MovieIndexCtrl'
})
// if the url matches something like /movie/88 then this route
// will fire off the MovieDetailCtrl (controllers.js)
$routeProvider.when('/movie/:movieId', {
templateUrl: '/movie.html',
controller: 'MovieDetailCtrl'
});
// if the url matches something like /movie/88 then this route
// will fire off the MovieDetailCtrl (controllers.js)
.state('movieDetail', {
url: '/movie/:movieId',
templateUrl: '/movie.html',
controller: 'MovieDetailCtrl'
});
// if none of the above routes are met, use this fallback
$routeProvider.otherwise({
redirectTo: '/'
});
$urlRouterProvider.otherwise('/');
});

View File

@@ -13,8 +13,8 @@ angular.module('listExample.controllers', [])
})
// Controller that shows more detailed info about a movie
.controller('MovieDetailCtrl', function($scope, $routeParams, MovieService) {
.controller('MovieDetailCtrl', function($scope, $stateParams, MovieService) {
// "MovieService" is a service returning mock data (services.js)
$scope.movie = MovieService.get($routeParams.movieId);
$scope.movie = MovieService.get($stateParams.movieId);
$scope.title = "Movie Info";
});

View File

@@ -24,6 +24,7 @@
<script src="/dist/js/angular/angular-route.js"></script>
<script src="/dist/js/angular/angular-touch.js"></script>
<script src="/dist/js/angular/angular-sanitize.js"></script>
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
<script src="/dist/js/ionic-angular.js"></script>
<!-- google maps javascript -->

View File

@@ -105,6 +105,7 @@
<script src="/dist/js/angular/angular-route.js"></script>
<script src="/dist/js/angular/angular-touch.js"></script>
<script src="/dist/js/angular/angular-sanitize.js"></script>
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
<script src="/dist/js/ionic-angular.js"></script>
</head>

View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 136 KiB

View File

@@ -16,6 +16,7 @@
<script src="/dist/js/angular/angular-route.js"></script>
<script src="/dist/js/angular/angular-touch.js"></script>
<script src="/dist/js/angular/angular-sanitize.js"></script>
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
<script src="/dist/js/ionic-angular.js"></script>
</head>

View File

@@ -16,6 +16,7 @@
<script src="/dist/js/angular/angular-resource.js"></script>
<script src="/dist/js/angular/angular-touch.js"></script>
<script src="/dist/js/angular/angular-sanitize.js"></script>
<script src="/dist/js/angular-ui/angular-ui-router.js"></script>
<script src="/dist/js/ionic-angular.js"></script>
<script src="services.js"></script>

View File

@@ -19,119 +19,123 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body ng-controller="ActionCtrl">
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
<content>
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
<div class="col">
<div style="background-color: #eee" ng-click="show()">
</div>
</div>
</div>
<button ng-click="show()" class="button">Show</button>
<button ng-click="show()" class="button">Show</button>
</content>
<script>
angular.module('actionTest', ['ionic', 'ngAnimate'])

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.slider-slide {

View File

@@ -26,6 +26,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('navTest', ['ionic.ui.checkbox', 'ionic.ui.content', 'ngAnimate', 'ngTouch'])

View File

@@ -13,6 +13,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.reveal-animation {

View File

@@ -13,6 +13,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body ng-controller="ThisCtrl">

View File

@@ -13,6 +13,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.reveal-animation {

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
#box {

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body ng-controller="TestCtrl">

View File

@@ -30,6 +30,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('navTest', ['ionic']);

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.box {

View File

@@ -17,6 +17,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<script>
angular.module('ionic.example', ['ionic.service.loading'])

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>

View File

@@ -1,154 +0,0 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Nav Bars And Tabs</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<pane nav-router animation="slide-left-right">
<nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
<ng-view></ng-view>
</pane>
<script id="page1.html" type="text/ng-template">
<nav-page>
<tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animate-nav="false">
<!-- Pets tab -->
<tab title="Pets" icon="icon ion-home" ng-controller="PetsCtrl">
<content has-header="true" has-tabs="true">
<list>
<link-item ng-repeat="pet in pets" type="item-text-wrap" href="#/pet/{{pet.id}}">
<h3>{{pet.title}}</h3>
<p>{{pet.description}}</p>
</item>
</link-item>
</list>
</content>
</tab>
<!-- Adoption tab -->
<tab title="Adopt" icon="icon ion-heart" ng-controller="AdoptCtrl" left-buttons="leftButtons" right-buttons="buttons">
<content has-header="true" has-tabs="true">
<div class="padding">
<h2>Adopt a pet today.</h2>
</div>
<div class="list list-inset">
<label class="item item-input">
<span class="input-label">Your name</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Your email</span>
<input type="password">
</label>
<label class="item item-input">
<textarea placeholder="Any more info?"></textarea>
</label>
<button class="button button-positive button-block">Adopt</button>
</div>
</content>
</tab>
<!-- Home tab -->
<tab title="About" icon="icon ion-search">
<content has-header="true" has-tabs="true" padding="true">
<h3>About this app</h3>
<p>
This is a sample seed project for the Ionic Framework. Please change it to match your needs.
</p>
</content>
</tab>
</tabs>
</nav-page>
</script>
<script id="pet.html" type="text/ng-template">
<nav-page title="pet.title" ng-controller="PetCtrl">
</nav-page>
</script>
<script id="page2.html" type="text/ng-template">
<nav-page title="'Beets'">
<h1>Page 2</h1>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page3">Next</a>
</nav-page>
</script>
<script id="page3.html" type="text/ng-template">
<nav-page title="'Battlestar Galactica'">
<h1>Page 3</h1>
<a class="button button-pure" nav-back>Back</a>
</nav-page>
</script>
<script>
angular.module('navTest', ['ionic'])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'page1.html',
controller: 'Page1Ctrl'
});
$routeProvider.when('/page2', {
templateUrl: 'page2.html',
});
$routeProvider.when('/page3', {
templateUrl: 'page3.html',
});
$routeProvider.when('/pet/:petId', {
templateUrl: 'pet.html',
controller: 'PetCtrl'
});
// configure html5 to get links working on jsfiddle
//$locationProvider.html5Mode(true);
})
.controller('Page1Ctrl', function($scope) {
$scope.num = Math.floor(Math.random() * 100);
})
.controller('PetsCtrl', function($scope, $routeParams) {
$scope.pets = [
{ id: 1, title: 'Cat', description: 'Furry little feline' }
];
})
.controller('PetCtrl', function($scope, $routeParams) {
$scope.pet = {
title: 'Cat'
}
})
.controller('AdoptCtrl', function($scope) {
$scope.buttons = [
{
content: 'Adopt',
tap: function(e) {
console.log('ADOPT TAPPED');
},
type: 'button-clear'
}
];
});
</script>
</body>
</html>

View File

@@ -1,93 +0,0 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Nav Bars</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<pane nav-router animation="slide-left-right">
<nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
<ng-view></ng-view>
</pane>
<script id="page1.html" type="text/ng-template">
<nav-page title="'Bears'" hide-back-button="true" right-buttons="rightButtons" hide-nav-bar="true">
<content has-header="true">
<h1>Page 1</h1>
<span>{{num}}</span>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page2">Next</a>
</content>
</nav-page>
</script>
<script id="page2.html" type="text/ng-template">
<nav-page title="'Beets'">
<content has-header="true">
<h1>Page 2</h1>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page3">Next</a>
</content>
</nav-page>
</script>
<script id="page3.html" type="text/ng-template">
<nav-page title="'Battlestar Galactica'">
<content has-header="true">
<h1>Page 3</h1>
<a class="button button-pure" nav-back>Back</a>
</content>
</nav-page>
</script>
<script>
angular.module('navTest', ['ionic'])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/cats', {
templateUrl: 'page1.html',
controller: 'Page1Ctrl'
});
$routeProvider.when('/page2', {
templateUrl: 'page2.html',
});
$routeProvider.when('/page3', {
templateUrl: 'page3.html',
});
$routeProvider.otherwise({
redirectTo: '/cats'
});
// configure html5 to get links working on jsfiddle
//$locationProvider.html5Mode(true);
})
.controller('Page1Ctrl', function($scope) {
$scope.num = Math.floor(Math.random() * 100);
$scope.rightButtons = [
{
content: 'Hello',
tap: function(e) {
console.log('Click button');
}
}
]
});
</script>
</body>
</html>

View File

@@ -1,93 +0,0 @@
<html ng-app="navTest">
<head>
<meta charset="utf-8">
<title>Nav Bars</title>
<!-- Sets initial viewport load and disables zooming -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/angular/angular.js"></script>
<script src="../../../../dist/js/angular/angular-animate.js"></script>
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>
<pane nav-router animation="slide-left-right">
<nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
<ng-view></ng-view>
</pane>
<script id="page1.html" type="text/ng-template">
<nav-page title="'Bears'" hide-back-button="true" right-buttons="rightButtons" hide-nav-bar="true">
<content has-header="true">
<h1>Page 1</h1>
<span>{{num}}</span>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page2">Next</a>
</content>
</nav-page>
</script>
<script id="page2.html" type="text/ng-template">
<nav-page title="'Beets'">
<content has-header="true">
<h1>Page 2</h1>
<a class="button button-pure" nav-back>Back</a>
<a class="button button-assertive" href="#/page3">Next</a>
</content>
</nav-page>
</script>
<script id="page3.html" type="text/ng-template">
<nav-page title="'Battlestar Galactica'">
<content has-header="true">
<h1>Page 3</h1>
<a class="button button-pure" nav-back>Back</a>
</content>
</nav-page>
</script>
<script>
angular.module('navTest', ['ionic'])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/cats', {
templateUrl: 'page1.html',
controller: 'Page1Ctrl'
});
$routeProvider.when('/page2', {
templateUrl: 'page2.html',
});
$routeProvider.when('/page3', {
templateUrl: 'page3.html',
});
$routeProvider.otherwise({
redirectTo: '/cats'
});
// configure html5 to get links working on jsfiddle
//$locationProvider.html5Mode(true);
})
.controller('Page1Ctrl', function($scope) {
$scope.num = Math.floor(Math.random() * 100);
$scope.rightButtons = [
{
content: 'Hello',
tap: function(e) {
console.log('Click button');
}
}
]
});
</script>
</body>
</html>

View File

@@ -13,6 +13,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.reveal-animation {

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>

View File

@@ -13,6 +13,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body ng-controller="ThisCtrl">

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.slider-slide {

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>

View File

@@ -50,6 +50,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body ng-controller="RootCtrl">

View File

@@ -12,6 +12,7 @@
<script src="../../../../dist/js/angular/angular-route.js"></script>
<script src="../../../../dist/js/angular/angular-touch.js"></script>
<script src="../../../../dist/js/angular/angular-sanitize.js"></script>
<script src="../../../../dist/js/angular-ui/angular-ui-router.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
</head>
<body>