Files
ionic-framework/test/html/viewState.html
Adam Bradley 39951ca99a refactor(): navigation improvements, Angular 1.3
#### Refactor:

* **Navigation:** Refactored navigation for improved performance,
reduce DOM manipulations, increase transition FPS, cached views,
smoother transitions, platform specific transitions with added
configurable controls for transition animation and direction.
* **Cached Views:** Previously as a user navigated an app, each leaving
view’s element and scope would be destroyed. If the same view was
accessed again then the app would have to recreate the element. Views
can now be cached to improve performance. When a view is navigated away
from, its element is left in the DOM, and its scope is disconnected
from the cycle. When navigating to a view which is already cached, its
scope is reconnected, and the existing element which was left in the
DOM becomes the active view. This also allows for scroll position of
previous views to be maintained (without skippy jumps). Config
variables can be used to disable view caching (set to 0), or change the
maximum number of views to cache.
* **Angular v1.3:** Upgraded Ionic’s to work with Angular v1.3. In
general Ionic just works with the upgrade, but the required change was
that animations in v1.3 uses promise, whereas in v1.2 animations used
callbacks.

#### Features:

* **Platform Specific Transitions:** Transitions between views now
default to the transition style appropriate for each platform. For
example, iOS will move forward by transitioning the entering view from
right to center, and the leaving view from center to left. However,
Android will transition with the entering view going from bottom to
center, covering the previous view, which remains stationary. Platform
transitions are automatically applied by default, but config variables
and custom CSS allows these defaults to be easily overridden.
* **Override Transition Type and Direction:** As a user navigates the
app, Ionic automatically applies the appropriate transition type for
the platform, and the direction the user is navigating. However, both
can be overridden in numerous ways: config variable, view attribute,
stateProvider property, or attribute on the button/link that initiated
the transition.
* **enable-menu-with-back-views:** The `enable-menu-with-back-views`
attribute determines if the side menu is enabled when the back button
is showing. When set to `false`, any buttons/links with the
`menuToggle` directive will be hidden, and the user cannot swipe to
open the menu. When going back to the root page of the side menu (the
page without a back button visible), then any menuToggle buttons will
show again, and menus will be enabled again.
* **menuClose:** Closes a side menu which is currently opened.
Additionally, the menuClose directive will now cause transitions to not
animate between views while the menu is being closed.
* **ionNavBackButton:** The back button icon and text will
automatically update to platform config defaults, such as adjusting to
the platform back icon. To take advantage of this, the
`ionNavBackButton` directive now should be empty, such as
`<ion-nav-back-button></ion-nav-back-button>`. The back button can
still be fully customized like it could before, but without any inner
content it knows to style using platform configs.
* **navBar button primary/secondary sides:** Primary and secondary
sides are now the recommended values for the `side` attribute, such as
`<ion-nav-buttons side="primary">`. Primary buttons generally map to
the left side of the header, and secondary buttons are generally on the
right side. However, their exact locations are platform specific. For
example, in iOS the primary buttons are on the far left of the header,
and secondary buttons are on the far right, with the header title
centered between them. For Android however, both groups of buttons are
on the far right of the header, with the header title aligned left.
Recommendation is to always use `primary` and `secondary` so buttons
correctly map to the side familiar to users of a platform. However, in
cases where buttons should always be on an exact side, both `left` and
`right` sides are still available.
* **navDirection:** An attribute directive that sets the direction
which the nav view transition should animate.
* **navTransition:** An attribute directive that sets the transition
type which the nav view transition should use when it animates. Using
`none` will disable an animation.

#### Breaking Changes:

* **Animation CSS:** The CSS for view transitions have changed. This is
a breaking change only if Ionic apps had customized Ionic’s animation
CSS.
* **$ionicPlatformDefaults:** Platform config variables are no longer
in the $ionicPlatformDefaults constant, but within `$ionicConfig`.
* **$ionicViewService:** In the navigation refactoring,
$ionicViewService was split up into two factories, `$ionicViewSwitcher`
and `$ionicHistory`. The `$ionicHistory` is largely what
`$ionicViewService`, but between the two factories there is a better
separation of concerns for improved testing.
* **navClear:** The navClear directive was created to do what the new
side menu `enable-menu-with-back-views` attribute accomplishes.
Additionally, the new `navTransition` and `navDirection` directives are
more useful and granular than the navClear directive.
* **scrollView.rememberScrollPosition:** This method has been removed
since it is no longer needed with cached views.

#### Deprecated:

* **ionView.title:** The `ionView` directive used the `title`
attribute, but this can cause the tooltip to show up on desktop
browsers. The `title` attribute will still work for backwards
compatibility, but we now recommend using `view-title`, such as
`<ion-view view-title=”My Title”>`.
* **ionNavView animation attribute removed:** The animation attribute
is no longer used for nav views. Instead use `$ionicConfig`.
* **ionNavBar animation attribute removed:** The animation attribute is
no longer used for nav bars. Instead use `$ionicConfig`.
2014-11-11 14:43:10 -06:00

454 lines
18 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html ng-app="navState">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>navViews and ion-tabs w/ nested navViews</title>
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.bundle.js"></script>
</head>
<body ng-controller="AppCtrl">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon icon ion-arrow-left-c">
Back
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<script id="sign-in.html" type="text/ng-template">
<ion-view title="Sign-In">
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button
class="button button-icon icon ion-close-circled"
ng-click="requestClearNotifications()">
</button>
<button
class="button button-icon icon ion-alert-circled"
ng-show="$root.showButton">
</button>
</ion-nav-buttons>
<ion-content>
<ion-toggle ng-model="$root.showButton"></ion-toggle>
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
<div class="padding">
<button class="button button-block button-positive" ng-click="signIn(user)">
Sign-In
</button>
<form ng-submit="something()">
<input type="text">
<button type="submit"></button>
</form>
<p class="text-center">
<a href="#/sign-in">Sign-In</a> -
<a href="#/forgot-password">Forgot password</a> -
<a ui-sref="contact">Contact</a>
</p>
<p>
Current View: {{ $viewHistory.currentView }}<br>
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</div>
</ion-content>
</ion-view>
</script>
<script id="forgot-password.html" type="text/ng-template">
<ion-view title="Forgot Password" hide-nav-bar="true">
<ion-content padding="true">
<p>This ion-view hides the nav bar using the hideNavBar attribute.</p>
<p>
<button ng-click="hideNavBar()">Hide Nav Bar</button>
<button ng-click="showNavBar()">Show Nav Bar</button>
</p>
<p>
<button ng-click="clearViewHistory()">Clear View History</button>
</p>
<p class="text-center">
<a href="#/sign-in">Sign-In</a> -
<a href="#/forgot-password">Forgot password</a> -
<a href="#/contact">Contact</a>
</p>
<p>
Current View: {{ $viewHistory.currentView }}<br>
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</ion-content>
</ion-view>
</script>
<script id="contact.html" type="text/ng-template">
<ion-view hide-back-button="true">
<ion-content padding="true">
<p>The views title is blank on purpose.</p>
<p>The hideBackButton attribute is "true" for this view.</p>
<p>@drifty</p>
<p class="text-center">
<a href="#/sign-in">Sign-In</a> -
<a href="#/forgot-password">Forgot password</a> -
<a href="#/contact">Contact</a>
</p>
<p>
Current View: {{ $viewHistory.currentView }}<br>
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</ion-content>
</ion-view>
</script>
<script id="tabs.html" type="text/ng-template">
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Automobiles" icon="ion-model-s" href="#/tabs/autos">
<ion-nav-view name="auto-nav-view"></ion-nav-view>
</ion-tab>
<ion-tab title="Add" icon="ion-plus-circled" href="#/tabs/add-auto">
<ion-nav-view name="add-autos-nav-view"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios7-world" ui-sref="tabs.about">
<ion-nav-view name="about-nav-view"></ion-nav-view>
</ion-tab>
<ion-tab title="Info" icon="ion-information-circled">
<ion-view title="Information">
<ion-content padding="true">
<h3>Information</h3>
<p>
This is a sample seed project for the Ionic Framework. Please change it to match your needs.
</p>
<p>
Current View: {{ $viewHistory.currentView }}<br>
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</ion-content>
</ion-view>
</ion-tab>
<ion-tab title="Sign-Out" icon="ion-log-out" href="#/sign-in">
</ion-tab>
</ion-tabs>
</script>
<script id="auto-list.html" type="text/ng-template">
<ion-view title="Auto List">
<ion-nav-buttons side="left">
<button class="button button-icon icon ion-home" ng-click="foo()">
What?
</button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-navicon" ng-click="foo()">
</button>
</ion-nav-buttons>
<ion-header-bar class="bar bar-subheader bar-energized">
<h1 class="title">some subheader</h1>
</ion-header-bar>
<ion-content padding="true">
<ion-list>
<ion-item ng-repeat="auto in autos"
ng-href="#/tabs/autos/{{ $index }}" >
{{ auto.year }} {{ auto.make }} {{ auto.model }}
</ion-item>
</ion-list>
<p>
<button ng-click="testStateGo()">Test State Go</button>
</p>
<p>
Current View: {{ $viewHistory.currentView }}<br>
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</ion-content>
</ion-view>
</script>
<script id="auto-detail.html" type="text/ng-template">
<ion-view title="Auto Details">
<ion-nav-buttons side="right">
<button class="button button-icon icon ion-home" ng-click="foo()">
Home
</button>
</ion-nav-buttons>
<ion-content padding="true">
<h2>{{ auto.year }} {{ auto.make }} {{ auto.model }}</h2>
<ul>
<li>
<a ng-href="#/tabs/autos/0" class="ng-binding" href="#/tabs/autos/0">1936 Cord 810</a>
</li><li>
<a ng-href="#/tabs/autos/1" class="ng-binding" href="#/tabs/autos/1">1981 DeLorean DMC-12</a>
</li><li>
<a ng-href="#/tabs/autos/2" class="ng-binding" href="#/tabs/autos/2">1933 Duesenberg Model SJ</a>
</li><li>
<a ng-href="#/tabs/autos/3" class="ng-binding" href="#/tabs/autos/3">1951 Hudson Hornet</a>
</li><li>
<a ng-href="#/tabs/autos/4" class="ng-binding" href="#/tabs/autos/4">1965 Shelby Cobra</a>
</li><li>
<a ng-href="#/tabs/autos/5" class="ng-binding" href="#/tabs/autos/5">2008 Tesla Roadster</a>
</li><li>
<a ng-href="#/tabs/autos/6" class="ng-binding" href="#/tabs/autos/6">1948 Tucker 48</a>
</li>
</ul>
<p><a class="button button-small" href="#/tabs/autos">Auto List</a></p>
<p ng-bind="auto.desc"></p>
<p>
Current View: {{ $viewHistory.currentView }}<br>
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
<p>
<button ng-click="hideBackButton()">Hide Back Button</button>
<button ng-click="showBackButton()">Show Back Button</button>
</p>
</ion-content>
</ion-view>
</script>
<script id="add-auto.html" type="text/ng-template">
<ion-view title="Add Auto">
<ion-content padding="true">
<div class="list">
<label class="item item-input">
<input type="text" placeholder="Make">
</label>
<label class="item item-input">
<input type="text" placeholder="Model">
</label>
<label class="item item-input">
<input type="text" placeholder="Year">
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
<label class="item item-input">
<textarea placeholder="Description"></textarea>
</label>
</div>
<div class="padding">
<p>
Current View: {{ $viewHistory.currentView }}<br>
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</div>
</ion-content>
</ion-view>
</script>
<script id="about.html" type="text/ng-template">
<ion-view title="About">
<ion-content padding="true">
<h3>About this app!</h3>
<p>
Current View: {{ $viewHistory.currentView }}<br>
Back View: {{ $viewHistory.backView }}<br>
Forward View: {{ $viewHistory.forwardView }}
</p>
</ion-content>
</ion-view>
</script>
<script>
angular.module('navState', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('signin', {
url: "/sign-in",
templateUrl: "sign-in.html",
controller: 'SignInCtrl'
})
.state('forgotpassword', {
url: "/forgot-password",
templateUrl: "forgot-password.html",
controller: 'ForgotPasswordCtrl'
})
.state('contact', {
url: "/contact",
templateUrl: "contact.html"
})
.state('tabs', {
url: "/tabs",
abstract: true,
templateUrl: "tabs.html"
})
.state('tabs.autolist', {
url: "/autos",
views: {
'auto-nav-view': {
templateUrl: "auto-list.html",
controller: 'AutoListCtrl'
}
}
})
.state('tabs.addauto', {
url: "/add-auto",
views: {
'add-autos-nav-view': {
templateUrl: "add-auto.html",
controller: 'AutoAddCtrl'
}
}
})
.state('tabs.autodetail', {
url: "/autos/:id",
views: {
'auto-nav-view': {
templateUrl: "auto-detail.html",
controller: 'AutoDetailCtrl'
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-nav-view': {
templateUrl: "about.html"
}
}
});
$urlRouterProvider.otherwise("/sign-in");
})
.controller('SignInCtrl', function($scope, $state) {
$scope.foo = function() {
alert('foo');
};
$scope.something = function() {
alert('something');
};
$scope.signIn = function(user) {
$state.go('tabs.autolist');
};
})
.controller('ForgotPasswordCtrl', function($ionicHistory, $rootScope, $scope, $state, $ionicNavBarDelegate) {
$scope.clearViewHistory = function() {
$ionicHistory.clearHistory();
};
$scope.hideNavBar = function() {
$ionicNavBarDelegate.showBar(false);
};
$scope.showNavBar = function() {
$ionicNavBarDelegate.showBar(true);
};
})
.controller('AutoListCtrl', function($scope, $state) {
$scope.autoListData = "AutoListCtrl Data";
$scope.testStateGo = function() {
var toParams = { id: 4 };
$state.go('tabs.autodetail', toParams);
};
})
.controller('AutoDetailCtrl', function($scope, $state, $stateParams, $ionicNavBarDelegate) {
$scope.autoDetailData = "AutoDetailCtrl Data";
$scope.hideBackButton = function() {
$ionicNavBarDelegate.showBackButton(false);
};
$scope.showBackButton = function() {
$ionicNavBarDelegate.showBackButton(true);
};
$scope.auto = $scope.autos[$stateParams.id];
})
.controller('AutoAddCtrl', function($scope) {
$scope.newAutoData = "AutoAddCtrl Data";
})
.controller('AppCtrl', function($scope, $state) {
$scope.autos = [
{ make: 'Cord', model: '810', year: '1936', desc: 'Styled by Gordon M. Buehrig, it featured front-wheel drive and independent front suspension;[ the front drive enabled the 810 to be so low, runningboards were unnecessary. Powered by a 4,739 cc (289 cu in) Lycoming V8 of the same 125 hp (93 kW) as the L-29, The 810 had a four-speed electrically-selected semi-automatic transmission, among other innovative features.', url: 'http://en.wikipedia.org/wiki/Cord_810/812' },
{ make: 'DeLorean', model: 'DMC-12', year: '1981', desc: 'The DeLorean DMC-12 is a sports car manufactured by John DeLorean\'s DeLorean Motor Company for the American market in 198182. Featuring gull-wing doors with a fiberglass "underbody", to which non-structural brushed stainless steel panels are affixed, the car became iconic for its appearance as a modified time machine in the Back to the Future film trilogy.', url: 'http://en.wikipedia.org/wiki/DeLorean_DMC-12' },
{ make: 'Duesenberg', model: 'Model SJ', year: '1933', desc: 'The rare supercharged Model J version, with 320 hp (239 kW) was also created by Fred Duesenberg and introduced in May 1932, only 36 units were built. Special-bodied models, such as the later "Mormon Meteor" chassis, achieved an average speed of over 135 mph (217 km/h)[17] and a one-hour average of over 152 mph (245 km/h) at Bonneville Salt Flats, Utah.', url: 'http://en.wikipedia.org/wiki/Duesenberg_Model_J' },
{ make: 'Hudson', model: 'Hornet', year: '1951', desc: 'The Hornet, introduced for the 1951 model year, was based on Hudson\'s "step-down" design that was first seen in the 1948 model year on the Commodore. The design merged body and chassis frame into a single structure, with the floor pan recessed between the car\'s chassis rails instead of sitting on top of them. Thus one "stepped down" into a Hudson. The step-down chassis\'s "lower center of gravity...was both functional and stylish. The car not only handled well, but treated its six passengers to a sumptuous ride. The low-slung look also had a sleekness about it that was accentuated by the nearly enclosed rear wheels.', url: 'http://en.wikipedia.org/wiki/Hudson_Hornet' },
{ make: 'Shelby', model: 'Cobra', year: '1965', desc: 'Shelby wanted the AC Cobras to be "Corvette-Beaters" and at nearly 500 lb (227 kg) less than the Chevrolet Corvette, the lightweight roadster accomplished that goal at Riverside International Raceway on 2 February 1963. Driver Dave MacDonald piloted CSX2026 past a field of Corvettes, Jaguars, Porsches, and Maseratis and recorded the Cobra\'s historic first-ever victory.', url: 'http://en.wikipedia.org/wiki/Shelby_Cobra' },
{ make: 'Tesla', model: 'Roadster', year: '2008', desc: 'Tesla Motors\' first production vehicle, the Tesla Roadster, was an all-electric sports car. The Roadster was the first highway-capable all-electric vehicle in serial production for sale in the United States in the modern era. The Roadster was also the first production automobile to use lithium-ion battery cells and the first production BEV (all-electric) to travel more than 200 miles (320 km) per charge.', url: 'http://en.wikipedia.org/wiki/Tesla_Roadster' },
{ make: 'Tucker', model: '48', year: '1948', desc: 'The Tucker 48 (named after its model year) was an advanced automobile conceived by Preston Tucker and briefly produced in Chicago in 1948. Only 51 cars were made before the company folded on March 3, 1949, due to negative publicity initiated by the news media, a Securities and Exchange Commission investigation and a heavily publicized stock fraud trial (in which allegations were proven baseless in court with a full acquittal). Speculation exists that the Big Three automakers and Michigan senator Homer S. Ferguson also had a role in the Tucker Corporation\'s demise.', url: 'http://en.wikipedia.org/wiki/Tucker_Torpedo' },
];
});
</script>
</body>
</html>