nativescript ionic template
1.0.0
Нативные мобильные приложения с NativeScript и веб -приложениями (первые мобильные) с ионными стилями и компонентами, обменивающими один и тот же код с Angular!
Этот шаблон использует навигацию по умолчанию по угловой, навигация Ionic 3 не рекомендуется для разработки веб -сайтов, поэтому не рекомендуется использовать ионные компоненты, которые требуют ионной навигации. Однако в этом шаблоне вы можете найти пример того, как использовать такие компоненты, как боковое меню, без в зависимости от навигации.
Используя этот шаблон, вы можете создать веб -приложение (мобильное сначала), используя компоненты Ionic 3 и мобильное приложение для нативного приложения, используя NativeScript с тем же кодом , Yay! ?
Для получения более подробной информации вы можете проверить отличную статью команды Nativescript о обмене кодами между Web и Mobile с Angular и Nativescript : https://www.nativecript.om
Проверьте отличное видео 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: module.id в каждом компоненте |
ng g service [name] | Генерировать новую услугу. app/providers/ путь рекомендуется для общих услуг среди нескольких компонентов. |
NativeScript требует Unicode значка, вы можете найти Unicode с именем значка из содержимого файла 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} | Только для Android |
.tns.ios.phone.{html/scss} | Только для телефона iOS |
.tns.android.phone.{html/scss} | Только для телефона Android |
| Синтаксис | Значение | Ожидаемый результат |
|---|---|---|
{{ 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" | Двусторонняя переплета . Импорт Formsmodule требуется. | |
{{ 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) } |
| Шон Перкинс | Хуан Николс |
Я верю в единорогов? Поддержите меня, если вы тоже.
Сделано с ❤
