Angular基础知识

时间:2021-05-29 16:57:04

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 ng-directives 扩展了 HTML。

The ng-app 定义 AngularJS 应用程序.(ng-app指令标记了AngularJS脚本的作用域

The ng-model 将 HTML 控件 (输入、 选择、 文本区域) 的值绑定到应用程序数据。.

The ng-bind 将应用程序数据绑定到 HTML 视图。.

1. AngularJS 表达式

1.1  AngularJS 指令是以 ng 作为前缀的 HTML 属性。AngularJS 使用 表达式 把数据绑定到 HTML。

1.2  ng-init 指令初始化 AngularJS 应用程序变量。(HTML5 允许扩展的(自制的)属性,以 data- 开头。
AngularJS 属性以 ng- 开头,可以使用 data-ng- 来让网页对 HTML5 有效。)

1.3  AngularJS 表达式写在双大括号内:{{ expression }}

1.4 AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

2. AngularJS 指令

2.1 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

ng-model 指令把应用程序数据绑定到 HTML 元素。

2.2 重复 HTML 元素

ng-repeat 指令会重复一个 HTML 元素.

通常情况下,不使用 ng-init。而是使用一个控制器或模块来代替它。

3. AngularJS 控制器

3.1 AngularJS 应用程序被控制器控制。

ng-controller 指令定义了应用程序控制器。

控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。

控制器的 $scope 是控制器所指向的应用程序 HTML 元素。

ex:

<!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.firstName + " " + person.lastName}} </div> <script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script> <script src="//www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script> </body>
</html>

3.2 ng-controller 指令把控制器命名为 object

函数 personController 是一个标准的 JavaScript 对象的构造函数

控制器对象有一个属性:$scope.person

person 对象有两个属性:firstName 和 lastName

ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

4. AngularJS 过滤器

4.1 过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。

4.2  uppercase 过滤器格式化字符串为大写

      lowercase 过滤器格式化字符串为小写

      currency 过滤器格式化数字为货币格式

     orderBy 过滤器根据某个表达式排列数组

5. AngularJS Http

5.1  $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。

<!DOCTYPE html>
<html>
<body> <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> <script src="http://apps.bdimg.com/libs/angular.js/1.2.15/angular.min.js"></script> </body>
</html>

6.AngularJS HTML DOM

6.1 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性

<div ng-app="">

<p>
<button ng-disabled="mySwitch">点我!</button>
</p> <p>
<input type="checkbox" ng-model="mySwitch">按钮
</p> </div>

ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。

ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容(value).

6.2 ng-show 指令隐藏或显示一个 HTML 元素。

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>

7. AngularJS HTML 事件

ng-click 指令定义了一个 AngularJS 单击事件

7.2  隐藏 HTML 元素

ng-hide 指令用于设置应用的一部分 不可见 。

ng-hide="true" 让 HTML 元素 不可见

ng-hide="false" 让元素可见。

<div ng-app="" ng-controller="personController">

<button ng-click="toggle()">隐藏/显示</button>

<p ng-hide="myVar">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</p> </div> <script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
$scope.myVar = false;
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
};
}
</script>

personController的第一部分与控制器章节类似。

应用有一个默认属性: $scope.myVar = false;

ng-hide 指令设置应用中的元素不可见。

toggle() 函数用于切换 myVar 变量的值(true 和 false)。

ng-hide="true" 让元素 不可见

8. AngularJS 模块

8.1 模块定义了应用程序,所有的控制器都应该属于一个模块,模块保持全局命名空间中的整洁。

8.2  常建议把所有的脚本都放置在 <body> 元素的最底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。