angularjs模式

最新推荐文章于 2018-05-04 17:39:17 发布

逆风飞翔的猿

最新推荐文章于 2018-05-04 17:39:17 发布

阅读量502

点赞数

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

本文链接：https://blog.csdn.net/chenqk_123/article/details/76906563

版权

angularjs 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

为什么叫模式？我没有找到更好的方式来描述这种情况，先来看一张图：

1.功能模块划分

1.1 APP

我们知道angularjs是基于APP的一种应用，也就是在html中需要对应一个APP，该APP作为整个项目或者某个模块的入口点，就行java的main方法作为整个程序的主入口。当然你可以某一个模块作为一个APP，但是我们一般不会这么处理，因为你多个APP间进行通信的时候会碰到很大的麻烦，如果用过angularjs的人知道，在同一个APP下，各模块间的数据共享，数据通信可以通过service来共享数据，而当多个APP之间进行数据通信的时候我们势必会需要更多的全局变量或者使用document客户端的一些属性来绑定到数据上，这样就会使得angularjs的全局空间受到污染，我们知道angularjs是不希望你定义自己的全局变量来在各模块之间记性数据交互的。因为只要我们严格遵守angularjs的定义使用方式，就可以规避和解决我们在应用中的各种问题。所以我们建议使用一个APP或者最多使用两个APP。因为两个就已经足够用了，一般这种情况会出现在有两个应用，比如项目如果划分的详细，登录可以是一个单独的APP，而登陆之后的主页面可以作为一个大的APP。这样两个APP就足以支持我们的管理系统的项目。

虽然是这么说，但我们还是需要知道怎么在两个或者多个APP之间进行数据通信的。你比如我登录的用户名密码可能需要在主页面(另一个APP)中使用，那使用普通方法就无法记录该对象，我们只有使用window.localStorage.xxx，来记录数据，比如在登录的时候我可以使用window.localStorage.loginName = "xxxx"，而在另一个APP中使用$scope.loginName = window.localStorage.loginName来获取。

1.2APP定义

<!DOCTYPE html >
<html ng-app="login" ng-controller="loginCtrl">
<head>

</head>
<body>

</body>
</html>

定义了一个APP来作为angularjs的主入口，在js中定义该login APP：

angular.module('login', ["ui.bootstrap",
        "ui.router",
        "pascalprecht.translate",
        "ngCookies",
        "toastr"
    ])

我们在这里定义了login APP，并注入了我们该应用下所使用的一些服务和组件，比如路由，国际化，cookie等。在使用angularjs时有个很重要的东西叫"依赖注入"，简答的说就是你在angularjs中定义了一堆或者它本身提供的一些服务，你需要使用这种东西，那好，angularjs说你使用可以，但是你得先注入，先引用。

每个APP或者module的使用方式有且只能使用一次angular.module("login",[])，这种后面带数组的形式，否则angular会觉得你定义了两个相同的login，这不符合angular的定义规则。我们针对某一个APP会定义多个module或者多个js文件，每个js文件都必须阐述或者标注该js是属于login或者其他应用的，比如我有多个js文件，一个用于controller控制层的js，负责一些数据的定义，数据的处理。同时我还会需要一个config.js来做一些配置，做一些服务来达到配置和数据共享，那么这两个js文件都属于同一个login APP，那么这是我就可以这么定义：

config.js

angular.module('login', ["ui.bootstrap",
        "ui.router",
        "pascalprecht.translate",
        "ngCookies",
        "toastr"
    ])

controller.js

angular.module('login')

2.Module

上面讲述到APP的作用和定义，Module是基于APP的应用，我们一个APP下可以有多个module功能模块，最常见的管理系统主页面可以划分多个module，而module之间大都是分开的也可以是之间进行数据交互，拿我们的项目来说可以分为用户管理，系统管理，日志管理，设备管理等一些列的功能模块。

定义方式跟APP很想，但是由于基于APP，所以需要在APP中先进行注入，之后angular加载程序的时候才会读出你定义的module，然后你基于module的各种应用才能正常的进行：

在APP中注入module：

angular.module('main', ["ui.bootstrap",
		"ui.router",
		"pascalprecht.translate",
		"ngCookies",
		"toastr",
		"nvd3ChartDirectives",
		"toggle-switch",
		"angularFileUpload",
		"user.management",
		"device.management",
	])

定义module：

angular.module('user.management', [])

定义的形式跟APP的定义是一样的，这样module就注入了，你可以在module中进行一番作为了。

3.其他

关于图中的其他，我们这里不做太多的说明，很多在后面的文章中会提到。大家先有个印象就行了。

controller：angularjs控制层，每个controller对应一个单独的作用域，controller之间是不进行跨作用域的，他们之间的数据只能通过数据共享来实现。

$scope：每个$scope对应于一个单独的controller作用域，当我们在controller中定义个变量$scope.name ="xxx",只能在该controller作用域下使用该变量，其他的controller中不适用该变量。$scope也是作为angularjs中的M层进行数据展示。

filter：angular提供一种数据格式化的应用来使数据在html中以不同的数据形式展现，比如日期格式化，数字格式化，当然他也支持自定义filter。

service：这个是angular中颇为重要的一个应用，数据共享，在不同的controller中达到数据共享。

directive：指令系统，简单说就说定义一套共用的指令来达到各个模块之间的复用，跟service很像。

好了，先说这么多，后续文章中会对出现的部分再进行详细的说明！