nativescript ionic template
1.0.0
NativeScript 및 웹 앱이 있는 기본 모바일 앱 (Mobile First)은 이온 스타일과 구성 요소가있는 Angular와 동일한 코드를 공유합니다!
이 템플릿은 Angular의 기본 탐색을 사용하고, Ionic 3의 내비게이션은 웹 사이트를 개발하는 것이 권장되지 않으므로 이온 내비게이션이 필요한 이온 성분을 사용하는 것이 좋습니다. 그러나이 템플릿에서는 탐색에 따라 측면 메뉴와 같은 구성 요소를 사용하는 방법의 예를 찾을 수 있습니다.
이 템플릿을 사용하면 Ionic 3 구성 요소를 사용하여 웹 앱 (Mobile First) 과 동일한 코드 인 Yay! ?
자세한 내용은 Angular and Natives Script를 사용하여 웹과 모바일 간의 코드 공유에 대한 우수한 원거인 스크립트 팀 기사를 확인할 수 있습니다 : https://www.nativescript.org/blog/code-sharing-between-web-and-mobile-with-angular-and-natives script
웹과 기본 앱 간의 코드 공유 에 대한 Sebastian Witalec의 우수한 비디오를 확인하십시오.
npm install (It's required to create the symlinks at the first time before to execute the app)
ng serve
cd nativescript
npm install
npm run livesync (Required to detect changes and reload the app from the simulator/device)
npm run ios (using other terminal)
사용 가능한 명령을 여기에서 볼 수 있습니다 : 종자 명령
| 명령 | 행동 |
|---|---|
npm install -g @angular/cli | Angular-Cli를 설치하십시오. 여기서 문서를 참조하십시오 |
ng g module [name] | 새 모듈을 생성합니다. 게으른로드로 구성 요소를로드하는 앱 섹션을 작성하는 것이 좋습니다. |
ng g component [name] | 현재 디렉토리에서 새 구성 요소를 생성하십시오. 모든 구성 요소의 ModuleId Property moduleId: module.id 추가하십시오. |
ng g service [name] | 새로운 서비스를 생성하십시오. 여러 구성 요소 중 공유 서비스에는 app/providers/ 경로가 권장됩니다. |
NativeScript는 아이콘의 유니 코드가 필요하고 src/fonts/ionicons.svg 파일의 내용에서 아이콘 이름으로 유니 코드를 찾을 수 있으며 나중에 <Label> 또는 <Button> 에서 사용할 수 있습니다.
// name: ion-ios-contact, unicode: 
<Button class="ion-icon" fontSize="25" text=""></Button>
전화 및 태블릿 템플릿을 개별적으로 대상으로합니다. 다음 확장이 지원됩니다.
| 확대 | 플랫폼 |
|---|---|
.{html/scss} | 웹 플랫폼. .tns 확장자가 없을 때 모바일에서 사용됩니다 |
.tns.{html/scss} | 모바일에만 해당됩니다 |
.tns.ios.{html/scss} | iOS에만 해당됩니다 |
.tns.android.{html/scss} | 안드로이드에만 해당됩니다 |
.tns.ios.phone.{html/scss} | iOS 전화 용으로 만 |
.tns.android.phone.{html/scss} | 안드로이드 폰용으로 만 |
| 통사론 | 의미 | 예상 결과 |
|---|---|---|
{{ title }}{{ getTitle() }} | 값을 동적으로 렌더링하면이 표현식은 실행 시간에 평가됩니다. | |
[src]="imageUrl" | 속성 바인딩 : DOM 요소의 속성을 구성 요소의 필드에 바인딩합니다. | |
[attr.colspan]="colSpan" | 속성 바인딩 | |
[class.selected]="user.selected" | 클래스 바인딩 : 동적으로 클래스를 추가하십시오. | |
[style.color]="isActive? 'green': 'red'" | 스타일 바인딩 | |
(tap)="onSave($event)" | 이벤트 바인딩 | |
(keyup.enter)="onEnter()" | 이벤트 필터링 | |
#email (keyup.enter)="onEnter(email.value) | 템플릿 변수 | |
[(ngModel)]="user.email" | 양방향 바인딩 . 폼 모듈 이 필요합니다. | |
{{ price | currency:'AUD' }} | 파이프 : 형식 데이터. | |
@Input('input-property') myData;<example [input-property]="data"> | 입력 속성 : 구성 요소의 입력 데이터. | |
@Output('output-property') change= new EventEmitter();this.change.emit({msg: 'Hi!'});<example (output-property)="onChange($event)"> | 출력 속성 : 구성 요소에서 이벤트를 높입니다. | onchange ({msg}) { Console.log (MSG) } |
| Sean Perkins | 후안 니콜스 |
나는 유니콘을 믿습니까? 당신도 그렇게한다면 저를 지원하십시오.
❤️로 만들어졌습니다
