We’ve added some major upgrades in this last beta with an improved navigation and transition system, and Angular v1.3.
There are several breaking changes in this release, but we believe they’re necessary for Ionic to be a 1.0 worthy framework. In most cases, it should significantly improve performance and reduce/prevent memory leaks. Please read through this carefully to see how it may affect your app.
(the original post has gotten too large and unmanageable, and a majority of the content is no longer relevant, so we we’re reposting it to clean things up)
- Previously, as a user navigated an app, each exiting 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.
- Now, when a view is exited, its elements are 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, IE set to 0, or change the maximum number of views to cache.
- Individual ionViews can disable caching by using the
cache-view="false"attribute, or from its
- Note: Views with many large images or videos should not be cached.
- The ionNavView docs have more further documentation.
Navigation: Refactored for improved performance
- Reduced DOM manipulations
- Cached Views (see above)
- Increased transition FPS for smoother animation
- Angular v1.3:
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 exiting view from center to left. However, Android will transition with the exiting 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.
- ionNavTitle: Use the nav title directive to set custom HTML the for the header bar’s title from within an ionView template. This gives each view the ability to specify its own custom title, such as an image or any HTML, rather than being text-only.
enable-menu-with-back-views: In many mobile apps, sidemenus are disabled on child views. The
enable-menu-with-back-viewsattribute determines if the side menu is enabled when the back button is showing.
- When set to
false, any buttons/links with the
menuToggledirective 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), menuToggle buttons will show again, and menus will be re-enabled.
- ionSideMenus docs
- When set to
- 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
ionNavBackButtondirective should now be empty, IE
- The back button can still be fully customized like it could before, but without any inner content it knows to style using platform configs.
- ionNavBackButton docs
- To take advantage of this, the
navBar button primary/secondary sides: Primary and secondary sides are now the recommended values for the
sideattribute, such as
- 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
secondaryso buttons correctly map to the side familiar to users of a platform.
- In cases where buttons should always be on an exact side, both
rightsides are still available.
- ionNavButtons docs
$ionicView Events: Now that views can be cached, controllers may only load once, which may change how you’d expect data to load.
New events have been added that get emitted from the view’s scope:
- These events also contain data about the view, such as the title and if the back button should show, along with transition data, such as the transition type and direction that was used.
- ionView docs
- New events have been added that get emitted from the view’s scope:
- 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. Both can be overridden in numerous ways: config variable, view attribute, stateProvider property, or attribute on the button/link that initiated the transition.
- 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
nonewill disable an animation.
$ionicConfigProvider: Configs can be changed using the
$ionicConfigProviderduring the configuration phase of your app.
$ionicConfigcan also set and get config values during the run phase and within the app itself.
- Animation CSS: The CSS for view transitions have changed. This is a breaking change only if Ionic apps had customized Ionic’s animation CSS. Additionally, all keyframe animations were removed since they weren’t being used. (20Kb saved!)
$ionicPlatformDefaults: Platform config variables are no longer in the $ionicPlatformDefaults constant, but within
navClear: The navClear directive was created to do what the new side menu
enable-menu-with-back-viewsattribute accomplishes and has therefore been removed. Additionally, the new
navDirectiondirectives are more useful and granular.
- scrollView.rememberScrollPosition: This method has been removed since it is no longer needed with cached views.
ionViewdirective used the
titleattribute, but this can cause the tooltip to show up on desktop browsers. The
titleattribute will still work for backwards compatibility, but we now recommend using
view-title, such as
<ion-view view-title=”My Title”>.
ionNavView animation attribute: The animation attribute can be safely removed as it is no longer used for nav views. Instead use
ionNavBar animation attribute: The animation attribute can be safely removed as it is no longer used for nav bars. Instead use
$ionicNavBarDelegate#changeTitle: To set a title you now use
title(value)(with an argument). The
changeTitle()method will now produce a console.warning message, but it can still be used for this version.
$ionicNavBarDelegate#setTitle: To set a title you now use
title(value)(with an argument). The
setTitle()method will now produce a console.warning message, but it can still be used for this version.
$ionicNavBarDelegate#getTitle: To get a title you now use the return value of
title()(no argument). The
getTitle()method will now produce a console.warning message, but it can still be used for this version.
back()method has been removed in favor of using
$ionicGoBack()is added to the rootScope. $ionicHistory docs
getPreviousTitle()method has been removed in favor of
$ionicHistory.backTitle(). $ionicHistory docs
$ionicViewService: In the navigation refactoring, $ionicViewService was split up into two factories,
$ionicHistoryis largely what
$ionicViewServicewas, but now between the two there is a better separation of concerns for improved testing. $ionicHistory docs
Note: Past nightly versions had a refactored slidebox, however, we decided to pull it out for this release
- Now that view elements are cached in the DOM, we’ll be adding the “swipe to go back” feature.
- Since Android provides the necessary scroll events, we’ll be refactoring our scrolling so we can remove JS scrolling on Android devices.
- This is the last beta!! Once the swipe to go back and removal of JS scrolling on Android updates are added we’re going to call Ionic v1.0 feature complete, and roll out the release candidate.
- With the new navigation and transition system we’ve got a lot more power for animations. In the near future we’ll be creating an animations pack that can easily extend Ionic’s animations.