AngularJS 1.x系列:AngularJS简介及第一个应用(2)

时间:2022-01-25 00:44:49

1. 安装AngularJS

1.1 AngularJS官网

  Github源码:https://github.com/angular/angular.js

  官网:https://angularjs.org/

1.2 npm安装AngularJS

npm install angular

2. AngularJS应用的构成元素

  ◊ 模型(Model):AngularJS应用中用于展示到页面的数据,本质是一个JavaScript对象。

  ◊ 视图(View):View是用户所看到的网页内容,View是AngularJS指令与表达式经过解析后的DOM元素

  ◊ 控制器(Controller):AngularJS中用于处理业务逻辑的JavaScript方法。

  ◊ 作用域(Scope):作用域可以理解为一个容器,在控制器(Controller)中可以访问这个容器(Scope),往容器中放入数据模型,在视图(View)中可以通过表达式将数据展现给用户。

  ◊ 指令(Directives):扩展的HTML属性或标签,能够被AngularJS框架识别,根据不同的指令执行相应的动作。

  ◊ 表达式(Expressions):用于向页面输出信息。

  ◊ 模板(Template):AngularJS以HTML作为模板语言,AngularJS模板时间是HTML片段。

3. AngularJS第一个应用

  示例:

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
{{"Hello AngularJS!"}}
</body>
</html>

  说明:<html>标签中ng-app是AngularJS的一个内置指令,可以出现在任意位置。

  ng-app两个作用:

  (1). 启动AngularJS框架;

  (2). AngularJS框架管理ng-app指令所在标签的开始标签到结束标签之间的所有DOM元素。

  {{}}:是AngularJS的表达式形式,由两个嵌套的大括号构成,大括号中间为表达式内容。AngularJS会对表达式内容进行解析,将表达式内容输出到浏览器。

4. AngularJS表达式

  AngularJS使用表达式把数据绑定到HTML。

4.1 表达式定义方式

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

4.2 表达式中的四则运算

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
四则运算:5 + 5 = {{ 5 + 5 }}
</body>
</html>

4.3 表达式中的逻辑运算

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
逻辑运算:true && false = {{ true && false }}
</body>
</html>

4.4 表达式与作用域

<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
<div ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
</body>
</html>

  ng-init指令:用于初始化作用域。

5. AngularJS数据绑定

  数据绑定是AngularJS框架在视图(View)与作用域(Scope)之间建立的数据同步机制。

5.1 双向绑定ng-model

  AngularJS双向绑定:View的操作能实时同步到Scope中,Scope中的数据修改能够实时回显到View中。

  ng-model 指令:用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。

  ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("HelloCtrl", function($scope) {
$scope.text = "Hello AngularJS!";
});
</script>
</head>
<body>
<div ng-controller="HelloCtrl">
<input type="text" ng-model="text" /></div>
</body>
</html>
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8" />
<script src="../lib/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name" />
{{ name }}
</body>
</html>

  :上例中ng-app指令用于启动AngularJS应用。当AngularJS遇到ng-app指令时,会创建$rootScope作用域,为AngularJS的根作用域。

  把ng-model制定作为属性添加到input标签中,AngularJS会在$rootScope作用域中添加属性。

  当input表单中输入内容发生变化时,AngularJS会自动把输入的内容同步到作用域的属性中。

  {{ name }}为AngularJS表达式形式,可以访问AngularJS作用域中的属性。AngularJS能够监控作用域中数据的变化,当数据发生变化时,页面实时更新显示内容。

5.2 单向绑定ng-bind

  ng-bind指令:实现作用域(Scope)到视图(View)的单向数据绑定,和表达式功能类似。

<div>{{ text }}</div>
<div ng-bind="text"></div>

  ng-bind与{{ expression }}区别:

  在使用AngularJS表达式{{ expression }}时,如果遇到网络问题,会导致AngularJS加载缓慢,浏览器会直接把AngularJS表达式当作字符串渲染到页面中。

  ng-bind指令在AngularJS没有加载完毕时不会解析执行,只有AngularJS加载完毕才会解析显示。

  推荐使用ng-bind指令。