注:最近实习的公司接手了一个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 时类才会被添加。如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象。