mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
39951ca99a
#### 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`.
The best place to start with Ionic is our documentation page.
Ionic currently best supports iOS 6+ and Android 4.1+, with scaled-down support for Android 2.3.
What is Ionic?
Ionic is the open source HTML5 Mobile Framework for building amazing, cross-platform hybrid native apps with HTML, JavaScript, and CSS.
We built Ionic because we wanted a framework that focused on building hybrid native apps, rather than mobile websites. We wanted this framework to be obsessive about great design and performance. A framework that left the past behind and focused on the future where mobile devices could make HTML5 feel native.
It's important to realize that Ionic is not a replacement for frameworks used for building mobile web apps. There are a lot of great solutions that work well for websites, like jQuery Mobile.
Ionic is also not a good solution if you need to support older generation devices. Our compatibility starts at iOS 6 and Android 4.1. We will never support versions earlier than those. This is a framework for the future. Learn more: Where does the Ionic Framework fit in?
Quick Start
To start using ionic, you have two options: copy over the built JS and CSS files, or
use the ionic tool (ionic-cli) which can be installed through npm: (You may need to prefix the command with sudo depending on your OS and setup.)
$ npm install -g ionic
Then, you can start a new ionic project by running:
$ ionic start myproject
Manual Start
- Download the latest stable release from:
- The release folder of this repository
- The Ionic CDN: Latest Release
bower install ionic
- Download the bleeding edge just-from-master release from:
- The Ionic CDN: Nightly Build
- Look in the ionic-bower Repository for the latest version, and do for example
bower install driftyco/ionic-bower#0.9.23-alpha-652(bower install ionicwill have the latest available soon)
Once you have a release, use js/ionic.js, js/ionic-angular.js, and css/ionic.css.
For most cases, you'll need AngularJS as well. This is bundled in js/angular/ and js/angular-ui-router/.
Demos
Community
- Follow @ionicframework on Twitter.
- Subscribe to the Ionic Newsletter.
- Have a question that's not a feature request or bug report? Discuss on the Ionic Forum.
- Read our Blog.
- Have a feature request or find a bug? Submit an issue.
Authors
Max Lynch
Ben Sperry
Adam Bradley
Andrew Joslin
Development
npm install && npm install -g gulp protractorto setup- (if you wish to run end-to-end tests):
webdriver-manager update --chrometo install the webdriver. gulporgulp buildto buildgulp docsto generate docs (read Documentation below for how to test docs locally).gulp build --releaseto build with minification & strip debugsgulp watchto watch and rebuild on changegulp karmato test one-timegulp karma-watchto test and re-run on source changegulp snapshotto test e2e tests locally (rungulp demosfirst to generate e2e tests). Be sure to run./node_modules/.bin/webdriver-manager update --chrometo first install the chrome webdriver dependency.
Documentation
- Documentation is generated into
dist/ionic-site. To test documentation properly, follow these steps:- Clone ionic-site into
./dist/ionic-site.
git clone git@github.com:driftyco/ionic-site dist/ionic-site
- Start jekyll, telling it to rebuild whenever the site changes.
cd dist/ionic-site && jekyll serve -w
- Go back to project root and build the docs
gulp docs [--doc-version=(versionName|nightly)]
- Open localhost:4000 and see your changes! Re-run
gulp docsagain whenever you change something, and jekyll will update the site.
- Clone ionic-site into
Demos / Kitchen Sink
- The demo site is generated into
dist/ionic-demo. To test the demos, follow these steps:- Run
gulp demos [--demo-version=(versionName|nightly)] - Start an http server from
dist/ionic-demo:
cd dist/ionic-demo && python -m SimpleHTTPServer
- Navigate to
http://localhost:8000/{versionName|nightly}and use the demos - Run
gulp demosagain whenever you change the demos
- Run
Commit Conventions
- Uses http://github.com/ajoslin/conventional-changelog conventions
Pushing New Release of Ionic
- Almost all of the logic for releasing Ionic is done on the Travis server
- To push a new release:
- Update package.json version to new version
- Generate changelog with
gulp changelog - Go through the changelog, and fix any mistakes or clarify any unclear commit messages
- Commit package.json and CHANGELOG.md and push to master
- Travis will detect that this commit changed the version in package.json and push out all necessary for this new release (tags, release files, site config, ...)
LICENSE
Ionic is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.