AngularJS 模块加载之配置块

最新推荐文章于 2019-04-09 23:00:33 发布

美食花宴

最新推荐文章于 2019-04-09 23:00:33 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/sun0789/article/details/53236979

web 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了AngularJS中如何使用配置块来配置服务和过滤器。通过`config`方法，可以禁用$log服务的debug功能，并注册新的过滤器，如将字符串首字母大写的`capitalize`过滤器。

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

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
	<meta charset="UTF-8">
	<title>AngularJS 模块加载 之 配置块</title>
    <!--模块加载：AngularJS模块可以在被加载和执行之前对其自身进行配置。
        我们可以在应用的加载阶段配置不同的逻辑。-->


    配置块：
                1、通过config方法实现对模块的配置，

                    AngularJS中的服务大部分都对应一个“provider”，

                    用来执行与对应服务相同的功能或对其进行配置。
                    比如$log、$http、$location都是内置服务，
                    $log-->$logProvider、
                    $http-->$httpProvider、
                    $location-->$locationPorvider。

 
</head>
<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) {
//           config 是模块的配置  方法
//           AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置
//           $logProvider   用来执行与log对应服务相同的功能或对其进行配置。



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







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

			});

		}]);

		// App.config(['$filterProvider', function($filterProvider) {
			
		// 	// 默认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('debug');
			$scope.str = 'hello angular';

		}]);


	</script>

</body>
</html>