mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
delete unused nav router stuff
This commit is contained in:
Adam Bradley
@@ -1,115 +0,0 @@
|
||||
/**
|
||||
* Adapted from Backbone.js
|
||||
*/
|
||||
(function(ionic) {
|
||||
'use strict';
|
||||
var optionalParam = /\((.*?)\)/g;
|
||||
var namedParam = /(\(\?)?:\w+/g;
|
||||
var splatParam = /\*\w+/g;
|
||||
var escapeRegExp = /[\-{}\[\]+?.,\\\^$|#\s]/g;
|
||||
|
||||
// Cached regex for stripping a leading hash/slash and trailing space.
|
||||
var routeStripper = /^[#\/]|\s+$/g;
|
||||
|
||||
// Cached regex for stripping leading and trailing slashes.
|
||||
var rootStripper = /^\/+|\/+$/g;
|
||||
|
||||
// Cached regex for removing a trailing slash.
|
||||
var trailingSlash = /\/$/;
|
||||
|
||||
ionic.controllers.RouteViewController = ionic.controllers.ViewController.inherit({
|
||||
initialize: function(options) {
|
||||
this.options = options;
|
||||
|
||||
this.root = this.options.root || '/';
|
||||
this.root = ('/' + this.root + '/').replace(rootStripper, '/');
|
||||
|
||||
this.handlers = [];
|
||||
|
||||
this._bindEvents();
|
||||
|
||||
this.location = window.location;
|
||||
this.history = window.history;
|
||||
},
|
||||
|
||||
when: function(route, callback) {
|
||||
var _this = this;
|
||||
|
||||
route = this._routeToRegExp(route);
|
||||
|
||||
this.handlers.unshift({
|
||||
route: route,
|
||||
callback: function(fragment) {
|
||||
var args = _this._extractParameters(route, fragment);
|
||||
callback && callback.apply(_this, args);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Convert a route string into a regular expression, suitable for matching
|
||||
// against the current location hash.
|
||||
_routeToRegExp: function(route) {
|
||||
route = route.replace(escapeRegExp, '\\$&')
|
||||
.replace(optionalParam, '(?:$1)?')
|
||||
.replace(namedParam, function(match, optional){
|
||||
return optional ? match : '([^\/]+)';
|
||||
})
|
||||
.replace(splatParam, '(.*?)');
|
||||
return new RegExp('^' + route + '$');
|
||||
},
|
||||
|
||||
// Given a route, and a URL fragment that it matches, return the array of
|
||||
// extracted decoded parameters. Empty or unmatched parameters will be
|
||||
// treated as `null` to normalize cross-browser behavior.
|
||||
_extractParameters: function(route, fragment) {
|
||||
var params = route.exec(fragment).slice(1);
|
||||
var extracted = [];
|
||||
for(var i = 0; i < params.length; i++) {
|
||||
if(param) {
|
||||
extracted.push(decodeURIComponent(param));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_bindEvents: function() {
|
||||
var _this = this;
|
||||
|
||||
window.addEventListener('popstate', function(event) {
|
||||
_this.checkUrl(event);
|
||||
});
|
||||
},
|
||||
checkUrl: function(e) {
|
||||
var current = this.getFragment();
|
||||
if (current === this.fragment) return false;
|
||||
this.loadUrl() || this.loadUrl(this.getHash());
|
||||
},
|
||||
getFragment: function(fragment, forcePushState) {
|
||||
if (fragment === null) {
|
||||
fragment = this.location.pathname;
|
||||
var root = this.root.replace(this.trailingSlash, '');
|
||||
if (!fragment.indexOf(root)) fragment = fragment.substr(root.length);
|
||||
}
|
||||
return fragment.replace(routeStripper, '');
|
||||
},
|
||||
getHash: function(window) {
|
||||
var match = (window || this).location.href.match(/#(.*)$/);
|
||||
return match ? match[1] : '';
|
||||
},
|
||||
|
||||
// Attempt to load the current URL fragment. If a route succeeds with a
|
||||
// match, returns `true`. If no defined routes matches the fragment,
|
||||
// returns `false`.
|
||||
loadUrl: function(fragmentOverride) {
|
||||
var fragment = this.fragment = this.getFragment(fragmentOverride);
|
||||
var matched = false;
|
||||
for(var i = 0; i < this.handlers.length; i++) {
|
||||
var h = this.handlers[i];
|
||||
if (h.route.test(fragment)) {
|
||||
h.callback(fragment);
|
||||
matched = true;
|
||||
}
|
||||
}
|
||||
return matched;
|
||||
},
|
||||
});
|
||||
})(window.ionic);
|
||||
412
js/ext/angular/src/directive/ionicNavRouter.js
vendored
412
js/ext/angular/src/directive/ionicNavRouter.js
vendored
@@ -1,412 +0,0 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* @description
|
||||
* The NavController is a navigation stack View Controller modelled off of
|
||||
* UINavigationController from Cocoa Touch. With the Nav Controller, you can
|
||||
* "push" new "pages" on to the navigation stack, and then pop them off to go
|
||||
* back. The NavController controls a navigation bar with a back button and title
|
||||
* which updates as the pages switch.
|
||||
*
|
||||
* The NavController makes sure to not recycle scopes of old pages
|
||||
* so that a pop will still show the same state that the user left.
|
||||
*
|
||||
* However, once a page is popped, its scope is destroyed and will have to be
|
||||
* recreated then next time it is pushed.
|
||||
*
|
||||
*/
|
||||
|
||||
var actualLocation = null;
|
||||
|
||||
angular.module('ionic.ui.navRouter', ['ionic.service.gesture'])
|
||||
|
||||
.run(['$rootScope', function($rootScope) {
|
||||
$rootScope.stackCursorPosition = 0;
|
||||
}])
|
||||
|
||||
.directive('navRouter', ['$rootScope', '$timeout', '$location', '$window', '$route', function($rootScope, $timeout, $location, $window, $route) {
|
||||
return {
|
||||
restrict: 'AC',
|
||||
// So you can require being under this
|
||||
controller: ['$scope', '$element', function($scope, $element) {
|
||||
this.navBar = {
|
||||
isVisible: false
|
||||
};
|
||||
$scope.navController = this;
|
||||
|
||||
this.goBack = function() {
|
||||
$scope.direction = 'back';
|
||||
};
|
||||
}],
|
||||
|
||||
link: function($scope, $element, $attr, ctrl) {
|
||||
if(!$element.length) return;
|
||||
|
||||
$scope.animation = $attr.animation;
|
||||
|
||||
$element[0].classList.add('noop-animation');
|
||||
|
||||
var isFirst = true;
|
||||
// Store whether we did an animation yet, to know if
|
||||
// we should let the first state animate
|
||||
var didAnimate = false;
|
||||
|
||||
var initTransition = function() {
|
||||
//$element.addClass($scope.animation);
|
||||
};
|
||||
|
||||
var reverseTransition = function() {
|
||||
$element[0].classList.remove('noop-animation');
|
||||
$element[0].classList.add($scope.animation);
|
||||
$element[0].classList.add('reverse');
|
||||
};
|
||||
|
||||
var forwardTransition = function() {
|
||||
$element[0].classList.remove('noop-animation');
|
||||
$element[0].classList.remove('reverse');
|
||||
$element[0].classList.add($scope.animation);
|
||||
};
|
||||
|
||||
$scope.$on('$routeChangeSuccess', function(e, a) {
|
||||
});
|
||||
$scope.$on('$routeChangeStart', function(e, next, current) {
|
||||
var back, historyState = $window.history.state;
|
||||
|
||||
back = $scope.direction == 'back' || (!!(historyState && historyState.position <= $rootScope.stackCursorPosition));
|
||||
|
||||
if(isFirst || (next && next.$$route && next.$$route.originalPath === "")) {
|
||||
// Don't animate
|
||||
isFirst = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if(didAnimate || $rootScope.stackCursorPosition > 0) {
|
||||
didAnimate = true;
|
||||
if(back) {
|
||||
reverseTransition();
|
||||
} else {
|
||||
forwardTransition();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$on('$locationChangeSuccess', function(a, b, c) {
|
||||
// Store the new location
|
||||
$rootScope.actualLocation = $location.path();
|
||||
if(isFirst && $location.path() !== '/') {
|
||||
isFirst = false;
|
||||
}
|
||||
});
|
||||
|
||||
$scope.$on('navRouter.goBack', function(e) {
|
||||
ctrl.goBack();
|
||||
});
|
||||
|
||||
|
||||
// Keep track of location changes and update a stack pointer that tracks whether we are
|
||||
// going forwards or back
|
||||
$scope.$watch(function () { return $location.path(); }, function (newLocation, oldLocation) {
|
||||
if($rootScope.actualLocation === newLocation) {
|
||||
if(oldLocation === '') {// || newLocation == '/') {
|
||||
// initial route, skip this
|
||||
return;
|
||||
}
|
||||
|
||||
var back, historyState = $window.history.state;
|
||||
|
||||
back = $scope.direction == 'back' || (!!(historyState && historyState.position <= $rootScope.stackCursorPosition));
|
||||
|
||||
if (back) {
|
||||
//back button
|
||||
$rootScope.stackCursorPosition--;
|
||||
} else {
|
||||
//forward button
|
||||
$rootScope.stackCursorPosition++;
|
||||
}
|
||||
|
||||
$scope.direction = 'forwards';
|
||||
|
||||
} else {
|
||||
var currentRouteBeforeChange = $route.current;
|
||||
|
||||
if (currentRouteBeforeChange) {
|
||||
|
||||
$window.history.replaceState({
|
||||
position: $rootScope.stackCursorPosition
|
||||
});
|
||||
|
||||
$rootScope.stackCursorPosition++;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
/**
|
||||
* Our Nav Bar directive which updates as the controller state changes.
|
||||
*/
|
||||
.directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
|
||||
|
||||
/**
|
||||
* Perform an animation between one tab bar state and the next.
|
||||
* Right now this just animates the titles.
|
||||
*/
|
||||
var animate = function($scope, $element, oldTitle, data, cb) {
|
||||
var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
|
||||
|
||||
var newTitle = data.title;
|
||||
if(!oldTitle || oldTitle === newTitle) {
|
||||
cb();
|
||||
return;
|
||||
}
|
||||
|
||||
// Clone the old title and add a new one so we can show two animating in and out
|
||||
// add ng-leave and ng-enter during creation to prevent flickering when they are swapped during animation
|
||||
title = angular.element(titles[0]);
|
||||
oTitle = $compile('<h1 class="title ng-leave" ng-bind="oldTitle"></h1>')($scope);
|
||||
title.replaceWith(oTitle);
|
||||
nTitle = $compile('<h1 class="title ng-enter" ng-bind="currentTitle"></h1>')($scope);
|
||||
|
||||
var insert = $element[0].firstElementChild || null;
|
||||
|
||||
// Insert the new title
|
||||
$animate.enter(nTitle, $element, insert && angular.element(insert), function() {
|
||||
cb();
|
||||
});
|
||||
|
||||
// Remove the old title
|
||||
$animate.leave(angular.element(oTitle), function() {
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^navRouter',
|
||||
replace: true,
|
||||
scope: {
|
||||
type: '@',
|
||||
backButtonType: '@',
|
||||
backButtonLabel: '@',
|
||||
backButtonIcon: '@',
|
||||
alignTitle: '@'
|
||||
},
|
||||
template: '<header class="bar bar-header nav-bar" ng-class="{invisible: !navController.navBar.isVisible}">' +
|
||||
'<div class="buttons"> ' +
|
||||
'<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonClass" ng-bind-html="backButtonLabel"></button>' +
|
||||
'<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" class="button no-animation {{button.type}}" ng-bind-html="button.content"></button>' +
|
||||
'</div>' +
|
||||
'<h1 class="title" ng-bind="currentTitle"></h1>' +
|
||||
'<div class="buttons" ng-if="rightButtons.length"> ' +
|
||||
'<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" class="button no-animation {{button.type}}" ng-bind-html="button.content"></button>' +
|
||||
'</div>' +
|
||||
'</header>',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
var backButton;
|
||||
|
||||
$element.addClass($attr.animation);
|
||||
|
||||
// Create the back button content and show/hide it based on scope settings
|
||||
$scope.enableBackButton = true;
|
||||
$scope.backButtonClass = $attr.backButtonType;
|
||||
if($attr.backButtonIcon) {
|
||||
$scope.backButtonClass += ' icon ' + $attr.backButtonIcon;
|
||||
}
|
||||
|
||||
// Listen for changes in the stack cursor position to indicate whether a back
|
||||
// button should be shown (this can still be disabled by the $scope.enableBackButton
|
||||
$rootScope.$watch('stackCursorPosition', function(value) {
|
||||
if(value > 0) {
|
||||
$scope.showBackButton = true;
|
||||
} else {
|
||||
$scope.showBackButton = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Store a reference to our nav controller
|
||||
$scope.navController = navCtrl;
|
||||
|
||||
// Initialize our header bar view which will handle resizing and aligning our title labels
|
||||
var hb = new ionic.views.HeaderBar({
|
||||
el: $element[0],
|
||||
alignTitle: $scope.alignTitle || 'center'
|
||||
});
|
||||
$scope.headerBarView = hb;
|
||||
|
||||
// Add the type of header bar class to this element
|
||||
$element.addClass($scope.type);
|
||||
|
||||
var updateHeaderData = function(data) {
|
||||
var oldTitle = $scope.currentTitle;
|
||||
$scope.oldTitle = oldTitle;
|
||||
|
||||
if(typeof data.title !== 'undefined') {
|
||||
$scope.currentTitle = data.title;
|
||||
}
|
||||
|
||||
$scope.leftButtons = data.leftButtons;
|
||||
$scope.rightButtons = data.rightButtons;
|
||||
|
||||
if(typeof data.hideBackButton !== 'undefined') {
|
||||
$scope.enableBackButton = data.hideBackButton !== true;
|
||||
}
|
||||
|
||||
if(data.animate !== false && typeof data.title !== 'undefined') {
|
||||
animate($scope, $element, oldTitle, data, function() {
|
||||
hb.align();
|
||||
});
|
||||
} else {
|
||||
hb.align();
|
||||
}
|
||||
};
|
||||
|
||||
$scope.$parent.$on('navRouter.showBackButton', function(e, data) {
|
||||
$scope.enableBackButton = true;
|
||||
});
|
||||
|
||||
$scope.$parent.$on('navRouter.hideBackButton', function(e, data) {
|
||||
$scope.enableBackButton = false;
|
||||
});
|
||||
|
||||
// Listen for changes on title change, and update the title
|
||||
$scope.$parent.$on('navRouter.pageChanged', function(e, data) {
|
||||
updateHeaderData(data);
|
||||
});
|
||||
|
||||
$scope.$parent.$on('navRouter.pageShown', function(e, data) {
|
||||
updateHeaderData(data);
|
||||
});
|
||||
|
||||
$scope.$parent.$on('navRouter.titleChanged', function(e, data) {
|
||||
var oldTitle = $scope.currentTitle;
|
||||
$scope.oldTitle = oldTitle;
|
||||
|
||||
if(typeof data.title !== 'undefined') {
|
||||
$scope.currentTitle = data.title;
|
||||
}
|
||||
|
||||
if(data.animate !== false && typeof data.title !== 'undefined') {
|
||||
animate($scope, $element, oldTitle, data, function() {
|
||||
hb.align();
|
||||
});
|
||||
} else {
|
||||
hb.align();
|
||||
}
|
||||
});
|
||||
|
||||
// If a nav page changes the left or right buttons, update our scope vars
|
||||
$scope.$parent.$on('navRouter.leftButtonsChanged', function(e, data) {
|
||||
$scope.leftButtons = data;
|
||||
});
|
||||
$scope.$parent.$on('navRouter.rightButtonsChanged', function(e, data) {
|
||||
$scope.rightButtons = data;
|
||||
});
|
||||
|
||||
/*
|
||||
$scope.$parent.$on('navigation.push', function() {
|
||||
backButton = angular.element($element[0].querySelector('.button'));
|
||||
backButton.addClass($scope.backButtonType);
|
||||
hb.align();
|
||||
});
|
||||
$scope.$parent.$on('navigation.pop', function() {
|
||||
hb.align();
|
||||
});
|
||||
*/
|
||||
|
||||
$scope.$on('$destroy', function() {
|
||||
//
|
||||
});
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('navPage', ['$parse', function($parse) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
require: '^navRouter',
|
||||
scope: {
|
||||
leftButtons: '=',
|
||||
rightButtons: '=',
|
||||
title: '=',
|
||||
icon: '@',
|
||||
iconOn: '@',
|
||||
iconOff: '@',
|
||||
type: '@',
|
||||
alignTitle: '@',
|
||||
hideBackButton: '@',
|
||||
hideNavBar: '@',
|
||||
animate: '@',
|
||||
},
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
$element.addClass('pane');
|
||||
|
||||
// Should we hide a back button when this tab is shown
|
||||
$scope.hideBackButton = $scope.$eval($scope.hideBackButton);
|
||||
|
||||
$scope.hideNavBar = $scope.$eval($scope.hideNavBar);
|
||||
|
||||
navCtrl.navBar.isVisible = !$scope.hideNavBar;
|
||||
|
||||
if($scope.hideBackButton === true) {
|
||||
$scope.$emit('navRouter.hideBackButton');
|
||||
} else {
|
||||
$scope.$emit('navRouter.showBackButton');
|
||||
}
|
||||
|
||||
// Whether we should animate on tab change, also impacts whether we
|
||||
// tell any parent nav controller to animate
|
||||
$scope.animate = $scope.$eval($scope.animate);
|
||||
|
||||
|
||||
// watch for changes in the left buttons
|
||||
$scope.$watch('leftButtons', function(value) {
|
||||
$scope.$emit('navRouter.leftButtonsChanged', $scope.leftButtons);
|
||||
});
|
||||
|
||||
$scope.$watch('rightButtons', function(val) {
|
||||
$scope.$emit('navRouter.rightButtonsChanged', $scope.rightButtons);
|
||||
});
|
||||
|
||||
/*
|
||||
$scope.$watch('hideBackButton', function(value) {
|
||||
if(value === true) {
|
||||
navCtrl.hideBackButton();
|
||||
} else {
|
||||
navCtrl.showBackButton();
|
||||
}
|
||||
});
|
||||
*/
|
||||
|
||||
// watch for changes in the title
|
||||
$scope.$watch('title', function(value) {
|
||||
$scope.$emit('navRouter.titleChanged', {
|
||||
title: value,
|
||||
animate: $scope.animate
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
.directive('navBack', ['$window', '$rootScope', 'Gesture', function($window, $rootScope, Gesture) {
|
||||
return {
|
||||
restrict: 'AC',
|
||||
link: function($scope, $element, $attr, navCtrl) {
|
||||
var goBack = function(e) {
|
||||
// Only trigger back if the stack is greater than zero
|
||||
if($rootScope.stackCursorPosition > 0) {
|
||||
$window.history.back();
|
||||
|
||||
// Fallback for bad history supporting devices
|
||||
$scope.$emit('navRouter.goBack');
|
||||
}
|
||||
e.alreadyHandled = true;
|
||||
return false;
|
||||
};
|
||||
$element.bind('click', goBack);
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
||||
})();
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user