Ionic-Framework

ionic-framework

#ionic- framework 1

1: ionic-framework 2

Examples 2

1. nonic ( ) Ionic Framework Cordova (Ionic Cordova ) 2

2. : 3

3. . 3

Ionic Framework Hello World 5

Yo (Yeoman) Ionic Projects (Ionic Cloud) 6

: 6

, , . 6

Yeoman Ionic Framework , Web 7

Ionic . 7

. 8

/ / . 9

. 10

2: " " " " ? 13

Examples 13

ionic vs ionic preparation 13

3: Ionic - jshint gulp-jshint 14

linting ? 14 Examples 14

.jshintrc ( ) 14

Makefile 15

4: Ionic 16

Examples 16

3 19

5: Ionic Apps 22

Examples 22

Github Repo 22

Codepen URL 22

: 22

/ : 22

6: Ionic EcmaScript 6 ? 23

Examples 23

7: Ionic 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

Yeoman Ionic Framework , Web 26

Ionic . 27

. 28

/ / . 29

. 30

10: Ionic 32

Examples 32

. 32

11: 33

Examples 34

LiveReload 34

IP 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

Examples 40

15: AngularJS 41

Examples 41

16: CSS 43

Examples 43

45 46

17: (ionic.io) 47

Examples 47

18: 48

Examples 48

macOS 48

19: CLI 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

Ionic Hello World App

Hello World..!

• .

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 .

$ 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 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 $ 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 │ package.json │ └───app │ index.html │ ├───js │ app.js │ controllers.js │ └───templates https://riptutorial.com/ko/home 11 home.html menu.html

: . . ionic-framework : https://riptutorial.com/ko/ionic-framework/topic/893/ionic-framework-

https://riptutorial.com/ko/home 12 2: " " " " ?

Examples ionic vs ionic preparation

/ XCode Android Eclipse . IDE . : www . . $ cordova prepare ios iOS www . : platforms/ios/www .

XCode ionic prepare ionic prepare iOS ionic prepare XCode . ionic build ( : Android .apk ) ( ionic emulate ). ).

" " " " ? : https://riptutorial.com/ko/ionic-framework/topic/2911/------

https://riptutorial.com/ko/home 13 3: Ionic - jshint gulp-jshint

Linting . . linting ?

. " - " (Linting)" ?. package.json . / .

npm install jshint --save-dev npm install jshint-stylish --save-dev npm install gulp-jshint --save-dev

Examples gulpfile.js . .

gulp.task('lint', function() { return gulp.src(['./www/js/**/*.js']) .pipe(jshint('.jshintrc')) .pipe(jshint.reporter('jshint-stylish')) .pipe(jshint.reporter('fail')) });

'www' 'js' . JavaScript . 'views' .

gulp.task('lint', function() { return gulp.src(['./www/js/**/*.js','./www/views/**/*.js']) .pipe(jshint('.jshintrc')) .pipe(jshint.reporter('jshint-stylish')) .pipe(jshint.reporter('fail')) });

1) /**/*.js - This syntax means to look at all the js files in the subfolders too 2) .jshintrc - This is a configuration file that we will create in the next example.

.jshintrc ( )

'.jshintrc' . package.json.

* : "jshintrc.txt" . ".jshintrc" . ( ).

. , jshint . :

{ https://riptutorial.com/ko/home 14 "predef": [ "window", "console", "cordova", "device", "alert", "document", "debug", "setServiceVars", "StatusBar", "config" ], "globals": { "angular" : false, "myApp" : false, "myControllers" : false, "myDirectives" : false, "localStorage" : false, "navigator" : false, "emit" : false, "atob" : false, "moment" : false, "btoa" : false }, "node" : true }

Makefile

1. "Makefile"( ) .

2. :

android: gulp lint gulp sass ionic run android --device

ios: gulp lint gulp sass ionic build ios app lint , , sass app .

: "ionic run android --device" .

Android: make android iOS : make ios

Ionic - jshint gulp-jshint : https://riptutorial.com/ko/ionic-framework/topic/4889/ionic------jshint-- gulp-jshint--

https://riptutorial.com/ko/home 15 4: Ionic

Examples index.html

https://riptutorial.com/ko/home 16 controller.js

angular.module('starter')

.controller('ImageController', function($scope, $cordovaDevice, $cordovaFile, $ionicPlatform, $cordovaEmailComposer, $ionicActionSheet, ImageService, FileService) {

$ionicPlatform.ready(function() { $scope.images = FileService.images(); $scope.$apply(); });

$scope.addMedia = function() { $scope.hideSheet = $ionicActionSheet.show({ buttons: [ { text: 'Take photo' }, { text: 'Photo from library' }, { text: 'Delete', type: 'input type="file"'} ], titleText: 'Add images', cancelText: 'Cancel', buttonClicked: function(index) { $scope.addImage(index); } }); }

$scope.addImage = function(type) { $scope.hideSheet(); ImageService.handleMediaDialog(type).then(function() { $scope.$apply(); }); }

$scope.sendEmail = function() { if ($scope.images != null && $scope.images.length > 0) { var mailImages = []; var savedImages = $scope.images; for (var i = 0; i < savedImages.length; i++) { mailImages.push('base64:attachment'+i+'.jpg//' + savedImages[i]); } $scope.openMailComposer(mailImages); } }

$scope.openMailComposer = function(attachments) { var bodyText = '

My Images

'; var email = { to: '', attachments: attachments, subject: 'Devdactic Images', body: bodyText, isHtml: true };

$cordovaEmailComposer.open(email, function(){ console.log('email view dismissed');

}, this); } https://riptutorial.com/ko/home 17 }); service.js

angular.module('starter')

.factory('FileService', function() { var images; var IMAGE_STORAGE_KEY = 'dav-images';

function getImages() { var img = window.localStorage.getItem(IMAGE_STORAGE_KEY); if (img) { images = JSON.parse(img); } else { images = []; } return images; };

function addImage(img) { images.push(img); window.localStorage.setItem(IMAGE_STORAGE_KEY, JSON.stringify(images)); };

return { storeImage: addImage, images: getImages } })

.factory('ImageService', function($cordovaCamera, FileService, $q, $cordovaFile) {

function saveMedia(type) { return $q(function(resolve, reject) { var options = optionsForType(type);

$cordovaCamera.getPicture(options).then(function(imageBase64) { https://riptutorial.com/ko/home 18 FileService.storeImage(imageBase64); }); }) } return { handleMediaDialog: saveMedia } });

Cordova Ionic Native .

$ ionic cordova plugin add cordova-plugin-camera $ npm install --save @ionic-native/camera app.module.ts .

import { Camera } from '@ionic-native/camera'; ...... @NgModule({ declarations: [ MyApp ], imports: [ BrowserModule, IonicModule.forRoot(MyApp), ...... ], bootstrap: [IonicApp], entryComponents: [ MyApp ], providers: [ StatusBar, SplashScreen, Camera, {provide: ErrorHandler, useClass: IonicErrorHandler}, ...... ] }) export class AppModule {}

Ionic 3 Action sheet . page.ts :

import { Camera, CameraOptions } from '@ionic-native/camera'; ......

export class YourPage {

private base64:any;

constructor(private camera: Camera,private actionsheetCtrl: ActionSheetController) { }

cameragalleryfun(){ https://riptutorial.com/ko/home 19

let actionSheet = this.actionsheetCtrl.create({ title: 'Camera-Gallery', cssClass: 'action-sheets-basic-page', buttons: [ { text: 'Camera', icon: 'camera', handler: () => { //console.log('Camera'); const options: CameraOptions = { quality: 60, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, sourceType : this.camera.PictureSourceType.CAMERA, targetWidth: 500, saveToPhotoAlbum: false, correctOrientation:true }

this.camera.getPicture(options).then((imageData) => { this.base64 = 'data:image/jpeg;base64,' + imageData; }, (err) => { // Handle error }); } }, { text: 'Gallery', icon: 'images', handler: () => { //console.log('Gallery'); const options: CameraOptions = { quality: 60, destinationType: this.camera.DestinationType.DATA_URL, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, sourceType : this.camera.PictureSourceType.PHOTOLIBRARY, targetWidth: 500, saveToPhotoAlbum: false, correctOrientation:true }

this.camera.getPicture(options).then((imageData) => { this.base64 = 'data:image/jpeg;base64,' + imageData; }, (err) => { // Handle error }); } }, { text: 'Cancel', role: 'cancel', // will always sort to be on the bottom icon: 'close', handler: () => { //console.log('Cancel clicked'); } } ] }); https://riptutorial.com/ko/home 20 actionSheet.present();

} } cameragalleryfun cameragalleryfun base64 . . https://github.com/apache/cordova-plugin- camera .

Ionic : https://riptutorial.com/ko/ionic-framework/topic/7086/ionic------

https://riptutorial.com/ko/home 21 5: Ionic Apps

Examples

$ ionic start myapp [template]

, Github repo, Codepen . Cordova www .

• ()

•

Github Repo

• Github repo url, : https://github.com/driftyco/ionic-starter-tabs • Ionic starter repos .

Codepen URL

• Codepen URL, : [ http://codepen.io/ionic/pen/odqCz][1]

• Codepen

•

/ :

--appname, -a ...... Human readable name for the app (Use quotes around the name)

--id, -i ...... Package name set in the config ex: com.mycompany.myapp

--no-cordova, -w .... Do not create an app targeted for Cordova

Ionic Apps : https://riptutorial.com/ko/ionic-framework/topic/3945/ionic-apps--

https://riptutorial.com/ko/home 22 6: Ionic EcmaScript 6 ?

Examples

npm install --save-dev gulp-babel gulp-plumber gulpfile.js babel .

//... var babel = require("gulp-babel"); var plumber = require("gulp-plumber");

var paths = { es6: ['./src/es6/*.js'], sass: ['./scss/**/*.scss'] };

gulp.task('default', ['babel', 'sass']);

gulp.task("babel", function () { return gulp.src(paths.es6) .pipe(plumber()) .pipe(babel()) .pipe(gulp.dest("www/js")); });

//...

gulp.task('watch', function() { gulp.watch(paths.es6, ['babel']); gulp.watch(paths.sass, ['sass']); }); //... ionic.project :

"gulpStartupTasks": [ "babel", "sass", "watch" ], ionic serve .

Ionic EcmaScript 6 ? : https://riptutorial.com/ko/ionic-framework/topic/4847/ionic-ecmascript-6----

https://riptutorial.com/ko/home 23 7: Ionic

title: '', // String. .

cssClass: '' , // String, CSS

subTitle: '' , // ( ). .

template: '' , // ( ). html .

templateUrl: '' , // ( ). html URL.

scope: null, // ( ). .

Ionic Popup .

Examples

Ionic

// An alert dialog $scope.showAlert = function() { var alertPopup = $ionicPopup.alert({ title: 'Don\'t eat that!', template: 'It might taste good' });

alertPopup.then(function(res) { console.log('Hello your first example.'); }); }; });

Ionic : https://riptutorial.com/ko/ionic-framework/topic/6461/ionic---

https://riptutorial.com/ko/home 24 8: Ionic .

Examples www .

Ionic 1.2 .

Cordova www . ( ) woila - .

1 " " " " ( ). CSS HTML ).

Ionic . : https://riptutorial.com/ko/ionic-framework/topic/4001/ionic----

https://riptutorial.com/ko/home 25 9: Yeoman Ionic

Examples

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 .

: / .

Yeoman Ionic Framework , Web

Node.js Chrome V8 . npm JavaScript . http://nodejs.org Node ( npm) .

https://riptutorial.com/ko/home 26 $ 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')),

ionicIoBundlePath: 'www/bower_components/ionic-platform-web- client/dist/ionic.io.bundle.min.js',

'string-replace': { ionicSettings: { files: { '<%= ionicIoBundlePath %>': '<%= ionicIoBundlePath %>', https://riptutorial.com/ko/home 27 }, 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 .

$ Grunt serve

Ionic Deploy . Ionic Deploy .

Gruntfile.js grunt 'deploy' .

grunt.registerTask('deploy', function () { return grunt.task.run(['init', 'ionic:upload' + this.args.join()]); });

$ ionic plugin add ionic-plugin-deploy

: https://riptutorial.com/ko/home 28 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 .

apps.ionic.io .

: . . https://riptutorial.com/ko/home 29 : . .

: . . .

: . .

: .

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 $ 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, 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 } }); https://riptutorial.com/ko/home 30

$ionicPush.register();

$ grunt build:android --debug

Ionic Push . .

: iOS Ionic Push . iOS http://docs.ionic.io/v2.0.0-beta/docs/ios-push-profiles .

IonicApp: │ │ bower.json │ Gruntfile.js │ package.json │ └───app │ index.html │ ├───js │ app.js │ controllers.js │ └───templates home.html menu.html

: . .

Yeoman Ionic : https://riptutorial.com/ko/ionic-framework/topic/6389/yeoman-ionic----

https://riptutorial.com/ko/home 31 10: Ionic

Examples

; (MySQL, , MSSQL, ...) . .

, . . Angular Angular .

(RESTful) API .

(PHP, Go, Python ) .

(RESTful) API Angular $resource $http Angular .

Angular $http Giphy API :

var search = 'cats'; var link = 'http://api.giphy.com/v1/gifs/search?api_key=dc6zaTOxFJmzC&q=' + search;

$http.get(link).then(function(result){ console.log(result); });

Ionic : https://riptutorial.com/ko/ionic-framework/topic/4003/--ionic-

https://riptutorial.com/ko/home 32 11:

, Ionic Native . Ionic Android, iOS Windows Mobile API Cordova .

Camera Plugin .

cd src mkdir mocks cd mocks touch camera-mock.ts camera-mock.ts .

export class CameraMock { getPicture(params) { return new Promise((resolve, reject) => { resolve("BASE_64_IMAGE_DATA"); }); } } src/app.module.ts mock "

import { CameraMock } from "../mocks/camera-mock";

@NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, CameraMock, {provide: ErrorHandler, useClass: IonicErrorHandler} ] }) export class AppModule {} https://riptutorial.com/ko/home 33 .

Examples ionic serve . . LiveReload . . ionic serve Sass Sass docs .

$ ionic serve [options]

(AVD Mobiles) Chrome .

chrome://inspect/#devices

LiveReload

LiveReload www/ , www/lib/ . ionic.project watchPatterns .

{ "name": "myApp", "app_id": "", "watchPatterns": [ "www/js/*", "!www/css/**/*" ] } glob Grunt globbing .

$ ionic setup sass watchPatterns ionic.project , gulpStartupTasks . http://ionicframework.com/img/blog/lab.png

Ionic Lab iOS Android ionic serve . , .

$ ionic serve --lab

. --address .

$ ionic serve --address 68.54.96.105 serve http . API . No 'Access-Control-Allow-Origin' header is present on the requested https://riptutorial.com/ko/home 34 resource No 'Access-Control-Allow-Origin' header is present on the requested resource ionic http API . ionic.project . .

• path : URL . • proxyUrl : URL .

{ "name": "appname", "email": "", "app_id": "", "proxies": [ { "path": "/v1", "proxyUrl": "https://api.instagram.com/v1" } ] } http://localhost:8100/v1 https://api.instagram.com/v1 https://api.instagram.com/v1

angular.module('starter.controllers', []) .constant('InstagramApiUrl', '') // .constant('InstagramApiUrl','https://api.instagram.com') //In production, make this the real URL

.controller('FeedCtrl', function($scope, $http, InstagramApiUrl) {

$scope.feed = null;

$http.get(InstagramApiUrl + '/v1/media/search?client_id=1&lat=48&lng=2.294351').then(function(data) { console.log('data ' , data) $scope.feed = data; })

})

[--consolelogs|-c] ...... Print app console logs to Ionic CLI [--serverlogs|-s] ...... Print dev server logs to Ionic CLI [--port|-p] ...... Dev server HTTP port (8100 default) [--livereload-port|-i] .. Live Reload port (35729 default) [--nobrowser|-b] ...... Disable launching a browser [--nolivereload|-r] ..... Do not start live reload [--noproxy|-x] ...... Do not add proxies

: https://riptutorial.com/ko/ionic-framework/topic/3256/----

https://riptutorial.com/ko/home 35 12: Ionic App

Examples

Ionic App

1. iOS :

$ ionic platform add ios

$ ionic platform add android

Windows :

$ ionic platform add windows

2. iOS :

$ ionic build ios

$ ionic build android

Windows :

$ ionic build windows

() run emulate / . --livereload . ionic serve . . . dev .

--consolelogs -c / . --serverlogs -s . run emulate /

https://riptutorial.com/ko/home 36 [--livereload|-l] ...... Live Reload app dev files from the device (beta) [--consolelogs|-c] ...... Print app console logs to Ionic CLI (live reload req.) [--serverlogs|-s] ...... Print dev server logs to Ionic CLI (live reload req.) [--port|-p] ...... Dev server HTTP port (8100 default, live reload req.) [--livereload-port|-i] .. Live Reload port (35729 default, live reload req.) [--debug|--release]

CLI .

restart or r to restart the client app from the root goto or g and a url to have the app navigate to the given url consolelogs or c to enable/disable console log output serverlogs or s to enable/disable server log output quit or q to shutdown the server and exit

Ionic . run --emulator . iOS :

$ ionic emulate ios [options]

$ ionic emulate android [options]

Windows :

$ ionic emulate windows [options]

AVD Chrome . .

chrome://inspect/#devices

Ionic . / . iOS :

$ ionic run ios [options]

$ ionic run android [options]

https://riptutorial.com/ko/home 37 Windows :

$ ionic run windows [options]

4.1.

$ ionic run [ios/android/windows] --target="[target-name]"

$ adb devices / .

Ionic App : https://riptutorial.com/ko/ionic-framework/topic/4175/----ionic-app-

https://riptutorial.com/ko/home 38 13: (HTTP )

Examples n .

HTML :

Display some data

$scope.numberOfItemsToDisplay = 10; // Use it with limit to in ng-repeat $scope.addMoreItem = function(done) { if ($scope.Schedules.length > $scope.numberOfItemsToDisplay) $scope.numberOfItemsToDisplay += 10; // load number of more items $scope.$broadcast('scroll.infiniteScrollComplete') } addMoreItem () 10 .

(HTTP ) : https://riptutorial.com/ko/ionic-framework/topic/9490/------http------

https://riptutorial.com/ko/home 39 14:

. CSS . . Ionicons Ionic Framework . 100 % . MIT .

Ionicons Ionics CSS . http://ionicons.com/ .

Examples

. CSS . :

Ionic Ionicon CSS .

range . .

Ionic Ionicon . tabs-striped tabs-color-assertive . div .

Home Settings
: https://riptutorial.com/ko/ionic-framework/topic/5886/-
https://riptutorial.com/ko/home 40 15: AngularJS
Ionic Javascript AngularJS . .
Examples
HTML . Ionic HTML . Ionic .
:
Label
:
Value
:
Toggle
.