nativescript ionic template
1.0.0
Aplicativos móveis nativos com aplicativos Nativescript e Web (Mobile First) com estilos e componentes iônicos compartilhando o mesmo código com o Angular!
Este modelo usa a navegação padrão do Angular, a navegação do Ionic 3 não é recomendada para desenvolver sites; portanto, não é recomendável usar componentes iônicos que requerem navegação iônica. No entanto, neste modelo, você pode encontrar um exemplo de como usar componentes como o menu lateral sem depender da navegação.
Usando este modelo, você pode criar um aplicativo da Web (Mobile First) usando componentes Ionic 3 e um aplicativo nativo móvel usando o Nativescript com o mesmo código , YAY! ?
Para obter mais detalhes, você pode verificar o excelente artigo da equipe do Nativescript sobre o compartilhamento de código entre web e celular com angular e nativescript : https://www.nativescript.org/blog/code-sharing-betwen-web-and-mobile-with-angular-and-nativescript
Verifique o excelente vídeo de Sebastian Witalec sobre o compartilhamento de código entre aplicativos da Web e Native
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)
Exibir comandos disponíveis aqui: comandos de sementes
| Comando | Ação |
|---|---|
npm install -g @angular/cli | Instale o CLI angular. Lembre -se de ver a documentação aqui |
ng g module [name] | Gerar um novo módulo. Recomendado para criar seções do seu aplicativo que carreguem componentes com carregamento preguiçoso. |
ng g component [name] | Gere um novo componente no diretório atual. Lembre -se de adicione o ModuleId Property moduleId: module.id em todos os componentes |
ng g service [name] | Gerar um novo serviço. O app/providers/ caminho é recomendado para serviços compartilhados entre vários componentes. |
Nativescript requer o unicode do ícone, você pode <Label> o unicode com o nome do ícone do conteúdo do arquivo src/fonts/ionicons.svg e <Button> posterior
// name: ion-ios-contact, unicode: 
<Button class="ion-icon" fontSize="25" text=""></Button>
Modelos de telefone e tablets alvo individualmente. As seguintes extensões são suportadas:
| Extensão | Plataforma |
|---|---|
.{html/scss} | Plataforma da Web. Usado no celular quando não há extensão .tns |
.tns.{html/scss} | Apenas para celular |
.tns.ios.{html/scss} | Apenas para iOS |
.tns.android.{html/scss} | Apenas para Android |
.tns.ios.phone.{html/scss} | Apenas para o telefone iOS |
.tns.android.phone.{html/scss} | Apenas para telefone Android |
| Sintaxe | Significado | Resultado esperado |
|---|---|---|
{{ title }}{{ getTitle() }} | Renderizar um valor dinamicamente, essa expressão será avaliada no tempo de execução. | |
[src]="imageUrl" | PROPRIEDADE LINDO: Ligue uma propriedade de um elemento DOM a um campo do componente. | |
[attr.colspan]="colSpan" | Atributo ligação | |
[class.selected]="user.selected" | Classe Ligação : Adicione uma classe dinamicamente. | |
[style.color]="isActive? 'green': 'red'" | Encadernação de estilo | |
(tap)="onSave($event)" | Vinculação de eventos | |
(keyup.enter)="onEnter()" | Filtragem de eventos | |
#email (keyup.enter)="onEnter(email.value) | Variáveis de modelo | |
[(ngModel)]="user.email" | Ligação bidirecional . É necessário o formsmodule de importação. | |
{{ price | currency:'AUD' }} | Pipes: Format Data. | |
@Input('input-property') myData;<example [input-property]="data"> | Propriedades de entrada: dados de entrada para o componente. | |
@Output('output-property') change= new EventEmitter();this.change.emit({msg: 'Hi!'});<example (output-property)="onChange($event)"> | Propriedades de saída: Levante eventos do componente. | Onchange ({msg}) { console.log (msg) } |
| Sean Perkins | Juan Nicholls |
Eu acredito em unicórnios? Apoie -me, se você também.
Feito com ❤️
