線上Angular讀書會 - Electron & NativeScript開發經驗分享 - NativeScript篇

README.md

• Demo: https://github.com/wellwind/one-time-map-app
• Reference: http://docs.nativescript.org/angular/tutorial/ng-chapter-1

(先用tns create demo-app --ng看看內容)

建立專案

1. ng new nativescript-demo
2. cd nativescript-demo
3. rm -rf src
4. tns create src --ng
5. .gitignore加入

   # NativeScript
   src/node_modules
   src/platforms
   src/app/**/*.js
   

6. package.json中的scripts加入

   "scripts": {
       "start.ios": "cd src && tns run ios",
       "start.android": "cd src && tns run android",
       "start.ios": "cd src && tns debug ios",
       "start.android": "cd src && tns debug android"
   }

7. npm run start.ios或npm run start.android
8. npm run debug.ios或npm run debug.android

加入component

1. ng g c main
2. 調整main.component.html

   <StackLayout>
       <Button class="btn btn-primary btn-active" id="button" text="Tap me!" (tap)="onTap($event)"></Button>
   </StackLayout>

3. @Component中加入moduleId

   @Component({
       moduleId: module.id,
       selector: 'app-main',
       templateUrl: './main.component.html',
       styleUrls: ['./main.component.css']
   })

4. main.component.ts中加入onTap事件

   onTap($event) {
       console.log($event);
   }