Angular学习（十四）——模块依赖/格式过滤

最新推荐文章于 2024-06-13 09:45:20 发布

SnowUnicorn

最新推荐文章于 2024-06-13 09:45:20 发布

阅读量672

点赞数

分类专栏： AngulaJS 文章标签： angular 模块依赖过滤格式化 moule

本文链接：https://blog.csdn.net/shixihaoma/article/details/38523295

版权

AngulaJS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

模块依赖：

由于服务可能有依赖，因此模块API能够让你为依赖定义依赖。在大多数应用中，为你的所有代码创建一个单独的模块，把你所依赖的都放到里面，这将运行的非常好。如果你使用服务或者来自第三方的标识符，他们将带上自己的模块。由于应用中使用依赖，因此你将他们作为你应用模块的依赖。

例如，若要使用SnazzyUIWidgets和SUperDataSync模块，你的应用模块声明可以像这样：

var appMod = angular.module('app',['SnazzyUIWidgets','SuperDataSync']);

用过滤器格式化数据

过滤器允许你申明如何将展示给用户的数据转换后插入到你的模块中，过滤器的适用于法是：

其中表达式可以任何Angular表达式，filterName是你想用的过滤器名称，传递给过滤器的参数用冒号隔开。这些参数可以使任何合法的Angular表达式。Angular自带几个过滤器，像之前看到的currency。例如：{{ 12.9 | currency }}这块代码将显示成：$12.90.

我们把这个申明放在视图层（而不是在控制器或模型中），因为$符号在数字前面只有对用户有用，对处理数字的逻辑是没有用的。Angular自带的其他过滤器包括date、number、uppercase等等。

在绑定时，过滤器可以用额外的管道表示链接起来，例如我们可以格式化之前的示例，通过number过滤器删除小数点后的数字。这个过滤器带一个要舍入的小数点位数作为参数，因此：

{{ 12.9 | currency | number:0}}

最终显示的结果是：$13.

对于过滤器的绑定并不是限制于框架内嵌的，我们可以书写自定义的过滤器，如果我们希望创建一个过滤器，它能够将标题的首字母大写，例如，我们可能这样做。

<html >
<body ng-app="HomeModule" ng-controller="HomeController">
<h1>{{pageHeading | titleCase }}</h1>
</body>
<script src="angular.min.js"></script>
<script>
	var homeModule = angular.module('HomeModule',[]);
	
	homeModule.filter('titleCase',function(){
		var titleCaseFiler = function(input){
			var words = input.split(" ");
			for(var i=0; i < words.length;i++)
			{
				words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
			}
			return words.join(" ");
		};
		return titleCaseFiler;
	});
	function HomeController($scope){
	        $scope.pageHeading = "behold the majesty of  your page title";
		}
	</script>
</html>

而于是得到了相应的效果处理。