初次学习AngularJS

一、指令
1.AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-。
ng-app 指令初始化一个 AngularJS 应用程序。
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导(自动初始化)应用程序。
稍后您将学习到 ng-app 如何通过一个值(比如 ng-app="myModule")连接到代码模块。

2.ng-init 指令初始化应用程序数据。
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。

3.ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以:
为应用程序数据提供类型验证(number、email、required)。
为应用程序数据提供状态(invalid、dirty、touched、error)。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
表达式{{表达式}}
实例




在输入框中尝试输入:


姓名:


你输入的为: {{ firstName }}


//与表达式效果是一样的



4.ng-repeat 指令会重复一个 HTML 元素:
ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。
html 属性赋值有data
angular 兼容就在前面加了(data)之后变成data-ng-repeat
实例


使用 ng-repeat 来循环数组




  • {{ x }}


二、AngularJS 控制器
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
实例:




名:

姓:



姓名: {{person.firstName + " " + person.lastName}}





AngularJS 应用程序由 ng-app 定义。应用程序在
内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性:$scope.person。
person 对象有两个属性:firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

三、AngularJS 过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
1.向表达式添加过滤器


姓名为 {{ person.lastName | uppercase }}



2.向指令添加过滤器
实例

循环对象:




  • {{ x.name + ', ' + x.country }}


四、AngularJS XMLHttpRequest
1.AngularJS $http
AngularJS $http 是一个用于读取web服务器上数据的服务。
$http.get(url) 是用于读取服务器数据的函数。
实例:




  • {{ x.Name + ', ' + x.Country }}




AngularJS 应用通过 ng-app 定义。应用在
中执行。
ng-controller 指令设置了 controller 对象 名。
函数 customersController 是一个标准的 JavaScript 对象构造器。
控制器对象有一个属性: $scope.names。
$http.get() 从web服务器上读取静态 JSON 数据。
服务器数据文件为: http://www.runoob.com/try/angularjs/data/Customers_JSON.php。
当从服务端载入 JSON 数据时,$scope.names 变为一个数组。

五、AngularJS 表格
ng-repeat 指令可以完美的显示表格。
实例:












{{ x.Name }} {{ x.Country }}





六、AngularJS SQL
实例:







{{ x.Name }} {{ x.Country }}


七、AngularJS HTML DOM
1.ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
实例:






按钮



ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容(value)。
2.ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。
实例:




我是可见的。


我是不可见的。






3.隐藏 HTML 元素
ng-hide 指令用于设置应用的一部分 不可见 。
ng-hide="true" 让 HTML 元素 不可见。
ng-hide="false" 让元素可见。

八、AngularJS HTML 事件
ng-click 指令
ng-click 指令定义了一个 AngularJS 单击事件。
实例:





{{ count }}






九、AngularJS 模块
1.模块定义应放置在何处?
对于 HTML 应用程序,通常建议把所有的脚本都放置在 元素的最底部。
这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。
在上面的多个 AngularJS 实例中,您将看到 AngularJS 库是在文档的 区域被加载。
在上面的实例中,AngularJS 在 元素中被加载,因为对 angular.module 的调用只能在库加载完成后才能进行。
另一个解决方案是在 元素中加载 AngularJS 库,但是必须放置在您的 AngularJS 脚本前面:
实例:




{{ firstName + " " + lastName }}





2.AngularJS 应用程序文件
现在您已经知道模块是什么以及它们是如何工作的,现在您可以尝试创建您自己的应用程序文件。
您的应用程序至少应该有一个模块文件,一个控制器文件。
首先,创建模块文件 "myApp.js":
var app = angular.module("myApp", []);
然后,创建控制器文件。本实例中是 "myCtrl.js":
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
最后,编辑您的 HTML 页面:
实例:




{{ firstName + " " + lastName }}





十、AngularJS 表单
HTML 控件
以下 HTML input 元素被称为 HTML 控件:
input 元素
select 元素
button 元素
textarea 元素
实例:



First Name:



Last Name:







form = {{user}}

//显示变化的值

master = {{master}}

//显示原始的值


十一、AngularJS 输入验证
实例:



验证实例


name="myForm" novalidate>

Username:



Username is required.


Email:



Email is required.
Invalid email address.



ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">







AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性: user 和 email。
我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。

十二、AngularJS Bootstrap
如果站点在国内,建议使用百度静态资源库的Bootstrap,代码如下:

实例:







用户列表

















编辑


{{ user.fName }} {{ user.lName }}





创建新用户:


编辑用户:



































1.指令解析
AngularJS 指令 描述
元素定义一个应用(未命名)
元素定义一个控制器
元素中。



Create New User:


Edit User:






























十四、AngularJS 应用程序
实例:




我的笔记







剩下的字符数:







应用程序文件 "myTodoApp.js":
var app = angular.module("myTodoApp", []);
控制器文件 "myTodoCtrl.js":
app.controller("myTodoCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message="";};
$scope.save = function() {$scope.message="";};
});

 

来源于:http://www.runoob.com/angularjs/angularjs-tutorial.html

转载于:https://www.cnblogs.com/annabook/p/4651739.html

你可能感兴趣的:(javascript,json,php)