- 浏览: 2486695 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
nation:
你好,在部署Mesos+Spark的运行环境时,出现一个现象, ...
Spark(4)Deal with Mesos -
sillycat:
AMAZON Relatedhttps://www.godad ...
AMAZON API Gateway(2)Client Side SSL with NGINX -
sillycat:
sudo usermod -aG docker ec2-use ...
Docker and VirtualBox(1)Set up Shared Disk for Virtual Box -
sillycat:
Every Half an Hour30 * * * * /u ...
Build Home NAS(3)Data Redundancy -
sillycat:
3 List the Cron Job I Have>c ...
Build Home NAS(3)Data Redundancy
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 --version
6.0.0
> ionic --version
1.7.14
That is ionic 1 I guess. Let me try with ionic 2.
> npm install -g ionic@beta
Check the version
> ionic --version
2.0.0-beta.19
2 Start a Sample Project
> ionic start cutepuppypics --v2
After create this project, we can easily start the web console version.
> ionic serve
http://localhost:8100/
Build for iOS
> ionic platform add ios
> ionic emulate ios
And we can change the [window] —> [Scala] to adjust the size of the window
Build the Android
> ionic platform add android
I have Genymotion there, and I have a device running there.
>ionic run android
3 Start from the Basic
following this document
http://ionicframework.com/docs/v2/getting-started/tutorial/
Create a new project with tutorial
> ionic start myionic2project tutorial --v2
Start the app in the browser
> ionic serve
Project Structure
www/index.html main entry point for the app.
<ion-app></ion-app>
<script src="cordova.js"></script>
<script src="build/js/app.bundle.js"></script>
app.bundle.js is a concatenated file containing ionic, angularJS and all the app’s Javascripts.
app/app.js
We can use TypeScript here.
This command can create the TypeScript Sample.
> start myionic2project2 tutorial --v2 --ts
4 TypeScript
http://www.typescriptlang.org/
Install TypeScript under NPM env
> npm install -g typescript
> cat greeter.ts
function greeter(person) {
return "Hello," + person;
}
var user = "Carl Luo";
document.body.innerHTML = greeter(user);
Compile the TypeScript Codes
> tsc greeter.ts
If we made something wrong in the TS file, it will throw exceptions during compiling.
> tsc greeter.ts
greeter.ts(5,1): error TS2304: Cannot find name 'adfasdf'.
Some benefit from TypeScript
Type for the Arguments
> cat greeter.ts
function greeter(person: String) {
return "Hello," + person;
}
//var user = "Carl Luo";
var user = 3;
document.body.innerHTML = greeter(user);
> tsc greeter.ts
greeter.ts(7,35): error TS2345: Argument of type 'number' is not assignable to parameter of type 'String'.
Define the Interface as We Needed
> cat greeter.ts
interface Person {
firstname: string;
lastname: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
var user = {firstname: "Carl", lastname: "User"} ;
document.body.innerHTML = greeter(user);
The generated JS will be:
> cat greeter.js
function greeter(person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
var user = { firstname: "Carl", lastname: "User" };
document.body.innerHTML = greeter(user);
Add class and constructor
interface Person {
firstname: string;
lastname: string;
}
class Student {
fullname: string;
constructor(public firstname, public middleinitial, public lastname) {
this.fullname = firstname + " " + middleinitial + " " + lastname;
}
}
function greeter(person: Person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
var user = new Student("Carl", "H.", "Luo");
document.body.innerHTML = greeter(user);
Handbook
http://www.typescriptlang.org/Handbook
Language
https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md
References:
http://sillycat.iteye.com/admin/blogs/2284701
http://ionicframework.com/docs/components/#header
https://github.com/ccoenraets/ioconf
https://github.com/loicknuchel/ionic-starter
http://ionicframework.com/docs/v2/native/Camera/
ionic framework
http://captaindanko.blogspot.com/2015/11/ionic-app-with-restful-backend-part-1.html
http://captaindanko.blogspot.com/2015/11/ionic-app-with-restful-backend-part-2.html
https://github.com/cptdanko/IonicAppWithRestBackend
angular2.0
https://angular.io/
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 --version
6.0.0
> ionic --version
1.7.14
That is ionic 1 I guess. Let me try with ionic 2.
> npm install -g ionic@beta
Check the version
> ionic --version
2.0.0-beta.19
2 Start a Sample Project
> ionic start cutepuppypics --v2
After create this project, we can easily start the web console version.
> ionic serve
http://localhost:8100/
Build for iOS
> ionic platform add ios
> ionic emulate ios
And we can change the [window] —> [Scala] to adjust the size of the window
Build the Android
> ionic platform add android
I have Genymotion there, and I have a device running there.
>ionic run android
3 Start from the Basic
following this document
http://ionicframework.com/docs/v2/getting-started/tutorial/
Create a new project with tutorial
> ionic start myionic2project tutorial --v2
Start the app in the browser
> ionic serve
Project Structure
www/index.html main entry point for the app.
<ion-app></ion-app>
<script src="cordova.js"></script>
<script src="build/js/app.bundle.js"></script>
app.bundle.js is a concatenated file containing ionic, angularJS and all the app’s Javascripts.
app/app.js
We can use TypeScript here.
This command can create the TypeScript Sample.
> start myionic2project2 tutorial --v2 --ts
4 TypeScript
http://www.typescriptlang.org/
Install TypeScript under NPM env
> npm install -g typescript
> cat greeter.ts
function greeter(person) {
return "Hello," + person;
}
var user = "Carl Luo";
document.body.innerHTML = greeter(user);
Compile the TypeScript Codes
> tsc greeter.ts
If we made something wrong in the TS file, it will throw exceptions during compiling.
> tsc greeter.ts
greeter.ts(5,1): error TS2304: Cannot find name 'adfasdf'.
Some benefit from TypeScript
Type for the Arguments
> cat greeter.ts
function greeter(person: String) {
return "Hello," + person;
}
//var user = "Carl Luo";
var user = 3;
document.body.innerHTML = greeter(user);
> tsc greeter.ts
greeter.ts(7,35): error TS2345: Argument of type 'number' is not assignable to parameter of type 'String'.
Define the Interface as We Needed
> cat greeter.ts
interface Person {
firstname: string;
lastname: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
var user = {firstname: "Carl", lastname: "User"} ;
document.body.innerHTML = greeter(user);
The generated JS will be:
> cat greeter.js
function greeter(person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
var user = { firstname: "Carl", lastname: "User" };
document.body.innerHTML = greeter(user);
Add class and constructor
interface Person {
firstname: string;
lastname: string;
}
class Student {
fullname: string;
constructor(public firstname, public middleinitial, public lastname) {
this.fullname = firstname + " " + middleinitial + " " + lastname;
}
}
function greeter(person: Person) {
return "Hello, " + person.firstname + " " + person.lastname;
}
var user = new Student("Carl", "H.", "Luo");
document.body.innerHTML = greeter(user);
Handbook
http://www.typescriptlang.org/Handbook
Language
https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md
References:
http://sillycat.iteye.com/admin/blogs/2284701
http://ionicframework.com/docs/components/#header
https://github.com/ccoenraets/ioconf
https://github.com/loicknuchel/ionic-starter
http://ionicframework.com/docs/v2/native/Camera/
ionic framework
http://captaindanko.blogspot.com/2015/11/ionic-app-with-restful-backend-part-1.html
http://captaindanko.blogspot.com/2015/11/ionic-app-with-restful-backend-part-2.html
https://github.com/cptdanko/IonicAppWithRestBackend
angular2.0
https://angular.io/
发表评论
-
ionic UI(4)ionic2 framework - basic and components and native
2016-03-24 02:33 1222ionic UI(4)ionic2 framework - b ... -
ionic UI(3)TypeScript - handbook
2016-03-22 23:21 590ionic UI(3)TypeScript - handboo ... -
Parse and Heroku Service(3)Parse Server and Parse Dashboard
2016-03-22 06:30 941Parse and Heroku Service(3)Pars ... -
Parse and Heroku Service(2)Mail Templates and Push Notification
2016-03-22 02:45 542Parse and Heroku Service(2)Mail ... -
ionic UI(1)Introduction
2016-03-19 03:18 679ionic UI(1)Introduction 1 Inst ... -
Parse and Heroku Service(1)Heroku Installation and Play
2016-03-19 00:13 784Parse and Heroic Service(1)Hero ... -
Hybrid(5)Customize Meteor Directly Google Login
2015-09-01 02:33 885Hybrid(5)Customize Meteor Direc ... -
Hybrid(4)Favorite Places - Google Login
2015-09-01 02:02 1296Hybrid(4)Favorite Places - Goog ... -
Hybrid(3)More Meteor Example - Social
2015-08-11 05:04 727Hybrid(3)More Meteor Example - ... -
Hybrid(2)meteor Running Android and iOS
2015-07-28 23:59 1003Hybrid(2)meteor Running Android ... -
Create the Google Play Account
2015-07-18 06:42 1055Create the Google Play Account ... -
Secure REST API and Mobile(1)Document Read and Understand OAUTH2
2015-07-14 00:36 728Secure REST API and Mobile(1)Do ... -
Screen Size and Web Design
2015-07-11 01:11 694Screen Size and Web Design iPh ... -
Hybrid(1)ionic Cordova meteor
2015-06-25 05:49 429Hybrid(1)ionic Cordova meteor ... -
Android Fire Project(1)Recall Env and Knowledge
2015-02-11 12:28 650Android Fire Project(1)Recall ... -
Android Content Framework(1)Concept
2014-06-14 13:54 1049Android Content Framework(1)Con ... -
Feel Android Studio(1)Install and Update Android Studio
2014-04-11 03:12 1974Feel Android Studio(1)Install a ... -
IOS7 App Development Essentials(2)iBeacon
2014-03-05 05:55 848IOS7 App Development Essentials ... -
IOS7 App Development Essentials(1) Persistent Store
2014-03-05 05:54 1277IOS7 App Development Essentials ... -
Mobile Jquery(5)Update and Know about Express
2014-01-30 06:33 1227Mobile Jquery(5)Update and Know ...
相关推荐
导航到IONIC-Angular-Typescript-Sample目录: cd IONIC-Angular-Typescript-Sample 安装依赖项 npm install 在浏览器中运行应用 ionic serve 使用REST服务 请按照以下说明使用REST数据服务运行它: 将R
Angular-ionic-native-http-connection-backend.zip,离子型和iosionic本机http连接后端cors问题的解决方案,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular...
$ ionic start YOUR_APP_NAME blank$ cd YOUR_APP_NAME$ curl -o- https://raw.githubusercontent.com/kinumi/ionic-typescript-bootstrap/master/bootstrap.sh | bash在ionic.project添加以下内容非常方便。...
ionic-framework-master
Learn how to build app store-ready hybrid apps with the Ionic 2, the framework built on top of Apache Cordova (formerly PhoneGap) and Angular. This practical guide shows you how to use Ionic’s tools ...
Ionic - Building mobile apps with Ionic Framework
这是一个生动的回购,来自“ Ionic and Typescript”截屏的示例。 在这里,我们将遍历所有部分以使用Ionic V1和Typescript进行设置。 第1部分:建立构建步骤。 连结至YouTube 首先让我们创建一个项目 $ ionic ...
Leverage Angular 2 events and Ionic-specific events to communicate About the Author Hoc Phan is a technologist with a wide range of experiences in frontend development, cloud computing, and big data. ...
ionic 2
ionic-sublime-plugin 支持sublime2、3版本
确保你的电脑安装了ionic2,不懂自行百度 second(其次): $ ionic start wechat_restaurant tutorial --v2 third(然后): find local file: /wechat_restaurant , then delete all files except on /node_modules...
例如,要使用默认选项卡界面启动一个新的 Ionic 项目,请确保已安装ionic实用程序: $ npm install -g ionic 然后运行: $ ionic serve使用打字稿和 sass 安装打字稿工具: npm install -g typescript 为了编译 ...
ngCordova型脚本演示使用Typescript编写的使用ngCordova的Ionic 1.X演示请按照以下步骤运行应用程序安装以下工具git克隆npm install -g打字稿npm install -g tsd cd ngCordova-typescript-demo npm安装凉亭安装tsd...
#ionic-tutorial-tabs 此代码是有关如何使用收藏夹重复分组项目的教程的一部分。 在此处阅读教程: 有关Ionic的更多教程,请查看我的博客 。
由于国内下载ionic3资源有时候会有错误产生,所以准备一份已经下载好的demo提供给大家下载!
这是一个封装好的ionic日期选择器,下载解压,点击date.html即可查看效果。
Ionic 5免费入门教程 享受这个免费的ionic 5入门应用程序,其中展示了Ionic 5的一些新功能 关于此离子演示 此仓库是我们在帖子中创建的Ionic 5入门应用程序的代码:Ionic 5 。 在这篇文章中,我们解释了如何利用...
使用ionic实现的聊天界面ui,包括:单聊,群组,个人中心,发送邮件,登陆和注册。
ionic 跨平台开发技术实例讲解