AngularJS 学习笔记（二）--- 模块、控制器和过滤器

努力的小朱同学

于 2021-07-22 15:19:27 发布

阅读量142

点赞数 1

分类专栏： angular 文章标签： angularjs

本文链接：https://blog.csdn.net/weixin_45092437/article/details/119000047

版权

angular 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了AngularJS中的核心概念：模块（Module）、控制器（Controller）、作用域（Scope）和过滤器（Filter）。模块用于组织应用程序，控制器负责数据处理，作用域作为数据绑定的桥梁，而过滤器则用于数据转换。文章通过实例展示了如何创建和使用这些概念，包括模块的依赖注入、控制器中定义变量和函数、作用域的层级结构以及过滤器的常见用法如货币格式化、日期格式化等。

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

一、模块 Module

1、概念

模块定义了一个应用程序，是控制器的容器，模块的范围限制了应用程序的作用范围。模块是配置代码块和运行代码块的集合，在启动阶段被执行。通过 angular.module 来创建模块。

模块创建时可以列出他所依赖的其他模块，同时意味着其他模块需要在当前模块之前加载完成前加载。即使有多个模块依赖于某个模块，那这个模块也只需要加载一次。

2、案例

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

<script>

var app = angular.module("myApp", ['依赖的模块']);

</script>

二、控制器 controller

1、概念

AngularJS 控制器控制 AngularJS 应用程序的数据，是一个常规的 JavaScript 对象，里面定义变量和函数，对接口，从后台获取数据，数据初始化等操作都是在控制器中进行。控制器的控制范围受限于相应 Module 的范围。

在实际应用中，通常都是把控制器放到外部 js 文件中，只需要通过 script 标签引入即可正常使用。而且一个 module 中可以有多个 controller。

2、案例

<div ng-app="myApp" ng-controller="personCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

三、作用域 Scope

1、概念

作用域是 HTML 和 controller 之间的纽带，作用域 $scope 是一个对象，里面包含控制器的变量和函数，并把它们传递到 HTML 页面中，使页面中位于控制器作用范围内的元素能够调用这些变量和函数。

在控制器中，声明变量和函数的时候，需要以 $Scope. 为前缀，在页面中，调用这些变量和函数时，不需要添加 $Scope. 的前缀，直接调用属性名即可。

不同的控制器有不同的控制作用域，不同的作用域内的变量和函数是不能互相调用的，不同的作用域内可以有同名的变量，但是不建议这么做，因为可能你自己都会乱掉。

2、案例

<div ng-app="myApp" ng-controller="myCtrl">
    // 此处绑定的 scope 中的 name 
	<input ng-model="name">
	<h1>{{greeting}}</h1>
    // 此处绑定的 scope 中的 sayHello() 方法
	<button ng-click='sayHello()'>点我</button>	
</div>

<script>
var app = angular.module('myApp', [])
    .controller('myCtrl', function($scope) {
    $scope.name = "Runoob";
	$scope.sayHello = function() {
    	$scope.greeting = 'Hello ' + $scope.name + '!';
	};
});
</script>

3、根作用域 rootScope

一个 Module 中有一个根作用域 rootScope ，其应用范围是整个 Module 的范围，这个 Module 中的所有控制器都能使用rootScope 里面的属性和方法，相当于一个全局对象。换句话说就是 $rootScope 全局对象的属性可在所有子作用域中访问，子作用域互相无法访问对方的私有变量。

还有很重要的一点是：在后面控制器中定义的rootScope变量，在它前面的控制器中访问不到，这也算是AngularJS 的一个问题。

声明根作用域 rootScope 变量和函数的形式是： $r o o t S c o p e . 变量名、$ rootScope.函数名；调用时的形式与 scope 相同，无需加前缀，直接写变量名、函数名即可

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <h1>姓氏为 {{lastname}} 家族成员:</h1>
        <ul>
            <li ng-repeat="x in names">{{x}} {{lastname}}</li>
        </ul>
    </div>
    <div ng-controller="myCtrl_1">
        <div>scope中的值是{{lastname_1}}</div>
        <div>rootscope中的值是{{$root.lastname}}</div>
    </div>
</div>

<script>
	var app = angular.module('myApp', []);
			.controller('myCtrl', function($scope, $rootScope) {
   			 $scope.names = ["Emil", "Tobias", "Linus"];
    		 $rootScope.lastname = "Refsnes";
		})
   			.controller('myCtrl_1', function($scope, $rootScope) {
    		$scope.lastname_1 = $rootScope.lastname;
		});
</script>

四、过滤器

1、概念

过滤器是用来对数据进行转换的，比如把一串字符转换成大写、格式化日期、筛选数组中的元素等等，除此之外我们还可以通过 .filter 自定义过滤器。可以通过一个管道符（ | ）将过滤器添加到表达式和指令中。

2、常用的过滤器

过滤器	作用
currency	将数字格式化成货币格式
lowercase	将字符串格式化为小写
uppercase	将字符串格式化为大写
filter	从数组中筛选符合条件的数组元素
orderBy	根据某种规则排序数组
date	格式化时间
number	格式化小数保留几位
limitTo	截取字符串

3、案例

<div ng-app="myApp" ng-controller="myCtrl">
    // lowercase uppercase 大小写转换
    <p>
        {{name1 | uppercase}} // RUNOOB
        {{name2 | lowercase}} // runoob
    </p>
    // data 格式化日期
    <p>
        {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} //2017-03-22 13:52:25
    </p>
    // 格式化小数
    <p>
        {{123.456789 | number:2}} // 123.45
    </p>
    // 将数字格式化成货币格式
    <p>
        {{120 | currency}} // $120.00
        {{120 | currency:"RMB ￥ "}} // RMB ￥ 120.00
    </p>
    // 筛选数组 显示数组中 name属性等于北京的
    <p>
        <a ng-repeat="item in city | filter:{'name':'北京'} "></a>
    </p>
     // 排序数组
    <p>
        // 默认为升序
        <a ng-repeat="item in city | orderBy:'id' "></a>
        // 改为降序
        <span ng-repeat="item in city | orderBy:'id':true "></span>
    </p>
      // 截取字符串 正数从前向后截取  负数从后往前截取
    <p>
        {{"1234567890" | limitTo :6}} // 从前面开始截取6位
		{{"1234567890" | limitTo:-4}} // 从后面开始截取4位
    </p>
    	// 自定义过滤器
    <p>
        {{name1 | reverse}}
    </p>
</div>
<script>
var app = angular.module('myApp', [])
.controller('myCtrl', function($scope) {
   		 $scope.name1 = "runoob";
         $scope.name2 = "RUNOOB";
    	 $scope.city=[
			{"id":"1","name":"福建"},
			{"id":"2","name":"广东"},
			{"id":"5","name":"上海"},
			{"id":"4","name":"北京"},
			{"id":"3","name":"四川"}
		 ]
})
// 自定义的过滤器 用来反转字符串
.filter('reverse', function() { //可以注入依赖
    return function(text) {
        return text.split("").reverse().join("");
    }
});
</script>