当前位置：首页 > 软件库 > 手机/移动开发 > >

nativescript-ionic-template

授权协议 MIT License

开发语言 JavaScript TypeScript

所属分类手机/移动开发

软件类型开源软件

地区不详

投递者山凌

操作系统 iOS

开源组织无

适用人群未知

软件概览

NativeScript Ionic Template {N}

Native mobile Apps with NativeScript and Web Apps (Mobile First) with Ionic styles and components sharing the same code with Angular!

This template uses the default navigation of Angular, the navigation of Ionic 3 is not recommended to develop websites, therefore it is not recommended to use Ionic components that require Ionic navigation. However, in this template you can find an example of how to use components such as the side menu without depending on the navigation.

Introduction ��‍��

Using this template you can create a Web App (Mobile First) using Ionic 3 components and a Mobile Native App using NativeScript with the same code, yay! ��

For more details you can check the excellent NativeScript team article about Code Sharing Between Web and Mobile with Angular and NativeScript: https://www.nativescript.org/blog/code-sharing-between-web-and-mobile-with-angular-and-nativescript

How does it work? ☕

Check the excellent video of Sebastian Witalec about Sharing Code Between Web and Native Apps

Run the projects ⏯

Ionic Web App (Using the Angular-cli):

  npm install (It's required to create the symlinks at the first time before to execute the app)
  ng serve

NativeScript Mobile App:

  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)

Commands ��

View available commands here: Seed commands

Getting Started ��

Command	Action
`npm install -g @angular/cli`	Install the Angular-cli. Remember see the documentation here
`ng g module [name]`	Generate a new Module. Recommended to create sections of your app that will load components with Lazy Loading.
`ng g component [name]`	Generate a new Component in the current directory. Remember add the moduleId property `moduleId: module.id` in every component
`ng g service [name]`	Generate a new Service. The `app/providers/` path is recommended for shared services among several components.

Use Ionic icons from the NativeScript side ��

NativeScript requires the unicode of the icon, you can find the unicode with the name of the icon from the content of the src/fonts/ionicons.svg file and later you can use it from a <Label> or <Button>, example:

// name: ion-ios-contact, unicode: &#xf41a;
<Button class="ion-icon" fontSize="25" text="&#xf41a;"></Button>

Custom templates for each platform ��

Target Phone and Tablet Templates individually. The following extensions are supported:

Extension	Platform
`.{html/scss}`	Web platform. Used from mobile when there is no .tns extension
`.tns.{html/scss}`	Only for mobile
`.tns.ios.{html/scss}`	Only for iOS
`.tns.android.{html/scss}`	Only for Android
`.tns.ios.phone.{html/scss}`	Only for iOS Phone
`.tns.android.phone.{html/scss}`	Only for Android Phone

Angular Tips

Syntax	Meaning	Expected Result
`{{ title }}` `{{ getTitle() }}`	Render a value dynamically, this expression will be evaluated at run time.
`[src]="imageUrl"`	Property Binding: Bind a property of a DOM element to a field of the component.
`[attr.colspan]="colSpan"`	Attribute Binding
`[class.selected]="user.selected"`	Class Binding: Add a class dynamically.
`[style.color]="isActive? 'green': 'red'"`	Style Binding
`(tap)="onSave($event)"`	Event Binding
`(keyup.enter)="onEnter()"`	Event Filtering
`#email (keyup.enter)="onEnter(email.value)`	Template variables
`[(ngModel)]="user.email"`	Two-way Binding. Import FormsModule is required.
`{{ price \| currency:'AUD' }}`	Pipes: Format data.
`@Input('input-property') myData;` `<example [input-property]="data">`	Input Properties: Input data for the component.
`@Output('output-property') change= new EventEmitter();` `this.change.emit({msg: 'Hi!'});` `<example (output-property)="onChange($event)">`	Output Properties: Raise events from the component.	onChange({msg}) { console.log(msg) }

Resources ⛩

Contributors ��


Sean Perkins	Juan Nicholls

Credits ��

Angular NativeScript Seed

Supporting ��

I believe in Unicorns �� Support me, if you do too.

Happy coding ��

Made with ❤️

使用案例

ionic2 ionic3 项目创建遇到的问题总结

真是一觉醒来，就又有新版本发布啊。这一次的总结主要针对ionic3，当然也适用于ionic2. 不一定面面俱到，但是希望看到这篇总结开发者能够少走一些弯路。 First of all,当然是安装最新版的ionic了。 npm install -g ionic 可以用 ionic info 查看一系列依赖工具的版本。 Fine，现在开始创建ionic项目了。一切看起来的风平浪静的样子。还是那句用
ionic UI(2)ionic2 framework - TypeScript - tutorial

ionic UI(2)ionic2 framework - TypeScript - tutorial 1 Basic ENV > node --version v4.4.0 > npm install -g cordova > npm install -g ionic >npm install -g ios-sim > npm install -g ios-deploy > cordova --
Ionic

一、Ionic2提供了一个简单的启动模板来快速支撑一个app，我们的app叫做githubIonic。在你的终端： $ ionic start githubIonic tutorial --v2 --ts 上面的命令会创建一个ionic项目基于教程模板，然后下载必要的npm包，我们将会使用TypeScript，这就是为什么我们要使用--ts。 www/index.html一般是app的入口程序。
使用Vue构建Ionic混合APP系列教程（四）：数据存储

大多数应用程序基本都需要保存一些在应用重新加载时需要的数据。我们经常使用用户设备上的本地存储来实现。当使用Ionic/Angular的时候，我们可以简单的使用Ionic内置的Storage API，并不需要知道背后的原理——Ionic会自动地选择最合适的存储方式。再说一次，在Vue里我们没有现成的东西可以用，是安装一个库还是自己搭建解决方案全决定于我们自己。在这篇教程，我们将扩展上篇教程里的R