angularjs模式

前端之家收集整理的这篇文章主要介绍了angularjs模式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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


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',"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',"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很像。

好了,先说这么多,后续文章中会对出现的部分再进行详细的说明!
原文链接:https://www.f2er.com/angularjs/146529.html

猜你在找的Angularjs相关文章