AngularJS 学习笔记（一）--- 表达式和指令

注：最近实习的公司接手了一个17年的项目用到了 AngularJS ，让我去做一些东西，我想既然用到了那我就整理一下学习笔记吧，也算留个印象。但肯定比较粗糙，只是说怎么用，而不去深入探究原理机制

一、AngularJS 简介

AngularJS 是一个开发动态Web应用的 JavaScript 框架，扩展了 HTML 语法，并通过数据绑定和依赖注入减少了大量代码。我感觉在语法上跟 Vue 有一定的相似性，但也有很大的不同。最主要的是Module（模块）和Controller（控制器）的概念，模块定义了 AngularJS 应用范围，控制器用于控制 AngularJS 应用，控制器中用 js 代码书写页面逻辑，控制器中声明的变量，只能在模块限制的范围内使用。

二、AngularJS表达式

1、概念

AngularJS表达式的作用是把数据绑定到 HTML 上的，写在双大括号里面，双大括号放在 html 标签内。 AngularJS 的表达式与 JavaScript 表达式类似，可以包含变量、对象和运算符，包含运算符的表达式，会直接将运算结果显示出来，而不是显示表达式本身。常见的运算符有 + 、- 、*、 / ，可以实现数字的运算和字符串的拼接。

AngularJS 的表达式与 JavaScript 表达式不同的地方在于，前者不支持条件判断，循环，但是支持过滤器（后面会提到）。

2、案例

// 变量
<div>{{ num }}</div>
// 数字表达式
<div>{{ 1+2 }}</div>
// 字符串
<div>{{ firstName + " " + lastName }}</div>
// 对象
<div>{{ user.name }}</div>
// 数组
<div>{{ arr[2] }}</div>

三、 AngularJS 指令

1、概念

指令是用来扩展 HTML 属性的，都以 ng- 为前缀。AngularJS 内置了很多指令，可以实现各种功能，比如循环、数据绑定、初始化数据等等，除了内置的指令，你还可以通过 .directive 自定义指令，用来实现你想实现的功能。

2、常用指令

此处只列举一些常用的指令，全面详细的指令请去：https://www.runoob.com/angularjs/angularjs-reference.html

① ng-app

ng-app 指令定义了 AngularJS 应用程序的根元素，在网页加载完毕时会自动引导（自动初始化）应用程序，将特定Module绑定到根元素上。

<div ng-app="myApp">
    
</div>

② ng-controller

该指令用于绑定应用的控制器对象，在控制器中声明变量和函数。

<div ng-app="myApp" ng-controller="myCtrl">
    
</div>

③ ng-init

该指令用于初始化数据，但是实际工作做中通常是不会使用该指令的，通常是在控制器中初始化数据。这个地方将它点出来仅仅是因为在讲解其他指令的时候，会经常用到，比较方便。

<div ng-app="" ng-init="a=12138">
    <p>{{a}}</p>
</div>

④ ng-model

该指令将数据绑定到表单元素中，对普通元素无效，只能实现双向绑定，表单的内容发生改变，绑定的数据也会相应变化。除此之外还可以用来提供类型验证、数据状态等。相当于Vue 的 v-model 。

<div ng-app="" ng-init="quantity=1;price=5">   
数量： <input type="number"    ng-model="quantity">
价格： <input type="number" ng-model="price">
<p>总价 {{ quantity * price }}</p>
</div>

⑤ ng-repeat

该指令用于循环一个数组，重复某个html元素，数组中的每一项都会对应复制一次 HTML元素，HTML 元素的个数取决于数组的长度，相当于 Vue 的 v-for 。

<div ng-app="" ng-init="arr=[1,2,3]">
  <ul>
    <li ng-repeat="item in arr">
      {{ item }}
    </li>
  </ul>
</div>

// 对象类型的数组也可
<div ng-app="" ng-init="arr=[
                        {name: 'a'},
                        {name: 'b'},
                        {name: 'c'}]">
  <ul>
    <li ng-repeat="item in arr">
      {{ item.name }}
    </li>
  </ul>
</div>

⑥ ng-bind

该指令用于将数据动态绑定到普通元素上，不能用于表单元素，是应用程序单向的渲染数据到元素上。作用与 {{}} 相同，但推荐使用ng-bind 。相当于 Vue 的 v-bind 。

<div ng-app="" ng-init="name='Tom'">   
	<span ng-bind="name"></span>
</div>

⑦ 自定义指令

自定义指令是通过 .directive 函数来添加的，命名时通常以驼峰命名法进行命名。自定义指令的调用方法有很多种：元素、属性、类名、注释。我们可以通过自定义指令的 restrict 属性来限制其调用方式，restrict 的值有：E – 作为元素使用、A – 作为属性使用、C – 作为类名使用、M 作为注释使用，默认值为 EA ，可以给 restrict 赋多个值。

也可以同时创建多个自定义指令，只需要多次调用 .directive 函数即可。

<body ng-app="myApp">
// 以元素的形式调用
<runoob-directive></runoob-directive>
// 以属性的形式调用
<div runoob-directive></div>
</body>
<script>
var app = angular.module("myApp", [])
.directive("runoobDirective", function() {
    return {
        // 此时restrict 为默认值 EA
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

// 以类名的形式调用
<body ng-app="myApp">
<div class="runoob-directive"></div>
</body>
<script>
var app = angular.module("myApp", [])
.directive("runoobDirective", function() {
    return {
        //  必须设置 restrict 的值为 "C" 才能通过类名来调用指令。
        restrict : "C",
        template : "<h1>自定义指令!</h1>"
    };
});
</script> 

// 以注释的形式调用
<body ng-app="myApp">
<!-- directive: runoob-directive -->
</body>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        // 必须设置 restrict 的值为 "M" 才能通过注释来调用指令
        restrict : "M",
        // 必须设置 replace 的值为 "true" 才能看见指令的内容
        replace : true,
        template : "<h1>自定义指令!</h1>"
    };
});
</script>

// 创建多个自定义指令
<script>
angular.module('myApp', [])
    .directive('first', [ function(){
    return {
        restrict: 'AE', 
        template: 'first name:{{name}}'
    };
}])
    .directive('second', [ function(){
    return {
        scope: {}, // 创建指令自己的独立作用域，与父级毫无关系
        controller: function($scope) {
          $scope.name="YiMing"
        },
        restrict: 'AE', 
        template: 'second name:{{name}}'
    };
}])
</script>

⑧ ng-change

该指令定义在元素内容改变的时候要执行的程序。

⑨ ng-click

该指令定义元素被点击时要执行的程序。

⑩ ng-class

该指令用于给 HTML 元素动态绑定一个或多个 CSS 类，值可以是字符串、对象或者数组。如果是字符串，多个类名使用空格分隔。如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加。如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。