ionic-framework #ionic- framework 1 1: ionic-framework 2 2 2 Examples 2 2 1. nonic ( ) Ionic Framework Cordova (Ionic Cordova ) 2 2. : 3 3. 3 3 Ionic Framework Hello World 5 Yo (Yeoman) Ionic Projects (Ionic Cloud) 6 : 6 , , . 6 6 Yeoman Ionic Framework , Web 7 7 Ionic . 7 8 . 8 9 / / . 9 10 . 10 11 2: " " " " ? 13 Examples 13 ionic vs ionic preparation 13 3: Ionic - jshint gulp-jshint 14 14 linting ? 14 Examples 14 14 .jshintrc ( ) 14 Makefile 15 4: Ionic 16 16 Examples 16 16 3 19 5: Ionic Apps 22 Examples 22 22 22 22 Github Repo 22 Codepen URL 22 : 22 / : 22 6: Ionic EcmaScript 6 ? 23 Examples 23 23 7: Ionic 24 24 24 Examples 24 Ionic 24 8: Ionic . 25 Examples 25 www . 25 9: Yeoman Ionic 26 Examples 26 Yo (Yeoman) Ionic Projects (Ionic Cloud) 26 : 26 , , . 26 26 Yeoman Ionic Framework , Web 26 27 Ionic . 27 28 . 28 29 / / . 29 30 . 30 31 10: Ionic 32 Examples 32 . 32 11: 33 33 33 Examples 34 34 LiveReload 34 34 IP 34 34 / 35 12: Ionic App 36 Examples 36 Ionic App 36 1. 36 2. 36 () 36 run emulate / 36 3. 37 4. 37 4.1. 38 13: (HTTP ) 39 Examples 39 n . 39 14: 40 40 Examples 40 40 40 15: AngularJS 41 41 Examples 41 41 41 41 41 42 16: CSS 43 43 Examples 43 43 43 44 44 44 45 46 17: (ionic.io) 47 Examples 47 47 18: 48 Examples 48 macOS 48 19: CLI 49 49 49 49 : 49 Examples 50 jshint before_prepare . 50 52 You can share this PDF with anyone you feel could benefit from it, downloaded the latest version from: ionic-framework It is an unofficial and free ionic-framework ebook created for educational purposes. All the content is extracted from Stack Overflow Documentation, which is written by many hardworking individuals at Stack Overflow. It is neither affiliated with Stack Overflow nor official ionic-framework. The content is released under Creative Commons BY-SA, and the list of contributors to each chapter are provided in the credits section at the end of this book. Images may be copyright of their respective owners unless otherwise specified. All trademarks and registered trademarks are the property of their respective company owners. Use the content presented in this book at your own risk; it is not guaranteed to be correct nor accurate, please send your feedback and corrections to [email protected] https://riptutorial.com/ko/home 1 1: ionic-framework Ionic HTML, CSS JavaScript . " ". Ionic AngularJS , . Ionic CSS / SASS Javascript UI Extensions . (CLI) , . " " . , . Ionic . Apache Cordova . Cordova , , Cordova . Cordova (, ) . trigger.io . 1.3.1 "" 2016-05-12 1.3.0 "" 2016-04-21 1.2.0 " - " 2015-12-09 1.1.0 " - " 2015-08-13 1.0.0 " - " 2015-05-12 Examples 1. nonic ( ) Ionic Framework Cordova (Ionic Cordova ) . Node.js . Node.js . Mac Xcode iOs Simulator . (Mac) (Windows) Cordova Ionic . $ npm install -g cordova ionic Mac sudo . $ sudo npm install -g cordova ionic Cordova Ionic . $ npm update -g cordova ionic $ sudo npm update -g cordova ionic Android iOS . : iOS Mac OS X . Ionic CLI iOS ios-sim npm . https://riptutorial.com/ko/home 2 $ sudo npm -g install ios-sim 2. : , . $ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu 3. iOS Android Ionic . $ ionic serve --lab ionic serve --lab UI ionic serve --lab Javascript . $ ionic serve . $ cd myApp $ ionic platform add ios android $ ionic build ios $ ionic emulate ios iOS : $ ionic build android $ ionic emulate android USB Android Ionic . $ ionic run android USB iOS Ionic . $ ionic run ios --device Angular JS https://riptutorial.com/ko/home 3 : http://ionicframework.com/ : http://ionicframework.com/docs/ Ionic NPM ( ) Cordova. Npde JS NPM . Apache Cordova NPM . npm install -g cordova NPM Cordova ionic framework . npm install -g ionic . * . Ionic Framework Project . ionic start myproject ionic start myproject [template_name] : Ionic . tabs () : . sidemenu : . blank : . myproject . ionic serve --lab ionic serve ionic platform [Platform Name] ionic build [Platform Name] ionic emulate [platform name] android and ios . https://riptutorial.com/ko/home 4 . ionic run [platform name] ionic --help ionic help ionic cli . ionic CSS . ionic Javascript API . ... Ionic Framework Hello World Hello World App • . ionic start HelloWorld blank // create new project cd HelloWorld // get into HelloWorld directory • subline / webstrome IDE HelloWorld . ○ www / ditectory index.html <body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">Ionic Hello World App</h1> </ion-header-bar> <ion-content> <div class="center">Hello World..!</div> </ion-content> </ion-pane> </body> • . ionic serve // run the app in browser • : ionic platform add android // add android platform ionic platform add ios // add ios platform https://riptutorial.com/ko/home 5 • . adb devices // to check devices is connected ionic run android // to run on android devices ionic run ios // to run on ios devices • livereload : ionic run android -c -s -l // to check app in live reload with console. Yo (Yeoman) Ionic Projects (Ionic Cloud) : , , . : Ionic Platform . , . : . Yeoman Ionic Ionic Platform . : Yeoman Ionic Ionic Platform Web Client Ionic . Ionic Deploy, Ionic Analytics Ionic Push . : Web / Mobile App . : / . • AngularJs : https://docs.angularjs.org/guide • IonicFramework : http://ionicframework.com/docs/guide • Yeoman : http://yeoman.io/codelab/index.html • : https://github.com/diegonetto/generator-ionic • : https://ionic.io/platform https://riptutorial.com/ko/home 6 Yeoman Ionic Framework , Web Node.js Chrome V8 . npm JavaScript . http://nodejs.org Node ( npm) . $ npm install npm –g $ npm install -g yo Yeoman . $ yo ionic [app-name] package.json devDependencies . "grunt-string-replace": "^1.2.1" bower.json . "ionic-platform-web-client": "^0.7.1" Gruntfile.js 'js' . index.html . grunt.initConfig({ yeoman: {………… scripts: 'js', ………… } }) $ bower install && npm install $ grunt $ grunt serve $ cordova platform add android $ grunt build:android --debug Ionic . Ionic . Ionic.io Ionic Ionic . $ ionic io init app.js 'ionic.service.core' . Gruntfile.js 'ionicSettings' . grunt.initConfig({ ionicSettings: JSON.stringify(grunt.file.readJSON('./.io-config.json')), https://riptutorial.com/ko/home 7 ionicIoBundlePath: 'www/bower_components/ionic-platform-web- client/dist/ionic.io.bundle.min.js', 'string-replace': { ionicSettings: { files: { '<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>', }, options: { replacements: [ { pattern: '"IONIC_SETTINGS_STRING_START";"IONIC_SETTINGS_STRING_END"', replacement: '"IONIC_SETTINGS_STRING_START";var settings =<%= ionicSettings %>; return { get: function(setting) { if (settings[setting]) { return settings[setting]; } return null; } };"IONIC_SETTINGS_STRING_END";' } ] } } }, copy: { ionicPlatform:{ expand: true, cwd: 'app/bower_components/ionic-platform-web-client/dist/', src: ['**'], dest: 'www/bower_components/ionic-platform-web-client/dist' } } }); grunt.registerTask('ionicSettings', ['copy:ionicPlatform','string-replace:ionicSettings']); init 'ionicSettings' . index.html . <script src="bower_components/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script> $ Grunt serve . Ionic Deploy . Ionic Deploy . Gruntfile.js grunt 'deploy' . grunt.registerTask('deploy', function () { return grunt.task.run(['init', 'ionic:upload' + this.args.join()]); }); https://riptutorial.com/ko/home 8 . $ ionic plugin add ionic-plugin-deploy : var deploy = new Ionic.Deploy(); // Check Ionic Deploy for new code deploy.check().then(function(hasUpdate) { }, function(err) { }); // Update app code with new release from Ionic Deploy deploy.update().then(function(result) { }, function(error) { }, function(progress) { }); : . apk . ' grunt deploy ' . apps.ionic.io . deploy . $ grunt build:android --debug $ grunt deploy --note "release notes" $ grunt deploy --note "release notes" --deploy=production / / . ? ? . Ionic Analytics . app.js ionic.service.core 'ionic.service.analytics' . $ionicAnalytics.register(); Ionic Analytics . $ionicAnalytics.track(eventType, eventData) . $ionicAnalytics.track('User Login', { user: $scope.user }); ion-track-tap . ion-track-data . https://riptutorial.com/ko/home 9 <button ion-track-tap="eventType" ion-track-data="expression"></button> apps.ionic.io . : . : . : . : . : . Ionic Push API . Android : Android Google (GCM) . Google Developers Console . GCM ID GCM . API Google Cloud Messaging API . Credentials Create credentials API Key Server Key . API ... API : Ionic Platform -> . Android Google Cloud Messaging Google API . -> API . API . API . $ ionic plugin add phonegap-plugin-push --variable SENDER_ID="GCM_PROJECT_NUMBER" $ ionic config set gcm_key <your-gcm-project-number> $ ionic config set dev_push false $ ionic io init : phonegap-plugin-push Android 32 . app.js ionic.service.core 'ionic.service.push' : . $ionicPush.init({ debug: true, https://riptutorial.com/ko/home 10 onNotification: function (notification) { console.log'token:', notification.payload); }, onRegister: function (token) { console.log('Device Token:', token); $ionicPush.saveToken(token); // persist the token in the Ionic Platform } }); $ionicPush.register(); . $ grunt build:android --debug Ionic Push . curl -X POST -H "Authorization: Bearer API_TOKEN" -H "Content-Type: application/json" -d '{ "tokens": ["DEVICE_TOKEN"], "profile": "PROFILE_TAG", "notification": { "message": "Hello World!" "android": { "title": "Hi User", "message": "An update is available for your App", "payload": { "update": true } } } }' "https://api.ionic.io/push/notifications" : iOS Ionic Push . iOS http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles . IonicApp: │ │ bower.json │ Gruntfile.js