第二讲 html5框架+Crosswalk打包app 以及 Angularjs 基础（初步认识了解Angularjs）
来源：互联网 发布：什么是敏捷软件开发 编辑：程序博客网 时间：2024/04/29 13:38
第二讲 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
1. html5框架+Crosswalk打包app
2. 什么是Angularjs
AngularJS 最初由 Misko Hevery 和 Adam Abrons 于 2009 年开发，后来成为了
Google公司的项目。AngularJS
符（directives）结构，来扩展Web应用中的HTML词汇，使开发者可以使用HTML来声
明动态内容，从而使得Web开发和测试工作变得更加容易。
Misko Hevery
Angularjs 版本简介
https://github.com/angular/angular.js/releases/
AngularJS功能：
AngularJS 是专门为应用程序设计的HTML。
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
1
2 AngularJS 可以克隆和重复HTML 元素。
3 AngularJS 可以隐藏和显示HTML 元素。
4 AngularJS 可以在HTML 元素"背后"添加代码。
5 AngularJS 支持输入验证
Angularjs
1.MVC
2.模块化与依赖注入
3.双向数据绑定
4.指令与UI控件
3. 学Angularjs之前问什么要学ionic
1. AngularJs integrate-整合了AngularJs
2. Url routing，use AngularUI
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>
</head>
<body>
</body>
</html>
5. Angularjs中常用名词 也就是所说的常用指令
HTML5 允许扩展的（自制的）属性，以 开头。
AngularJS 属性以 开头，但是您可以使用 来让网页对 HTML5 有效
俗话说下面的指令可以在开头加上 data- 例如ng_app等同于 _ng_app
指令
ng_app
ng_bind
ng_click
ng_controller
ng_disabled
disabled 属性。
ng_init
ng_model
ng_repeat
ng_show
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）。
为应用程序数据提供状态（
为 HTML 元素提供
绑定 HTML 元素到
ng_bind指令
绑定
示例 1：
<!DOCTYPE html>
<html>
<body>
<div ng-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>
<div ng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
<script src="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。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。
<div ng-app="" ng-init="firstName='John'">
<p>姓名为<span ng-bind="firstName"></span></p>
</div>
3.data-指令 data-ng-init与ng-init等价
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为<span data-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>
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
AngularJS 数字
<div ng-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 数组
<div ng-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 = {
};
}
</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 = {
};
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
ng-repeat 指令结合 ng-controller
<div ng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
<script>
function namesController($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) {
$http post实例：
var postData={text:'这是post的内容'};
});
$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过滤器格式化字符串为大写：
<div ng-app="" ng-controller="personController">
<p>姓名为 {{ person.lastName | uppercase }}</p>
</div>
lowercase 过滤器格式化字符串为小写：
<div ng-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 过滤器根据某个表达式排列数组：
<div ng-app="" ng-controller="namesController">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒
号和一个模型名称。
filter 过滤器从数组中选择一个子集：
<div ng-app="" ng-controller="namesController">
<p>输入过滤：</p>
<p><input type="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 模块
1. 为什么要使用模块
控制器污染了全局命名空间
http://baike.baidu.com/view/4174721.htm
本教程中，截至目前为止的所有实例都使用了全局函数。
在所有的应用程序中，都应该尽量避免使用全局变量和全局函数。
全局值（变量或函数）可被其他脚本重写或破坏。
为了解决这个问题，AngularJS 使用了模块。
2. 普通的控制器 和 AngularJS 模块
AngularJS
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
function myCtrl($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
使用一个由 替代的控制器：
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-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.
现在您已经知道模块是什么以及它们是如何工作的，现在您可以尝试创建您自己的应用程序文件。
您的应用程序至少应该有一个模块文件，一个控制器文件。
首先，创建模块文件"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>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
感谢收看本次教程
本教程由 phonegap 中文网(phonegap100.com)
www.itying.com 提供
我是主讲老师： 树根
我的邮箱： phonegap100@qq.com
0 0
- 第二讲 html5框架+Crosswalk打包app 以及 Angularjs 基础（初步认识了解Angularjs）
- 第二讲 html5 框架+Crosswalk 打包 app 以及 Angularjs 基础
- AngularJS初步认识
- AngularJS 初步了解.docx
- AngularJs学习笔记__1、初步了解AngularJS
- AngularJS初步认识与学习
- AngularJs初步认识与学习
- AngularJS+Ionic+Cordova 初步认识
- AngularJs基础认识及应用
- Day 2: AngularJS —— 对AngularJS的初步认识
- 对AngularJs指令的初步认识
- 初步了解了angularJS的mvc
- AngularJs之helloWorld，初步了解control
- AngularJS------认识AngularJS
- angularjS 入门级教程 第二讲
- 认识AngularJS
- 认识AngularJs
- AngularJS创建应用- HTML5 移动框架
- 支持向量机SMO算法求解过程分析
- JAVA POST请求远程HTTP接口
- 比特币简介1
- android中不同类之间的数据通信之接口回调
- Linux驱动关联丢失处理
- 第二讲 html5框架+Crosswalk打包app 以及 Angularjs 基础（初步认识了解Angularjs）
- 简单的SQL语句汇总
- maven的私服搭建 Maven Nexus
- Linux Samba及NFS服务器搭建命令
- MapReduce基础开发之四参数传递
- 怎么在手机调用disable-web-security来访问跨域网页
- 论文阅读：Deep Relative Distance Learning: Tell the Difference Between Similar Vehicles
- php 初级函数
- 深入浅出：Linux设备驱动之中断与定时器
