初步认识了解 Angularjs学习笔记1
什么是 Angularjs ？
AngularJS 最初由 Misko Hevery 和 Adam Abrons 于 2009 年开发，后来成为了 Google 公司的项目。AngularJS 弥补了 HTML 在构建应用方面的不足，其通过使用标识 符（directives）结构，来扩展 Web 应用中的 HTML 词汇，使开发者可以使用 HTML 来声 明动态内容，从而使得 Web 开发和测试工作变得更加容易。
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 lang="en"> <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>
{{name}}
</div> </body> </html>
5. Angularjs 中常用名词 也就是所说的常用指令
HTML5 允许扩展的（自制的）属性，以 data- 开头。 AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效
俗话说 下面的指令可以在开头加上 data- 例如 ng_app 等同于 data _ng_app
5.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 元素到应用程序数据
<!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。
5.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>
5.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 上，来达到双向你绑定。
实例讲解：
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性：$scope.person。
person 对象有两个属性：firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<script type="text/javascript" src="../angular/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="namesController">
{{firstName+" "+lastName}}
</div>
<div ng-controller="ageController">
{{age1+" "+age2+" "+age3}}
</div>
<div ng-controller="objectController">
{{person[0].name}}
<ul>
<li ng-repeat="x in person">{{x.name+" "+x.age}}</li>
</ul>
</div>
<div -controller="personController">
名: <input type="text" ng-model="person.firstName">{{person.firstName}}<br>
姓: <input type="text" ng-model="person.lastName">{{person.lastName}}<br>
<br> 姓名: {{person.fullName()}}
<!--姓名这个不好使-->
</div>
</div>
<script>
var myapp = angular.module("myApp", []);
myapp.controller("namesController", function ($scope) {
$scope.firstName = "张三";
$scope.lastName = "李四";
});
myapp.controller("ageController", function ($scope) {
$scope.age1 = "25";
$scope.age2 = "26";
$scope.age3 = "27";
});
myapp.controller("objectController", function ($scope) {
$scope.person = [
{"name": "赵信", "age": 26},
{"name": "韩愈", "age": 79},
];
});
myapp.controller("personController", function ($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe",
fullName: function () {
var x = $scope.person;
return x.firstName + " " + x.lastName;
}
};
}
);
</script>
</body>
</html>
8. Angularjs $http 请求数据
8.1. get 请求
10httpget .html，其中参数部分可以省略，但是参数的名字必须叫做params，.error部分也可以省略
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="../../angular/angular.min.js"></script> 7 </head> 8 <body> 9 <div ng-app="myApp"> 10 <div ng-controller="customersCtrl"> 11 <span ng-bind="id"></span> 12 <span ng-bind="name"></span> 13 <span ng-bind="age"></span> 14 </div> 15 </div> 16 <script> 17 var myapp = angular.module("myApp", []); 18 myapp.controller("customersCtrl",function($scope,$http){ 19 $http.get("http://localhost/phonegap/01/10http/Access.php",{params:{"id":5}}).success(function(response){ 20 $scope.id=response.id; 21 $scope.name=response.name; 22 $scope.age=response.age; 23 }).error(function(data){ 24 //错误代码 25 }); 26 }); 27 </script> 28 </body> 29 </html>
Access.php
1 <?php 2 header('Access-Control-Allow-Origin:*'); 3 $id=$_GET["id"]; 4 $a = array( 5 "id"=>$id, 6 "name" => "jerry", 7 "age" => 20, 8 "hobby" => "study" 9 ); 10 echo json_encode($a);
8.2 post 请求
11httppost.html
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>无标题文档</title> <script type="text/javascript" src="../../angular/angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="customersCtrl"> <span ng-bind="hobby"></span> </div> </div> <script> var myapp = angular.module("myApp", []); myapp.controller("customersCtrl", function ($scope, $http) { var postData = {text: '这是 post 的内容'}; $http.post("http://localhost/phonegap/01/11httppost/Access.php", postData).success( function (response) { $scope.hobby = response.hobby; }).error(function (data) { //错误代码 }); }); </script> </body> </html>
Access.php
<?php header('Access-Control-Allow-Origin:*'); $postData=file_get_contents("php://input");//因为传入的是json格式的数据，不能用_POST[] $a = array( "hobby" => $postData ); echo json_encode($a);
8.3 jsonp（这里不太对额）
11httppost.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="../../angular/angular.min.js"></script> 7 </head> 8 <body> 9 <div ng-app="myApp"> 10 <div ng-controller="customersCtrl"> 11 <span ng-bind="hobby"></span> 12 </div> 13 </div> 14 <script> 15 var myapp = angular.module("myApp", []); 16 myapp.controller("customersCtrl", function ($scope, $http) { 17 $http.jsonp("http://localhost/phonegap/01/12httpJsonp/Access.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK").success( 18 function (response) { 19 console.log(response); 20 $scope.hobby = response.hobby; 21 }).error(function (data) { 22 //错误代码 23 }); 24 alert($scope.hobby); 25 }); 26 </script> 27 </body> 28 </html>
Access.php
1 <?php 2 header('Access-Control-Allow-Origin:*'); 3 4 5 $callback = $_REQUEST['callback']; 6 7 // Create the output object. 8 $output = array('a' => 'Apple', 'b' => 'Banana'); 9 10 //start output 11 if ($callback) { 12 echo $callback . '(' . json_encode($output) . ');'; 13 } else { 14 echo json_encode($output); 15 }
9. Angularjs 过滤器
AngularJS 过滤器
AngularJS 过滤器可用于转换数据：
向表达式添加过滤器
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
（下面的两个实例，我们将使用前面章节中提到的 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>
我的这部分代码练习如下：（filter：xxx 这种貌似有问题）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="../angular/angular.min.js"></script> 7 </head> 8 <body> 9 <div ng-app="myApp"> 10 <div ng-controller="demo"> 11 数量：<input type="number" ng-model="quantity"> 12 价格：<input type="number" ng-model="price"> 13 <!--转换成钱币--> 14 <p>总价 = {{ (quantity * price) | currency }}</p> 15 {{money|currency}} 16 </div> 17 <div ng-controller="demo1"> 18 <!--转换成大写--> 19 {{nameupper|uppercase}} 20 </div> 21 <div ng-controller="demo2"> 22 <!--转换成小写--> 23 {{namelower|lowercase}} 24 </div> 25 <div ng-controller="demo3"> 26 <!--向指令添加过滤器 过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。 orderBy 过滤器根据某个表达式排列数组： --> 27 <ul> 28 <li ng-repeat="x in names|orderBy:'country'"> 29 {{x.name+","+x.country}} 30 </li> 31 </ul> 32 </div> 33 <div ng-controller="demo4"> 34 <!--过滤输入 输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒 号和一个模型名称。 35 filter 过滤器从数组中选择一个子集： --> 36 <p><input type="text" ng-model="filtername"></p> 37 <ul> 38 <li ng-repeat="x in names|filter:filtername|orderBy:'country'"> 39 {{x.name+","+x.country}} 40 </li> 41 </ul> 42 </div> 43 </div> 44 <script> 45 var myapp = angular.module("myApp", []); 46 myapp.controller("demo", function ($scope) { 47 $scope.money = 22; 48 }); 49 myapp.controller("demo1", function ($scope) { 50 $scope.nameupper = "xiaoming"; 51 }); 52 myapp.controller("demo2", function ($scope) { 53 $scope.namelower = "DADa"; 54 }); 55 myapp.controller("demo3", function ($scope) { 56 $scope.names = [ 57 {name: "zhangsan", country: "Chinese"}, 58 {name: "lisi", country: "America"}, 59 {name: "zhaowu", country: "France"}, 60 ]; 61 }); 62 myapp.controller("demo4", function ($scope) { 63 $scope.names = [ 64 {name: "zhangsan", country: "Chinese"}, 65 {name: "lisi", country: "America"}, 66 {name: "zhaowu", country: "France"}, 67 ]; 68 }); 69 </script> 70 </body> 71 </html>
