Please help test: Angular 1.3, improved transitions, cached views, etc

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.

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
  • Slide Box:
  • 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.
  • $ionicSlideBoxDelegate#slide(): slide(newIndex[, speed]) has been renamed to `select(newIndex[, speed]); $ionicSlideBoxDelegate/ docs
  • $ionicSlideBoxDelegate#currentIndex(): currentIndex() has been renamed to selected(). $ionicSlideBoxDelegate/ docs
  • $ionicSlideBoxDelegate#slidesCount(): slidesCount() has been renamed to count().

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
  • $ionicSlideBoxDelegate#update(): has been removed. slideBox updates on its own now. $ionicSlideBoxDelegate/ docs
  • $ionicSlideBoxDelegate#stop(): has been removed. See autoPlay()
  • $ionicSlideBoxDelegate#start(): has been removed. See autoPlay()

What’s next!

  • 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.
22 Likes

Yay! I’ll gladly be testing soon. :smile:

On it now!!! Glad I don’t have to use my monkey patched version on Ionic and angular 1.3* anymore!!!

Great to see this out, can’t wait to test it on Android

Annoyingly though the same bug with ion-slide-box and ng-repeat is still there from the nightlys so I can’t test this on my app. Why does the $slideIndex start at 1 yet the ng-repeat index starts at 0. So trying to select an activeSlide from a list of items causes issues. It was working fine in nightly-627.

Check http://plnkr.co/edit/7p0UgIdKNyK9Cb99DyQc?p=preview

4 slides

$scope.activeSlide = 0; selects slide 1
$scope.activeSlide = 1; selects slide 1
$scope.activeSlide = 2; selects slide 2
$scope.activeSlide = 3; selects slide 3
$scope.activeSlide = 4; selects slide 1

@adam Is there another breaking change in $ionicSlideBoxDelegate? there doesn’t seem to be an update() method on it anymore

1 Like

I can’t seem to get any view to load at all :frowning:

@Hendrixer can you provide a codpen of the issue?

@olliekav The nightly build includes all of the slide box fixes which @andy has been working on. Is there an issue created related to this that I can check up on?

@adam, I’m trying to integrate the nightly with my existing project, so the code pen would be crazy. basically, the navs or views arent loading. WhenI look in the elemets panel, I see the cached tree along with the active tree. However, the active tree shows the navbar with now title or buttons and completely ignores any other ion-nav-view or ion-view. The templates are fetched and controllers loaded. I’m fine with debugging, but any idea where to start?

@Hendrixer did you update box JS and CSS? Is the app’s structure tabs, side menu mixed, or neither? Can you click one of the ion-view elements that should be showing and see what’s causing it, or one of its parents, to have a display:none, opacity:0, or translate3d that’s off screen? Can you see the nav bar at all? Any JS errors or template 404s?

@Hendrixer i am facing the same. I am updating my whole application with this new version. But it doesnt seem to work. Let me know if you find anything. @adam i dont see any of the content now. Its just blank.

@vir474 Can you provide any details about your app so I can help debug this for you?

@adam Hello, My app have a side menu with baseview as the main content and sideview as the menu content.
Now i am loading the states dynamically from the server and the views too. i use templatecache to store the views and then $state.go to display the views.

@adam I updated to both nightly css and js, but no errors at all and I don’t have a tab or side nav app. Don’t think it’s the css because the views aren’t rendered in the DOM at all. I’ll try to find some more clues for us.

Things to check:

  • Did you update both JS and CSS
  • Is the expected content somewhere in the DOM? If so, what classes and attributes does it have?
  • If the content is in the DOM, what parent element is hiding it, and how?
  • Does it work without using $templateCache?

To help me debug, a simple codepen would drastically help. I don’t need your whole app, but if you’re able to recreate the issue with simple markup that that’ll help me narrow down the issue. Also, most of our codepen’s have been updated to point to the nightly builds. You could fork one of those to help recreate the issue too.

I’d been chatting to him in the previous thread about the slide box changes but I had not heard anything back. I can create a github issue?

@olliekav Yes, and the more information the better, thanks: http://ionicframework.com/submit-issue/

OK for now

  • I made sure JS and CSS both are there.
  • I dont have the content on DOM anywhere.

TO make sure the templatecache is working i used templatecache.get() and saw that the content is there in the template.

The state is also loaded but the DOM is not populated with the template associated with the state.

Further, i am using ionicLoading while the app is fetching data from server. The app fetches the data but i didnt see any ionicLoading.

I will keep testing and let you know of any other information

Ok done, thanks. Client wants to release this week so hopefully I can resolve.