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
Ionic Hello World App
• .
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
: 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 optionsForType(type) { var source; switch (type) { case 0: source = Camera.PictureSourceType.CAMERA; break; case 1: source = Camera.PictureSourceType.PHOTOLIBRARY; break; } return { quality: 90, destinationType: Camera.DestinationType.DATA_URL, sourceType: source, allowEdit: false, encodingType: Camera.EncodingType.JPEG, popoverOptions: CameraPopoverOptions, saveToPhotoAlbum: false, correctOrientation:true }; }
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 } });
3
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
--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 .
: / .
• 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
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
: 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 . .
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 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
!
IP
. --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
3.
Ionic . run --emulator . iOS :
$ ionic emulate ios [options]
:
$ ionic emulate android [options]
Windows :
$ ionic emulate windows [options]
AVD Chrome . .
chrome://inspect/#devices
4.
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 :
:
$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 .