- 浏览: 2550905 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
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 1260ionic UI(4)ionic2 framework - b ... -
ionic UI(3)TypeScript - handbook
2016-03-22 23:21 634ionic UI(3)TypeScript - handboo ... -
Parse and Heroku Service(3)Parse Server and Parse Dashboard
2016-03-22 06:30 965Parse and Heroku Service(3)Pars ... -
Parse and Heroku Service(2)Mail Templates and Push Notification
2016-03-22 02:45 581Parse and Heroku Service(2)Mail ... -
ionic UI(1)Introduction
2016-03-19 03:18 722ionic UI(1)Introduction 1 Inst ... -
Parse and Heroku Service(1)Heroku Installation and Play
2016-03-19 00:13 822Parse and Heroic Service(1)Hero ... -
Hybrid(5)Customize Meteor Directly Google Login
2015-09-01 02:33 910Hybrid(5)Customize Meteor Direc ... -
Hybrid(4)Favorite Places - Google Login
2015-09-01 02:02 1341Hybrid(4)Favorite Places - Goog ... -
Hybrid(3)More Meteor Example - Social
2015-08-11 05:04 755Hybrid(3)More Meteor Example - ... -
Hybrid(2)meteor Running Android and iOS
2015-07-28 23:59 1048Hybrid(2)meteor Running Android ... -
Create the Google Play Account
2015-07-18 06:42 1101Create the Google Play Account ... -
Secure REST API and Mobile(1)Document Read and Understand OAUTH2
2015-07-14 00:36 763Secure REST API and Mobile(1)Do ... -
Screen Size and Web Design
2015-07-11 01:11 724Screen Size and Web Design iPh ... -
Hybrid(1)ionic Cordova meteor
2015-06-25 05:49 470Hybrid(1)ionic Cordova meteor ... -
Android Fire Project(1)Recall Env and Knowledge
2015-02-11 12:28 685Android Fire Project(1)Recall ... -
Android Content Framework(1)Concept
2014-06-14 13:54 1079Android Content Framework(1)Con ... -
Feel Android Studio(1)Install and Update Android Studio
2014-04-11 03:12 2028Feel Android Studio(1)Install a ... -
IOS7 App Development Essentials(2)iBeacon
2014-03-05 05:55 889IOS7 App Development Essentials ... -
IOS7 App Development Essentials(1) Persistent Store
2014-03-05 05:54 1326IOS7 App Development Essentials ... -
Mobile Jquery(5)Update and Know about Express
2014-01-30 06:33 1262Mobile Jquery(5)Update and Know ...
相关推荐
Ionic 5免费入门教程 享受这个免费的ionic 5入门应用程序,其中展示了Ionic 5的一些新功能 关于此离子演示 此仓库是我们在帖子中创建的Ionic 5入门应用程序的代码:Ionic 5 。 在这篇文章中,我们解释了如何利用...
在本教程中,我们将深入探讨如何在Ionic框架中利用UI Router进行有效的页面导航和状态管理。Ionic是一款基于Angular的开源框架,专为构建移动应用而设计。它提供了丰富的UI组件和强大的导航系统,使得开发者可以轻松...
Ionic Deploy是Ionic Framework的一部分,它提供了一个便捷的解决方案,让开发者可以轻松地将应用程序的新版本推送到用户的设备上,而无需用户手动更新应用。这对于快速迭代和修复bug尤其有用。 ### 2. 安装Ionic ...
在 ( )的基础上,我们学习如何将Django项目与Ionic Framework集成。 拉这个项目? 安装节点包 $ mkdir tryIonic $ cd try Ionic $ mkdir cfeApp $ cd cfeApp $ git clone ...
Ionic提供了丰富的UI组件,如卡片、表单和按钮,这些都是构建CRUD应用的基础。在`src/app`目录下,你可以找到主要的组件文件,如`app-home.ts`和`app-home.html`。根据需要添加和自定义这些组件,以实现创建、读取、...
建立您的第一个Ionic应用程序:图库(Ionic Angular和电容器) 通过构建一个可以在iOS,Android和Web上运行的照相馆应用程序-仅使用一个代码库,即可开始使用Ionic。 这是引用的完整项目。 遵循以创建完整的CRUD...
本文将深入探讨如何使用Ionic 4、Angular 7和Cordova构建一个CRUD(创建、读取、更新、删除)移动应用。这个教程基于提供的"ionic4-angular7-example"源代码,适合对移动开发感兴趣并有一定前端技术基础的开发者。 ...
离子Wordpress Starter应用程序让我们使用Wordpress REST API为您的Wordpress网站构建一个Ionic应用程序! 本离子教程将向您展示如何与WP API进行通信,以获取您的Wordpress帖子,类别,评论。 我们还使用JWT添加了...
该存储库是有关Google Maps的离子教程的一部分! 在这个离子应用程序示例中,我们将讨论基于位置的应用程序时最重要的三个功能Google地图,地理位置和Google地方信息合并为一个功能简单且易于理解的示例...ionic serve
实时天气长达14天的天气预报历史天气信息天文学时区地理位置数据 屏幕截图 技术领域离子v5 角v11 离子/角度v5 离子存储角v3 Weatherstack气象API 设置要在localhost:// 8100上启动服务器,请输入:'ionic serve' ...
Ionic (JavaScript/TypeScript)** - **官方文档**:[Ionic Framework](https://ionicframework.com/docs) 提供了从安装配置到高级主题的全面文档,是学习Ionic的最佳起点。 - **教程资源**:[Ionic - Building ...
onicイティブアプリ风ウェブアプリをIonicで作ってみる(完全入门编) 元记事はこちらになります。 ここでは,ソースコードを公开しています。 ここから新规登录,利用ができます。 01-离子纯 HTML / JavaScript和...