ionic项目简介以及Angularjs 基础
2016-05-09 06:38
746 查看
第二讲 html5 框架+Crosswalk 打包 app 以及 Angularjs 基
础(初步认识了解 Angularjs)
学习要点:
1. html5
框架+Crosswalk
打包 app
2. 什么是
angularjs
3. Angularjs
之前问什么要学 ionic
4. 开发工具介绍以及
Hello Angular
5. Angularjs
中常用名词 也就是所说的常用指令
6. Angularjs
表达式
7. AngularJS
控制器
8. AngularJS $http
请求数据
9. AngularJS
过滤器
10. AngularJS 模块
主讲:(树根)
合作网站:www.phonegap100.com (PhoneGap 中文网)
合作网站:www.itying.com(IT
营)
1. html5 框架+Crosswalk 打包 app
2. 什么是 Angularjs
AngularJS 最初由 Misko Hevery 和 Adam Abrons
于 2009 年开发,后来成为了
Google 公司的项目。AngularJS 弥补了 HTML 在构建应用方面的不足,其通过使用标识符(directives)结构,来扩展
Web 应用中的
HTML 词汇,使开发者可以使用
HTML 来声明动态内容,从而使得 Web 开发和测试工作变得更加容易。
Misko Hevery
Angularjs 版本简介
https://github.com/angular/angular.js/releases/
AngularJS 功能:
AngularJS 是专门为应用程序设计的 HTML。
AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。
1 AngularJS 把应用程序数据绑定到 HTML
元素。
2 AngularJS 可以克隆和重复 HTML 元素。
3 AngularJS 可以隐藏和显示 HTML 元素。
4 AngularJS 可以在 HTML 元素"背后"添加代码。
5 AngularJS 支持输入验证
Angularjs 号称 下一代 web 应用 主要特性如下:
1.MVC
2.模块化与依赖注入
3.双向数据绑定
4.指令与 UI 控件
3. 学 Angularjs 之前问什么要学 ionic
1. AngularJs integrate-整合了 AngularJs
2. Url routing,use AngularUI Router
url 路由使用 AngularUI Router,可以指定不同的路由,方便开发和集成
3 . AngularJS Extensions & Directives 扩展了 AngularJS 指令
ion-tab, ion-content, ion-nav-view, ion-header
$ionicPopup,$ionicLoading, $ionicModal…
4. Hello Angular
Angularjs 资源:
http://Angularjs.org官方网站正常打不开
但是打不开 大家都懂的
http://www.angularjs.cn/
http://docs.angularjs.cn/api
http://www.ngnice.com/
https://github.com/angular
Angularjs 下载:
http://www.bootcdn.cn/angular.js/
通过 nodejs 下载:npm install angular
为了使用 Angular,所有应用都必须首先做两件事情
1. 下载加载 angular.js 库
2. 使用 ng-app 指令告诉 angular 应该管理
DOM 中的哪一些部分
<!DOCTYPE html> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title>
<script type="text/javascript" src="angular-1.3.0.js"></script> </head>
<body>
<div ng-app=""> <p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="name"></p> <p ng-bind="name"></p>
</div>
</body>
</html>
5. Angularjs 中常用名词 也就是所说的常用指令
HTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5
有效
俗话说 下面的指令可以在开头加上 data-
例如 ng_app 等同于 data _ng_app
ng_app:
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。
ng-model 指令:
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
为应用程序数据提供类型验证(number、email、required)。为应用程序数据提供状态(invalid、dirty、touched、error)。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng_bind 指令 等同于{{}}
绑定 HTML 元素到应用程序数据。
示例 1:
<!DOCTYPE html> <html>
<body>
<div ng-app="">
础(初步认识了解 Angularjs)
学习要点:
1. html5
框架+Crosswalk
打包 app
2. 什么是
angularjs
3. Angularjs
之前问什么要学 ionic
4. 开发工具介绍以及
Hello Angular
5. Angularjs
中常用名词 也就是所说的常用指令
6. Angularjs
表达式
7. AngularJS
控制器
8. AngularJS $http
请求数据
9. AngularJS
过滤器
10. AngularJS 模块
主讲:(树根)
合作网站:www.phonegap100.com (PhoneGap 中文网)
合作网站:www.itying.com(IT
营)
1. html5 框架+Crosswalk 打包 app
2. 什么是 Angularjs
AngularJS 最初由 Misko Hevery 和 Adam Abrons
于 2009 年开发,后来成为了
Google 公司的项目。AngularJS 弥补了 HTML 在构建应用方面的不足,其通过使用标识符(directives)结构,来扩展
Web 应用中的
HTML 词汇,使开发者可以使用
HTML 来声明动态内容,从而使得 Web 开发和测试工作变得更加容易。
Misko Hevery
Angularjs 版本简介
https://github.com/angular/angular.js/releases/
AngularJS 功能:
AngularJS 是专门为应用程序设计的 HTML。
AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。
1 AngularJS 把应用程序数据绑定到 HTML
元素。
2 AngularJS 可以克隆和重复 HTML 元素。
3 AngularJS 可以隐藏和显示 HTML 元素。
4 AngularJS 可以在 HTML 元素"背后"添加代码。
5 AngularJS 支持输入验证
Angularjs 号称 下一代 web 应用 主要特性如下:
1.MVC
2.模块化与依赖注入
3.双向数据绑定
4.指令与 UI 控件
3. 学 Angularjs 之前问什么要学 ionic
1. AngularJs integrate-整合了 AngularJs
2. Url routing,use AngularUI Router
url 路由使用 AngularUI Router,可以指定不同的路由,方便开发和集成
3 . AngularJS Extensions & Directives 扩展了 AngularJS 指令
ion-tab, ion-content, ion-nav-view, ion-header
$ionicPopup,$ionicLoading, $ionicModal…
4. Hello Angular
Angularjs 资源:
http://Angularjs.org官方网站正常打不开
但是打不开 大家都懂的
http://www.angularjs.cn/
http://docs.angularjs.cn/api
http://www.ngnice.com/
https://github.com/angular
Angularjs 下载:
http://www.bootcdn.cn/angular.js/
通过 nodejs 下载:npm install angular
为了使用 Angular,所有应用都必须首先做两件事情
1. 下载加载 angular.js 库
2. 使用 ng-app 指令告诉 angular 应该管理
DOM 中的哪一些部分
<!DOCTYPE html> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title>
<script type="text/javascript" src="angular-1.3.0.js"></script> </head>
<body>
<div ng-app=""> <p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="name"></p> <p ng-bind="name"></p>
</div>
</body>
</html>
5. Angularjs 中常用名词 也就是所说的常用指令
HTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,但是您可以使用 data-ng- 来让网页对 HTML5
有效
俗话说 下面的指令可以在开头加上 data-
例如 ng_app 等同于 data _ng_app
| 指令 | | 描述 | | 讲解 | | |||
| | | | ||||||
| | | | | | | | | |
| | ng_app | | | 定义应用程序的根元素。 | | 指令 | | |
| | | | | | ||||
| | | | | | | | | |
| | ng_bind | | | | 绑定 HTML 元素到应用程序数据。 | | 简介 | |
| | | | | | | |||
| | | | | | | | | |
| | | | | | | | | |
| | ng_click | | | 定义元素被单击时的行为。 | | HTML 事件 | | |
| | | | | | | | | |
| | | | | | | | | |
| | ng_controller | | | | 为应用程序定义控制器对象。 | | 控制器 | |
| | | | | | | |||
| | | | | | | | | |
| | | | | | | | | |
| | ng_disabled | 绑 定 应 用 程 序 数 据 到 HTML | 的 | HTML DOM | | |||
| | | | | disabled 属性。 | | | | |
| | | | | | | | | |
| | ng_init | | | bb43 为应用程序定义初始值。 | | | 指令 | |
| | | | | | ||||
| | | | | | | | | |
| | | | | | | | | |
| | ng_model | | | 绑定应用程序数据到 HTML 元素。 | | | 指令 | |
| | | | | | | | | |
| | ng_repeat | | | 为控制器中的每个数据定义一个模板。 | | 指令 | ||
| | | | | |||||
| | | | | | | | | |
| | | | | | | | | |
| | ng_show | | | 显示或隐藏 HTML 元素。 | | | HTML DOM | |
| | | | | | | | ||
1. ng_app | ng_bind ng_model {{}}案例演示 | | | | |
ng_app:
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。
ng-model 指令:
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
为应用程序数据提供类型验证(number、email、required)。为应用程序数据提供状态(invalid、dirty、touched、error)。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng_bind 指令 等同于{{}}
绑定 HTML 元素到应用程序数据。
示例 1:
<!DOCTYPE html> <html>
<body>
<div ng-app="">
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- JavaScript+html5 canvas制作的百花齐放效果完整实例
- jQuery+HTML5加入购物车代码分享
- jQuery mobile 移动web(6)