AngularJS 学习笔记

weixin_43571751

于 2020-08-15 23:32:55 发布

阅读量214

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43571751/article/details/108025109

版权

本文详细介绍了AngularJS的基本概念，包括模块、$scope、控制器、表达式和过滤器的使用。深入探讨了$rootScope、scope的继承性、如何获取DOM上的scope以及哪些指令会创建子scope。此外，还讲解了控制器的作用、表达式与JS表达式的差异以及如何使用$eval()。在过滤器部分，介绍了内置过滤器和自定义过滤器的使用方法。进一步，文章阐述了AngularJS的内置指令，包括它们的特点、用法和常见内置指令。最后，探讨了AngularJS的进阶内容，如指令的编译过程和自定义指令的创建，详细解析了指令的配置选项，如restrict、template、templateUrl、scope等属性。

摘要由CSDN通过智能技术生成

AngularJS的基本概念

模块

什么是模块

模块是一个存放应用各个部件的容器。例如：controller、directives、filters、services。

AngularJS主要是使用模块声明的方式启动应用的，类似于main方法作用。

定义模块

引入angular.min.js后，就会在全局变量中注册一个angular全局变量。然后可以使用angular.module(“模块名”, [其他模块1, 其他模块2,其他模块3…])；

// 定义模块
var app = angular.module("app", []);

获取一个模块

angular.module()方法只传入一个字符串参数的话，就是获取该模块实例。

// 获取模块
var app1 = angular.module("app1");

依赖其他模块

如果A模块中定义了一个指令，B模块中不想重复定义指令，则需要依赖于A模块。
通过angular.module()方法的第二个参数指定当前模块依赖的其他模块。

// 获取模块
var app1 = angular.module("模块名", [其他模块1, 其他模块2,其他模块3...])；

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="lib/angular.min.js"></script>
    <script type="application/javascript">
        // app1定义指定hello
        var app1 = angular.module("app1", []);
        app1.directive("hello", function () {
   
            return {
   
                restrict: 'A',
                replace: true,
                template: '<div>hello module</div>'
            }
        });
        // myapp依赖app1
        var myapp = angular.module("myapp", ["app1"]);
    </script>
</head>

<body>
    <!--myapp作用域中使用app1定义的指令-->
    <div hello></div>
</body>
</html>

在这里插入图片描述

$scope

$scope是AngularJS的核心。

$scope是什么

$scope是实质上是一个普通的js对象。

$scope的作用

$s c o p e 是一个作用域，是 A n g u l a r J S 表达式的执行环境，表达式中的变量值都是从表达式所在的作用域$ scope对象上获取到的。
$scope是视图和控制器之间的胶水，是AngularJS实现MVC和双向绑定的基础。
$s c o p e 提供了一些方法：$ watch()方法用来监控数据模型的变化；$apply()方法用来将数据模型的变化更新到视图上去。

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="lib/angular.min.js"></script>
    <script type="application/javascript">
        var app = angular.module("app", []);
        app.controller("myController", function ($scope) {
   
            $scope.greeting = {
   
                text: "hello angular"
            };
            // 通过$watch监控greeting.text
            $scope.$watch("greeting.text", function (newVal, oldVal) {
   
                console.log("newVal:" + newVal);
                console.log("oldVal:" + oldVal);
            })
        });
    </script>
</head>
<body>
	<div ng-controller="myController">
	    <input type="text" ng-model="greeting.text">
	    	{
   {
    greeting.text }}
	</div>
</body>
</html>

在这里插入图片描述

$rootScope

$rootScope是应用启动时生成的，是一个特殊的scope，它是整个应用的根作用域。
$rootScope的作用域范围是ng-app指令所在标签的内部。
一个AngularJS应用只有一个$rootScope。

$scope的树形结构

一个应用可以有多个作用域$scope，各个作用域对应一部分DOM。
$scope作用域是可以嵌套的。
当新的作用域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域变成一个跟DOM一样的树形结构。

$scope的继承性

子 $s c o p e 会继承父$ scope上的属性和方法。
$scope继承类似于js中的原型继承。
获取属性A的原理： AngularJS首先查找当前作用域$scope属性中叫A的属性。如果没找到，那就回继续向上层作用域搜索，直到找到或到根作用域为止。
给作用域设置属性greeting=‘aaa’ 的原理：AngularJS直接给 $s c o p e 添加一个$ scope.greeting='aaa’属性。
给作用域设置属性greeting.text=‘aaa’ 的原理：AngularJS首先查找当前作用域$scope属性中叫做greeting的属性，如果找到了就设置text属性。如果没找到就继续向上层作用域搜索，直到找到将值设置给找到的作用域对应的属性。

如何获取一个DOM上的$scope

通过angular.element()获取DOM元素，然后通过.scope()方法获取对应的$scope。

angular.element("#1").scope()

哪些指令会创建子$scope（子作用域）

ng-controller、ng-repeat、ng-switch、ng-view和ng-include都会创建子作用域，并继承父作用域的属性和方法。
通过directive()方法定义的指令，如果返回对象中配置了scope属性为对象时，创建了一个孤立的scope。

控制器

控制器是什么

AngularJS中的控制器实际就是一个JS函数。

控制器作用

控制器是MVC的组成部分，是视图和数据模型的桥梁。
控制器是实现业务逻辑的地方。控制器可以将一个独立的视图相关的业务逻辑封装在一个独立的容器函数中，便于后续维护。
可以在控制器中初始化作用域对象、事件函数。
创建控制器时同时给对应视图创建了一个子作用域$scope。

创建控制器

通过模块实例的controller()方法创建一个控制器。
通过ng-controller指令将控制器和视图关联起来。

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="lib/angular.min.js"></script>
    <script type="application/javascript">
        var app = angular.module("app", []);
        app.controller("myController", function ($scope) {
   
            $scope.greeting = {
   
                text: "hello angular"
            };
            // 定义事件函数
            $scope.reset = function () {
   
                $scope.greeting.text = "hello angular";
            }
        });
    </script>
</head>
<body>
<div ng-controller="myController">
    <input type="text" ng-model="greeting.text">
    <p>{
   {
    greeting.text }}</p>
    <button ng-click="reset()">重置</button>
</div>
</body>
</html>

在这里插入图片描述

表达式

表达式是什么

AngularJS表达式类似于JS的代码片段。
通常位于Html片段中，用于数据绑定，写在双大括号中如 { {AnglarJS}}。
下面是一些合法的表达式：
{ { 1+2 }}
{ { 3*10 | currency }}
{ { username }}

表达式与JS表达式的比较

AngularJS表达式与JS表达式不完全相同，AngularJS不会使用JS的eval()函数去执行AngularJS表达式。

除了一下几个区别外，其他情况可以认为AngularJS和JS表达式相同：

**属性表达式：**属性表达式对应的是当前作用域，而JS对应的是window对象。
**允许未定义值：**执行表达式时，AngularJS能够undefined或null，不想JS中会抛错。
**没有控制结构：**不能在AngularJS表达式中使用“条件判断”、“抛出异常”、“循环”等控制结构。
**过滤器：**可以通过过滤器来传递表达式的结果，例如：将日期对象转变成指定的阅读友好格式。

$eval()方法

AngularJS表达式一般都是写在HTML中，并用{ {}}包裹起来，这样AngularJS就会自动进行解析。如果表达式写在js中，那么就需要手动调用$eval()方法解析。

通过 $s c o p e .$ eval(表达式)来手动解析，并且表达式中属性对应的作用域就是$scope。

$scope.greeting = {
   
    a: 10,
    b: 5
};
console.log($scope.$eval("greeting.a + greeting.b"));

过滤器

过滤器是什么

AngularJS过滤器就是按照指定格式将输入数据格式化后展示给用户。
AngularJS过滤器分为内置过滤器和自定义过滤器两种，两种过滤器使用方法完全一样。

如何使用过滤器

AngularJS过滤器有两种使用方法：在表达式中使用过滤器和在JS中使用过滤器。

表达式中使用过滤器

在html中，{ { }}内通过“|”调用过滤器。

"|“符号前面是要进行格式化的AngularJS表达式，”|"后面是采用的过滤器名称。
如果需要传递参数给过滤器，只要在过滤器名字后面加冒号“:”后写参数；如果有多个参数，则一次给参数后加冒号：{ {expression | filter2：参数1：参数2}}。

  // 即从字符串的第1个位置开始截取，截取2个字符输出。
  {
   {
    "ABCDEFG" | limitTo:2:1}}

如果有多个过滤器，则使用“|”来分割多个过滤器。{ { expression | filter1 | filter2 }}。

  // 即从字符串的第1个位置开始截取，截取2个字符输出。
  {
   {
    "abcded" | limitTo:2:1 | uppercase }}

JS中使用过滤器

使用AngularJS提供的$filter服务来调用过滤器。

通过依赖注入的方式将$filter注入到控制器中；
使用$filter服务的语法格式：
$filter(过滤器名称)(表达式，参数); 例如：

	$filter("date")(new Date(), "yyyy-MM-dd");

app.controller("myController", function ($scope, $filter) {
   
    $scope.greeting = {
   
        time: new

最低0.47元/天解锁文章

weixin_43571751

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS 学习笔记

AngularJS的基本概念模块什么是模块模块是一个存放应用各个部件的容器。例如：controller、directives、filters、services。AngularJS主要是使用模块声明的方式启动应用的，类似于main方法作用。定义模块引入angular.min.js后，就会在全局变量中注册一个angular全局变量。然后可以使用angular.module(“模块名”, [其他模块1, 其他模块2,其他模块3…])；// 定义模块var app = angular.module(
复制链接

扫一扫

专栏目录