AngularJs 模块加载-配置块

最新推荐文章于 2020-11-20 07:00:29 发布

心郎

最新推荐文章于 2020-11-20 07:00:29 发布

阅读量3.6k

点赞数

分类专栏：前段_angularjs

本文链接：https://blog.youkuaiyun.com/u011301203/article/details/53236641

版权

前段_angularjs 专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了AngularJS中模块的配置块和运行块的概念。配置块允许在应用加载前对模块进行配置，如禁用$log的debug功能，并展示了如何注册新的过滤器。运行块则用于执行优先级高的功能，例如验证用户登录。示例代码中，配置了$log服务并创建了一个名为`capitalize`的过滤器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
	<meta charset="UTF-8">
	<title>AngularJS 模块加载之 配置快</title>
</head>
<!--
	AngularJS模块:可以在被加载和执行之前对自身进行配置 我们可以在应用加载阶段配置不同的逻辑
	##配置快:
		通过config方法实现对模块的配置,AngularJS中的服务多数都对应一个provider,
		用来执行与对应服务相同的功能或对其配置,比如$log、$http、$location都是内置服务，
		相对应的“provider”分别是$logProvider、$httpProvider、$locationPorvider。
	##运行块:
		服务也是模块形式存在的对且对外提供特定功能，前面学习中都是将服务做为依赖注入进去的，
			然后再进行调用，除了这种方式外我们也可以直接运行相应的服务模块，
			AngularJS提供了run方法来实现。
		run方法还是最先执行的，利用这个特点我们可以将一些需要优先执行的功能通过run方法来运行，
			比如验证用户是否登录，未登录则不允许进行任何其它操作。
-->
<body>
	<div ng-controller="DemoController">
		<h1>{{now}}</h1>
		<h2>{{str|capitalize}}</h2>
	</div>
	<script src="../libs/angular.min.js"></script>
	<script>
		var App = angular.module('App', []);

		// 配置$log服务(禁用debug)
		// config 允许一次配置多个服务快 传递的一个数组（依赖注入方式）
		App.config(['$logProvider', '$filterProvider', function ($logProvider, $filterProvider) {

			// $log.debug(); 禁用debug功能
			$logProvider.debugEnabled(false);

			// 默认9个过滤器，通过配置可以新增一些过滤器
			$filterProvider.register('capitalize', function () {
				// 新增一个过滤器
				return function (input) {
					return input[0].toUpperCase() + input.slice(1);
				}

			});

		}]);

		App.controller('DemoController', ['$scope', '$log', function ($scope, $log) {
			// 测试配置后的结果
			$log.debug('调试');
//			$log.warn("警告");
			$scope.str = 'hello angular';
		}]);


	</script>

</body>
</html>