# Please help test: Angular 1.3, improved transitions, cached views (repost) **URL:** \ **Category:** ionic-v1\ **Created:** [December 3, 2014, 7:39pm UTC](https://forum.ionicframework.com/t/please-help-test-angular-1-3-improved-transitions-cached-views-repost/13561 "2014-12-03T19:39:22Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [December 3, 2014, 7:39pm UTC](https://forum.ionicframework.com/t/please-help-test-angular-1-3-improved-transitions-cached-views-repost/13561/1 "2014-12-03T19:39:23Z")
We’ve added some major upgrades in this last beta with an improved navigation and transition system, and [Angular v1.3](http://angularjs.blogspot.com/2014/10/angularjs-130-superluminal-nudge.html). 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. To help test, you can hook your app to the nightly builds: [http://code.ionicframework.com/#nightly](http://code.ionicframework.com/#nightly) or with [bower](https://github.com/driftyco/ionic#manual-start). * * * _(the [original post](http://forum.ionicframework.com/t/please-help-test-angular-1-3-improved-transitions-cached-views-etc/12528) 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)_ #### 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](http://ionicframework.com/docs/nightly/api/provider/%24ionicConfigProvider/) can be used to disable view caching, _ **IE** set to 0_, or change the maximum number of views to cache. - Individual [ionViews](http://ionicframework.com/docs/nightly/api/directive/ionView/) 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](http://ionicframework.com/docs/nightly/api/directive/ionNavView/) 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](https://www.youtube.com/watch?v=ojMy6m_fcxc) and [Migrating from 1.2 to 1.3](https://docs.angularjs.org/guide/migration) 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](http://ionicframework.com/docs/nightly/api/provider/%24ionicConfigProvider/) 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. - [ionNavTitle docs](http://ionicframework.com/docs/nightly/api/directive/ionNavTitle/) - **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](http://ionicframework.com/docs/nightly/api/directive/ionSideMenus/) - **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. - [menuClose docs](http://ionicframework.com/docs/nightly/api/directive/menuClose/) - **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** _ ``. - 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](http://ionicframework.com/docs/nightly/api/directive/ionNavBackButton/) - **navBar button primary/secondary sides:** Primary and secondary sides are now the recommended values for the `side` attribute, 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 `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](http://ionicframework.com/docs/nightly/api/directive/ionNavButtons/) - **$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](http://ionicframework.com/docs/nightly/api/directive/ionView/) - **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. - [navDirection docs](http://ionicframework.com/docs/nightly/api/directive/navDirection/) - **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. - [navTransition docs](http://ionicframework.com/docs/nightly/api/directive/navTransition/) - **$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. - [$ionicConfigProvider docs](http://ionicframework.com/docs/nightly/api/provider/%24ionicConfigProvider/) #### 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`](http://ionicframework.com/docs/nightly/api/provider/%24ionicConfigProvider/). - **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 ``. - **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](http://ionicframework.com/docs/nightly/api/service/%24ionicHistory/) - **$ionicNavBarDelegate#getPreviousTitle:** The `getPreviousTitle()` method has been removed in favor of `$ionicHistory.backTitle()`. [$ionicHistory docs](http://ionicframework.com/docs/nightly/api/service/%24ionicHistory/) - **$ionicViewService:** In the navigation refactoring, $ionicViewService was split up into two factories, `$ionicViewSwitcher` and [`$ionicHistory`](http://ionicframework.com/docs/nightly/api/service/%24ionicHistory/). The `$ionicHistory` is largely what `$ionicViewService` was, but now between the two there is a better separation of concerns for improved testing. [$ionicHistory docs](http://ionicframework.com/docs/nightly/api/service/%24ionicHistory/) _Note: Past nightly versions had a refactored slidebox, however, we decided to pull it out for this release_ ## 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. ---
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [December 3, 2014, 7:39pm UTC](https://forum.ionicframework.com/t/please-help-test-angular-1-3-improved-transitions-cached-views-repost/13561/2 "2014-12-03T19:39:31Z")
Pinned globally on December 3, 2014, 7:39pm UTC ---
**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\ **Post date:** [December 3, 2014, 8:17pm UTC](https://forum.ionicframework.com/t/please-help-test-angular-1-3-improved-transitions-cached-views-repost/13561/3 "2014-12-03T20:17:19Z")
Hope you don’t mind, but I’m going to repost this from the old one. Anyone else seen infinite digest issues when using $stateChangeStart to check authentication status? Did not see this problem in Beta 13. I’ve got it now in 800 and 805 & 840. Not sure if it existed prior to that on the new nightlies. I’ve tried to make a demo but can’t reproduce the problem that my app has. UPDATE : I have a working sample. [http://codepen.io/calendee/pen/zxGRza5](http://codepen.io/calendee/pen/zxGRza5) UPDATE : Opened issue : [https://github.com/driftyco/ionic/issues/2638](https://github.com/driftyco/ionic/issues/2638) To reproduce this, you must use Ionic CLI to create a local app. The problem will NOT be demonstrated in Codepen(not sure why). So, do the following : **UPDATE** : Corrected link to codepen sample - ionic start digestProblem [http://codepen.io/calendee/pen/zxGRza](http://codepen.io/calendee/pen/zxGRza) - cd digestProblem - ionic serve 9000 9001 (or whatever your preference) - Note that the app works just fine. You were heading towards /tab/home and got redirected to /signin because the auth check always returns false. - Now, replace the Beta 13 files in www/lib/ionic with nightlies - Open the console in your browser. You’ll still be on the signin page - Reload the browser at [http://localhost:9000](http://localhost:9000) - Notice that the app is repeatedly trying to access /tab/home even though you are redirecting to signin. - Finally, angular kills the digests and you end up in the signin state - Notice that even if you comment out the $state.go(“signin”);, the app is still constantly trying to reload /tab/home ---
**Author:** ![brandyshea](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/brandyshea/32/148286_2.png) [@brandyshea](https://forum.ionicframework.com/u/brandyshea)\ **Post date:** [December 3, 2014, 8:24pm UTC](https://forum.ionicframework.com/t/please-help-test-angular-1-3-improved-transitions-cached-views-repost/13561/4 "2014-12-03T20:24:52Z")
Hi again @adam! I think the fix for the menuClose directive ([in response](http://forum.ionicframework.com/t/please-help-test-angular-1-3-improved-transitions-cached-views-etc/12528/313?u=brandyshea) to [my post](http://forum.ionicframework.com/t/please-help-test-angular-1-3-improved-transitions-cached-views-etc/12528/311?u=brandyshea) on the previous topic) broke the sidemenu transitions. Previously the transitions were hidden when going from one page to another, but now it is showing transitions. Also, dragging to open the menu doesn’t work once you’ve navigated to a new page in the menu. To reproduce, go to [this codepen](http://codepen.io/anon/pen/PwPXbe): 1. Drag the screen to open the menu 2. Click on “Find Locations” 3. Try to drag the menu open - it shouldn’t open 4. Click back and forth between the menu items to see the transition animations Something else I noticed - when you use menu-toggle=“left” on the menu icon it is hiding the menu icon on other pages where the menu should be. Is this expected behavior? See [this codepen](http://codepen.io/anon/pen/xbwmqO) to see what I mean. Open the menu and go to “Find Locations” and the menu icon disappears. Sorry if this has already been addressed. Thanks for all the hard work! ---
**Author:** ![adam](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/adam/32/63947_2.png) [@adam](https://forum.ionicframework.com/u/adam)\ **Post date:** [December 4, 2014, 3:14am UTC](https://forum.ionicframework.com/t/please-help-test-angular-1-3-improved-transitions-cached-views-repost/13561/6 "2014-12-04T03:14:21Z")
@brandyshea What you’re doing is overkill for the side menu. You’re creating a `` with child ``s, then adding an inner `