第二讲 html5 框架+Crosswalk 打包 app 以及 Angularjs 基础
第二讲 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 开发和测试工作变得更加容易。
MiskoHevery
Angularjs 版本简介
https://github.com/angular/angular.js/releases/
AngularJS 功能：
AngularJS 是专门为应用程序设计的 HTML。
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single PageApplications）变得更加容易。
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. AngularJsintegrate-整合了AngularJs
2. Url routing，use AngularUI Router
url 路由使用 AngularUI Router，可以指定不同的路由，方便开发和集成
3 . AngularJSExtensions & 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 中的哪一些部分
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>无标题文档</title>
<scripttype="text/javascript"src="angular-1.3.0.js"></script>
</head>
<body>
<div ng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text"ng-model="name"></p>
<png-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 的 disabled 属性。 |
HTML DOM |
|
ng_init |
为应用程序定义初始值。 |
指令 |
|
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>
<divng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text"ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
示例 2：{{}}等同于ng_bind
<!DOCTYPE html>
<html>
<body>
<divng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<inputtype="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
<scriptsrc="angular.min.js"></script>
</body>
</html>
实例讲解： 当网页加载完毕，AngularJS 自动开启。 ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的"所有者"。 ng-model 指令把输入域的值绑定到应用程序变量 name。 ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
2. ng_init
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。 通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。
<divng-app="" ng-init="firstName='John'">
<p>姓名为 <spanng-bind="firstName"></span></p>
</div>
3.data-指令 data-ng-init与ng-init等价
<divdata-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <spandata-ng-bind="firstName"></span></p>
</div>
6. Angularjs 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName +" " + lastName }}
<!DOCTYPE html>
<html>
<body>
<divng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
<scriptsrc="angular.min.js"></script>
</body>
</html>
AngularJS 数字
<divng-app="" ng-init="quantity=1;cost=5">
<p>总价： {{ quantity *cost }}</p>
</div>
AngularJS 字符串
|
<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>姓名： {{ firstName + " " + lastName }}</p> </div> |
AngularJS 对象
|
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>姓为 {{ person.lastName }}</p> </div> |
AngularJS 数组
<divng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2]}}</p>
</div>
7. Angularjs 控制器
AngularJS控制器 控制 AngularJS 应用程序的数据。
AngularJS控制器是常规的 JavaScript 对象。
AngularJS 应用程序被控制器控制。
ng-controller指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
angular中$scope 是连接 controllers(控制器)和templates(模板 view/视图)的主要胶合体。
我们可以把我们的 model 存放在 scope 上，来达到双向你绑定。
|
<!DOCTYPE html> <html> <body> <div ng-app=""> <div ng-controller="personController"> 名: <input type="text" ng-model="person.firstName"><br> 姓: <input type="text" ng-model="person.lastName"><br> <br> 姓名: {{person.firstName + " " + person.lastName}} </div> </div> <script> function personController($scope) { //不建议这样写 $scope.person = { firstName: "John", lastName: "Doe" }; } </script> <script src="angular.min.js"></script> </body> </html> |
|
|
实例讲解：
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。 ng-controller 指令把控制器命名为 object。 函数 personController 是一个标准的 JavaScript 对象的构造函数。 控制器对象有一个属性：$scope.person。
person 对象有两个属性：firstName 和 lastName。 ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
|
<!DOCTYPE html> <html> <body> <div ng-app="" ng-controller="personController"> 名: <input type="text" ng-model="person.firstName"><br> 姓: <input type="text" ng-model="person.lastName"><br> <br> 姓名: {{person.fullName()}} </div> <script> function personController($scope) { $scope.person = { firstName: "John", lastName: "Doe", fullName: function() { var x = $scope.person; return x.firstName + " " + x.lastName; } }; } </script> |
<scriptsrc="angular.min.js"></script>
</body>
</html>
ng-repeat 指令结合 ng-controller
<divng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<scriptsrc="namesController.js"></script>
<script>
functionnamesController($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
}
</script>
8. Angularjs $http 请求数据
1. get 请求
|
<div ng-app="" ng-controller="customersController"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </div> <script> function customersController($scope,$http) { $http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php") .success(function(response) {$scope.names = response;}); } </script> |
$http get 实例 1：
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php").success(function
(response){$scope.names = response;});
$http get 实例 2：
$http.get(url,{params:{id:'5'}}).success(function(response) {
$scope.names = response;
}).error(function(data){
//错误代码
});
$http post 实例：
|
var postData={text:'这是 post 的内容'}; var config={params:{id:'5'}} $http.post(url,postData,config) .success(function(response) { $scope.names = response; }).error(function(data){ //错误代码 |
});
$http Jsonp 实例：
|
myUrl = "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_ CALLBACK"; $http.jsonp(myUrl).success( function(data){ $scope.portalcate = data.result; } ).error(function(){ alert('shibai'); });
|
9. Angularjs 过滤器
AngularJS 过滤器
AngularJS 过滤器可用于转换数据：
|
过滤器 |
描述 |
|
currency |
格式化数字为货币格式。 |
|
filter |
从数组项中选择一个子集。 |
|
lowercase |
格式化字符串为小写。 |
|
orderBy |
根据某个表达式排列数组。 |
|
uppercase |
格式化字符串为大写。 |
向表达式添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
（下面的两个实例，我们将使用前面章节中提到的 person 控制器） uppercase 过滤器格式化字符串为大写：
<divng-app="" ng-controller="personController">
<p>姓名为 {{ person.lastName | uppercase }}</p>
</div>
lowercase 过滤器格式化字符串为小写：
<divng-app="" ng-controller="personController"">
<p>姓名为 {{ person.lastName | lowercase }}</p>
</div>
currency 过滤器
currency 过滤器格式化数字为货币格式：
|
<div ng-app="" ng-controller="costController"> 数量：<input type="number" ng-model="quantity"> 价格：<input type="number" ng-model="price"> <p>总价 = {{ (quantity * price) | currency }}</p> </div> |
向指令添加过滤器 过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
orderBy 过滤器根据某个表达式排列数组：
<divng-app="" ng-controller="namesController">
<p>循环对象：</p>
<ul>
<ling-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country}}
</li>
</ul>
<div>
过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：
<divng-app="" ng-controller="namesController">
<p>输入过滤：</p>
<p><inputtype="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name |orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country}}
</li>
</ul>
</div>
10. Angularjs 模块
为什么要使用模块
控制器污染了全局命名空间
http://baike.baidu.com/view/4174721.htm
本教程中，截至目前为止的所有实例都使用了全局函数。 在所有的应用程序中，都应该尽量避免使用全局变量和全局函数。 全局值（变量或函数）可被其他脚本重写或破坏。
为了解决这个问题，AngularJS 使用了模块。
普通的控制器 和 AngularJS 模块
AngularJS 普通的控制器
<!DOCTYPE html>
<html>
<body>
<divng-app="" ng-controller="myCtrl">
{{ firstName + "" + lastName }}
</div>
<script> function myCtrl($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}
</script>
<scriptsrc="angular.min.js"></script>
</body>
</html>
使用一个由 模块 替代的控制器：
<!DOCTYPE html>
<html>
<head>
<scriptsrc="angular.min.js"></script>
</head>
<body>
<divng-app="myApp" ng-controller="myCtrl">
{{ firstName + "" + lastName }}
</div>
|
<script> var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; }); </script> </body> </html> |
3. AngularJS 应用程序文件
现在您已经知道模块是什么以及它们是如何工作的，现在您可以尝试创建您自己的应用程序文件。 您的应用程序至少应该有一个模块文件，一个控制器文件。
首先，创建模块文件 "myApp.js"：
var app =angular.module("myApp", []);
然后，创建控制器文件。本实例中是 "myCtrl.js"：
app.controller("myCtrl",function($scope) {
$scope.firstName = "John";
$scope.lastName ="Doe";
});
最后，编辑 HTML 引入模块：
<!DOCTYPE html>
<html>
<body>
<divng-app="myApp" ng-controller="myCtrl">
{{ firstName + "" + lastName }}
</div>
<scriptsrc="angular.min.js"></script>
<scriptsrc="myApp.js"></script>
<scriptsrc="myCtrl.js"></script>
</body>
</html>
感谢收看本次教程
本教程由 phonegap 中文网(phonegap100.com) www.itying.com 提供 我是主讲老师： 树根
我的邮箱： phonegap100@qq.com
第二讲 html5 框架+Crosswalk 打包 app 以及 Angularjs 基础相关推荐
- 第二讲 html5框架+Crosswalk打包app 以及 Angularjs 基础（初步认识了解Angularjs）
第二讲 html5框架+Crosswalk打包app 以及 Angularjs 基 础(初步认识了解Angularjs) 学习要点: 1. html5框架+Crosswalk打包app 2. 什么是a ...
- AJAX培训第二讲：使用AJAX框架（上）
点击这里下载PDF文件. 点击这里下载示例文件. 点击这里下载视频文件. 相关内容:AJAX培训第二讲:使用AJAX框架(下) 首先向大家说声抱歉,离上次隔的时间实在太长.由于一度工作比较忙,所以录制 ...
- BrnShop开源网上商城第二讲：ASP.NET MVC框架
BrnShop开源网上商城第二讲:ASP.NET MVC框架 原文:BrnShop开源网上商城第二讲:ASP.NET MVC框架 在团队设计BrnShop的web项目之初,我们碰到了两个问题,第一个是 ...
- html5跨平台桌面打包,Html5到跨平台app应用
Html5到跨平台app应用 每一项新兴技术的出现和流行,都是为了规模化的去统一解决一系列复杂问题,APICloud选择混合开发方向,目的是希望借助HTML5降低app开发复杂度,提高app开发效率. ...
- 工具教程第二十一讲：比特儿交易平台APP的使用（一）
这里是王团长区块链学院,与最优秀的区块链人一起成长!今天给大家具体讲讲火币网交易平台APP如何使用. 点击观看视频教程:工具教程第二十一讲:比特儿交易平台APP的使用(一) 一.客户端下载: 登录比特 ...
- Java基础知识第二讲：Java开发手册/JVM/集合框架/异常体系/Java反射/语法知识/Java IO
Java基础知识第二讲(Java编程规范/JVM/集合框架/异常体系/Java反射/语法知识/Java IO/码出高效) 分享在java学习及工作中,常使用的一些基础知识,本文从JVM出发,讲解了JV ...
- 在线打包app平台以及流程平台分析（AndroidiOS）
移动互联网时代,我们需要为自己的业务.博客.产品或服务制作一款移动应用程序.但时常会面临人力.时间.金钱成本诸多障碍. 好消息是,现在进入移动市场不再一定需要数万或数十万的资金,也不需要几个月的研发打 ...
- 第二讲：Android系统构架分析和应用程序目录结构分析
2019独角兽企业重金招聘Python工程师标准>>> 本讲内容: Android系统构架简介 Android应用程序结构分析 点这里下载:Android学习指南第二讲源代码 一.A ...
- WebApp 安全风险与防护课堂（第二讲）开课了！
本文由葡萄城技术团队于原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 在昨天的公开课中,由于参与的小伙伴们积极性和热情非常高,我们的讲师Carl ...
最新文章
- 东 北 大 学计算机辅助设计,东北大学计算机辅助设计(B)
- 硬盘分区表知识——详解硬盘MBR(转)
- matlab条件判断配合输出
- 解密谷歌机器学习忍者项目，如此培养人工智能人才
- java中各种流的详细使用
- 【软件构造】第一章 软件构造基础（1）
- jzoj5097-[GDOI2017day1]取石子游戏【并查集,LCA】
- 三个不等_2道真题，讲透「基本不等式」的使用原则 | 真题精讲-11
- cookie与session原理详解
- 与context的关系_Android-Context
- 寻找连通域算法_FPGA实现的连通域识别算法升级
- iphonex价格_iPhone X竟然可以换LCD屏幕，价格只要一半
- 动态打印sql,服务报was not registered for synchronization because synchronization is not active
- 山东财经大学计算机体系结构考试题,2016年山东财经大学计算机科学与技术学院数据库系统原理与程序设计复试笔试仿真模拟题...
- 3D渲染和动画制作KeyShot Pro for mac
- yb3防爆电机型号含义_YBX3防爆电机
- siteserver模板html5,SiteServer CMS软件模板制作教程
- 数据分析越来越火，如何做一个靠谱的职业规划？
- 使用Python与Sharepoint进行交互——第2部分
- 雅典娜暴利烹饪系列（下）