v1.0.0-beta.14 "magnesium-mongoose" released!

1

Download Instructions: https://github.com/driftyco/ionic#quick-start

1.0.0-beta.14 “magnesium-mongoose” (2014-12-15)

Refactor:

  • Cached Views:
    • 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 $stateProvider.state config.
    • 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:
    • Upgraded Ionic 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 promises, whereas in v1.2 animations used callbacks.
    • Check out the Angular 1.3 ng-europe presentation and Migrating from 1.2 to 1.3 for more information.

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 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-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), menuToggle buttons will show again, and menus will be re-enabled.
    • ionSideMenus docs
  • 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 should now be empty, IE <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.
    • ionNavBackButton docs
  • 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.
    • In cases where buttons should always be on an exact side, both left and right sides 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: $ionicView.enter, $ionicView.leave, $ionicView.loaded.
    • 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
  • 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 none will disable an animation.
  • $ionicConfigProvider: Configs can be changed using the $ionicConfigProvider during the configuration phase of your app. $ionicConfig can also set and get config values during the run phase and within the app itself.

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. 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 $ionicConfigProvider.
  • navClear: The navClear directive was created to do what the new side menu enable-menu-with-back-views attribute accomplishes and has therefore been removed. Additionally, the new navTransition and navDirection directives are more useful and granular.
  • 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: The animation attribute can be safely removed as it is no longer used for nav views. Instead use $ionicConfig.
  • ionNavBar animation attribute: The animation attribute can be safely removed as it is no longer used for nav bars. Instead use $ionicConfig.
  • $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.
  • $ionicNavBarDelegate#back: The back() method has been removed in favor of using $ionicHistory.goBack(). Additionally, $ionicGoBack() is added to the rootScope. $ionicHistory docs
  • $ionicNavBarDelegate#getPreviousTitle: The getPreviousTitle() method has been removed in favor of $ionicHistory.backTitle(). $ionicHistory docs
  • $ionicViewService: In the navigation refactoring, $ionicViewService was split up into two factories, $ionicViewSwitcher and $ionicHistory. The $ionicHistory is largely what $ionicViewService was, but now between the two there is a better separation of concerns for improved testing. $ionicHistory docs
22 Likes