mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
Ionic 2
Ionic 2 is the next generation of Ionic, the popular open-source mobile app development SDK that makes it easy to build top quality mobile apps with web technologies.
Ionic 2 is based on the new 2.x version of AngularJS, and comes with many significant performance, usability, and feature improvements.
For a quick intro to Ionic 2, see the guide.
Building & Running
- At the root of your
ionic2
directory/repo, run:gulp update.angular
. This will get the latest version of Angular2 master and install it as a sibling directory../angular-ionic
to wherever yourionic2
directory is. (It'll take a while to npm install angular2, so go grab a beer). - Cd into the
../angular-ionic
directory and rungulp build
to build out the Angular files. If you are on a clean install, but../angular-ionic
already exists, rungulp link.angular
to symlinkangular2
in yourionic2
working directory to../angular-ionic
. This is for the SystemJS builder, which can't see below the root directory. - Run
npm install
andjspm install
. Make sure you have at least version 15.6 of JSPM. It should not alter yourconfig.js
orpackage.json
files, if it does, make sure you have the proper version of JSPM. - In the
ionic2
working directory, rungulp build.clean
. This will transpile the Ionic project files to es5, bundle them using the SystemJS builder, bundle all of Ionic's dependencies (ie Angular2 and all of its dependencies) into a separate file, and build out all the Ionic examples as well. Indist/js/es6/ionic
you will find clean es6 Ionic files (no @Annotations), and indist/js/es5/ionic
you will find all of the Babel-transpiled es5 Ionic project files. The two bundles are located atdist/js/ionic.bundle.js
anddist/js/dependencies.js
, and the examples are located indist/examples
. - Run
gulp watch
. - Go to http://localhost:8000/dist/examples/
- Stay cool
Note: Once you're setup, you just need to run gulp watch
, unless you've updated angular and want to rebuild dependencies.js
.
Things you'll probably need to fix
@Decorator
is now just@Directive
- Components must use an element selector
NgElement
is no longer a thing, it's nowElementRef
. Stuff needs to be fixed.- All
main.js
test files were renamed toindex.js
to work with angular's build - imports that are relative paths should start with
./
. For example, instead ofpath/module
it should be./path/module
Component
,Directive
andView
should NOT be imported fromangular2/angular2
. You'll probably get "No Directive annotation found on Content" when the wrong import is referenced.- Import those instead from:
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
Description
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
angularcapacitorframeworkfrontendioniciosjavascriptmaterial-designmobilepwareactstencilstenciljstypescriptvuewebwebcomponents
Readme
MIT
2.4 GiB
Languages
TypeScript
60.8%
HTML
24.8%
SCSS
11%
JavaScript
2%
Vue
0.9%
Other
0.5%