AngularJS应用介绍

最新推荐文章于 2019-12-31 17:03:28 发布

原创最新推荐文章于 2019-12-31 17:03:28 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #模块 #介绍

本文深入解析AngularJS应用的创建过程，包括HTML模板、AngularJS核心指令、模块定义、控制器使用及过滤器应用。

AngularJS应用

利用昨天的实例说明一下整个AngularJS应用，代码如下：

<!DOCTYPE html>
<html ng-app="exampleApp" >
<head>
    <title>AngularJS Demo</title>
    <link href="bootstrap.css" rel="stylesheet" />
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <script src="angular.js"></script>
    <script>

        var myApp = angular.module("exampleApp", []);

        myApp.controller("dayCtrl", function ($scope) {
            $scope.day = new Date();
			$scope.hellowolrd = "Hello Wolrd!"
        });

    </script>

</head>
<body >
    <div class="panel" ng-controller="dayCtrl">
        <div class="page-header">
            <h3>AngularJS App</h3>
        </div>
		<h4>{{hellowolrd}}</h4>
        <h4>Today is {{day | date:"yyyy-MM-dd HH:mm:ss"}}</h4>
    </div>
</body>
</html>

加载过程

angular.js ：所有的AngularJs应用，都必须引入这个js。根据使用的其它功能，可能需要引入其它js，比如resource,route等

ng-app：AngularJS程序入口，对该标签内的元素进行初始化。其中的exampleApp为模块的名称

angular.module：根据模块名定义模块。并通过[]指定该模块所依赖的其它模块

ng-controller：在当前元素范围内绑定指定的控制器(controller)。

ng-model：指定当前元素与数据模型（$scope）中的属性绑定，如果数据模型中没有此属性，会自动新建一个。

{{xxx}}：花括号表示读取某一属性值

控制器

myApp.controller("dayCtrl", function ($scope) {
// controller statements will go here
});

通过这种方法定义控制器Controller。在里面有参数$scope，是通过angularjs的DI自动注入。控制器是视图和模型间的协调者，那么它所包含的逻辑就应该尽量少。一般，控制器是通过$scope参数，进行数据的操作。另外的一种定义控制器方式一般如下，它可以让我们明确定义依赖的组件和服务。

myApp.controller("dayCtrl", ['$scope',function ($scope) {
// controller statements will go here
}]);

第一种定义DI的是通过方法参数名声明依赖。这种方式不推荐使用，因为js文件压缩后方法参数名会改变。
第二种定义DI的是将依赖列表放数组的前部，注入目标放数组最后一个元素。推荐使用这个方法。

控制器在Views中的定义

声明了控制器后，可以在View中的任何地方进行定义。例如在body中定义

<body ng-controller="dayCtrl">

也可以在其它元素，比如div中定义

<div class="panel" ng-controller="dayCtrl">

或者是form元素

<form ng-controller="dayCtrl">……</form>

注意：在元素上定义controller,那么该controller的作用域只存在该元素中。每个Controller中的$scope是互不相同的，并且互不干扰。

过滤器

在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。比如时间本地化，或者yyyy-MM-dd HH:mm:ss格式，数字精度格式化，本地化，人名格式化等等。
如上面的时间过滤：

<h4>Today is {{day | date:"yyyy-MM-dd HH:mm:ss"}}</h4>

在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能，angularjs内部为我们提供了number等很多内置的filter。我们通过myapp.filter,进行Filter的自定义，实现Filter扩展功能。