动用MEAN本事栈开荒web应用www.yabovip4.com

用“MEAN”技能栈开荒web应用(风度翩翩)AngularJs前端框架结构

2015/09/09 · CSS,
HTML5,
JavaScript · 1
评论 ·
MEAN

原来的小讲出处:
吕大豹   

前言

不知什么日期陡然冒出“MEAN技艺栈”这几个新词,听上去很牛逼的样子,其实正是咱们早已深谙了的近七年在前面三个比较流行的能力,mongodb、express、angularjs、nodejs,由于这几项本事包含了早前端到后端再到数据库,能够用他们完全的支付一个web应用了,所以成了二个不胜牛逼的结缘,颇负当年LAMP的气势。前端要从切图仔迈向全栈的路上,这几门本事必须得有所涉猎。本种类作品利用和睦胡编的二个小品种为例,对“使用MEAN本事栈开辟web应用”做三个入门级的牵线。

AngularJs的争议

angular,简单的称呼ng,是google出品的完美框架,在二〇一二~2016年大富大贵,不过本国类似慢一拍,作者从二〇一六年才来看选用ng的品种大批量涌出。ng自出现最初就有人指谪太难上手了,完全两样的开采情势,团队费用特别不精晓怎么样组织代码。可是随着jquery那位老二哥慢慢被遗弃,大家初叶稳步选用mvvm那样的编制程序思维。可是一个糟糕的音信是,ng团队筹算重构的angular2.0版本要发生重大革命,与1.0无法比量齐观,就算官方有1.0向2.0迁移的方案,但附加的职业三番五次不太好的,並且选用2.0还要付出越来越多的就学习话费用。

再加多二〇一八年又有react那一个实力派雄起,ng的局面霎时被抢过去了,大家又开端商讨react下的编制程序情势。可是作者估摸react的确实实用也得等到风姿罗曼蒂克三年后。这段时间angular1.x也照例是一个不易的抉择。尽管有2.0的革命,可是1.4依然贰个安生乐业版本,我们接受牢固版本肯定是不会极度的。

故而笔者的下结论是,但用不妨,不会存在白学了这种专门的学问,固然将来angular1.x放任了,你学到的编制程序思维恐怕在的。

正文研商哪边利用AngularJs实行前端的架构,对于ng的基础知识不做教师,要求掌握的同室能够看笔者事先写过的二个各类

练手项目简单介绍

为了系统的求学“MEAN”技能栈,小编设想了二个小品种,先做三个介绍。

QuestionMaker,是二个用以转移考察问卷的体系,客户能够编写制定试题(选取题、填空题),并能够实时预览编辑结果。然后还足以编写制定豆蔻梢头份试卷,为试卷加多试题,然后保留为一分总体的考查问卷。有一点点类似于侦查派。先上一张截图吧:

www.yabovip4.com 1

类其他法力重尽管CRUD操作,所以特别相符angular的采纳场景,双向绑定对于落到实处实时预览那样的效率几乎是随手拈来。

品类的前后端是截然分开的,后端不渲染页面,只提供数据接口,前端采纳ng的动态模板来渲染页面,通过ajax诉求来赢得所需数据。

体系本人早已开源到github,有野趣的同学能够查阅:

前端目录结构

用ng来塑造贰个类型应该怎么布置目录结构吧?为了不人工扩展复杂度,小编那边未有用bower来治本信任库,也从不任何文章中介绍的那样用yeoman来生成项目,只是单纯的手动来创设目录,那样能够把我们的注意力集中到项目标基本上,目录结构是这么的:

动用MEAN本事栈开荒web应用www.yabovip4.com。前端的代码都在src目录下,包罗进口文件index.html,这样方便大家继续做统大器晚成压缩等编写翻译工作,编写翻译后的文书能够联手归入dist目录下。

首页index.html

动用MEAN本事栈开荒web应用www.yabovip4.com。这是项目标入口页面,其实就是贰个大容器,在这里地加载全体的js和css文件,然后提供三个视图容器就够了,因为从这些页面未来,大家页面就不再会有跳转,全都是因而前端路由来做一些刷新,首页的代码特别简洁:

JavaScript

<!doctype html> <html ng-app=”QMaker”> <head> <meta
charset=”utf-8″> <title>Question Maker</title> <link
rel=”stylesheet”
href=”/src/lib/bootstrap-3.3.5/css/bootstrap.min.css”> <script
src=”/src/lib/jquery-1.9.1.min.js”></script> <script
src=”/src/lib/angular-1.4.1.min.js”></script> <script
src=”/src/lib/angular-ui-router.min.js”></script> <link
rel=”stylesheet” href=”/src/css/base.css”> <!–{main}–>
<script src=”/src/js/app.js”></script> <script
src=”/src/js/controllers.js”></script> <script
src=”/src/js/directives.js”></script> <script
src=”/src/js/filters.js”></script> <script
src=”/src/js/routes.js”></script> <script
src=”/src/js/services.js”></script> <!–{endmain}–>
</head> <body> <div class=”navbar navbar-default”>
<div class=”container-fluid”> <div class=”navbar-header”>
<a href=”#/” class=”navbar-brand”>Question Maker</a>
</div> </div> </div> <div class=”maincontent
container-fluid” ui-view> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!doctype html>
<html ng-app="QMaker">
<head>
    <meta charset="utf-8">
    <title>Question Maker</title>
    <link rel="stylesheet" href="/src/lib/bootstrap-3.3.5/css/bootstrap.min.css">
    <script src="/src/lib/jquery-1.9.1.min.js"></script>
    <script src="/src/lib/angular-1.4.1.min.js"></script>
    <script src="/src/lib/angular-ui-router.min.js"></script>
 
    <link rel="stylesheet" href="/src/css/base.css">
    <!–{main}–>
    <script src="/src/js/app.js"></script>
    <script src="/src/js/controllers.js"></script>
    <script src="/src/js/directives.js"></script>
    <script src="/src/js/filters.js"></script>
    <script src="/src/js/routes.js"></script>
    <script src="/src/js/services.js"></script>
    <!–{endmain}–>
</head>
 
<body>
    <div class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#/" class="navbar-brand">Question Maker</a>
            </div>
        </div>
    </div>
    <div class="maincontent container-fluid" ui-view>
 
    </div>
</body>
 
</html>

进口文件app.js

有了进口页面,还得有叁个js的启航入口,正是以此app.js了,在这里间它只做了两件专门的学问:

  1. 起步angular,代码唯有后生可畏行:

JavaScript

var app = angular.module(‘QMaker’, [动用MEAN本事栈开荒web应用www.yabovip4.com。’ui.router’]);

1
var app = angular.module(‘QMaker’, [‘ui.router’]);

我们具备了二个名称叫app的大局模块。这里把ui.router给注入了,因为我们全部应用都用ui-router来做路由,前面会做详细介绍。

2.
把ui-router的$state和$stateParams服务挂到$rootScope上,那样我们在背后全体的模块中,都能够访谈到路由参数,不必在各种地点都流入一遍了。代码也是蒸蒸日上对一简单:

JavaScript

app.run(function($rootScope, $state, $stateParams) { $rootScope.$state =
$state; $rootScope.$stateParams = $stateParams; });

1
2
3
4
app.run(function($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
});

动用MEAN本事栈开荒web应用www.yabovip4.com。调控器合集controllers.js

动用MEAN本事栈开荒web应用www.yabovip4.com。controller.js里面是装有的controller定义,由于这一个项目相当小,何况反正最后都要合併,所以就都坐落四个文书里了,那样能够使用链式写法app.controller(‘a’,
…).controller(‘b’,
…), 一口气将装有的controller都定义好。如若项目极大,controller多,能够把controllers建为二个文书夹,然后在里头放种种controller。

controller里面正是跟专门的学业有关的有些代码了,如试题数据的起头化,加多答案、删除选项等操作。

但是当大家须求倡导ajax诉求的时候,如保存试题,就不宜在controller里面直接写了,那样会促成逻辑混杂代码混乱。全数供给恳求服务端的操作,大家得以抽象为三个个劳务,进行“分层”,通过ng提供的service机制来做调用。

劳动合集services.js

接上头,全体和课题相关的服务端乞请,大家得以封装成几个QuestionService,这几个服务提供:提交试题、删除试题、更新试题等劳动,那样档期的顺序就很清楚了。

为此,在services.js中,大家定义全数和服务相关的事物,在本项目中,大家的劳务全部都以ajax央浼,能够用ng提供的$http服务来很有利的完成。事实上service中并非必需写ajax诉求,凡是能够抽象领会为“公共服务”的东西,都能够定义在这里间,能够被别的模块随便调用。

指令合集directives.js

询问过ng的同学应该对指令不会不熟悉,通过指令大家得以用扩充html标签的主意来比较轻松的完毕部分UI效果,使用方便、可被多少个地方国有使用,就像是过去我们写jquery插件同样。全数的授命都定义在此个文件中,同样能够使用链式写法,很爽。

在大家的品种中,有一点功效是通用的,比方列表的分页,那么就足以把分页作用做成二个命令。笔者定义了二个名叫pagenav的命令,然后在具有要求用分页的地点就能够调用了,代码如下:

JavaScript

<pagenav pageobj=”pageObject”
pagefunc=”pageFunction”></pagenav>

1
<pagenav pageobj="pageObject" pagefunc="pageFunction"></pagenav>

只需一个标签,然后通过品质钦赐分页数据和翻页函数就能够。

过滤器合集filters.js

我们的类型利用ng提供的动态模板,服务端不渲染页面,只提供数据接口。某个数据大家须求张开格式化后张开输出,这就用到filter了,全部的filter都投身这里。filter的概念和应用的特别轻易,此不少之甚少述了。

前端路由定义routes.js

本项目利用ui-router来做前端路由,那一个目测也是明日最盛行的做法。ui-router是一个第三方插件,由于ng内置的ngRouter作用较弱,不可能达成嵌套路由和多视图路由,而ui-router引进了“状态”那几个概念来决定视图,进而完结这几个职能,所以ui-router成了最佳的抉择。它是angular-ui项目()中的叁个模块,该品种还提供了重重遵照ng的ui,像日期选择器什么的。ui-router貌似是最受欢迎的二个。

用ui-router能够达成嵌套路由和同豆蔻年华页面多视图,具体采取办法能够参谋笔者博客中间转播载的几篇文章:

本项目中,由于整站无刷新,所以路线的层级会相比较深,嵌套路由就派上了用处。在输入页面index.html中,用二个div来做父容器,加上ui-view属性,就足以在其间加载其余模板了。从考题列表到试题编辑页面包车型客车切换,就都在此个父容器中加载。

而在考题编辑页面,又有相应的题型编辑和课题预览视图,通过给ui-view给予名字,就足以加载各自对应的模版,这里正是多视图的运用。代码片段如下:

JavaScript

<!–试题编辑视图–> <div ui-view=”editArea”></div>
<!–试题预览视图–> <div ui-view=”previewArea”></div>

1
2
3
4
5
<!–试题编辑视图–>
<div ui-view="editArea"></div>
 
<!–试题预览视图–>
<div ui-view="previewArea"></div>

在试卷预览页面,大家也亟需对试题进行体现,只需在页面上在概念一个ui-view,然后在路由中展开布置,就可以加载试题预览模版,相当的轻便的兑现了模版的复用。

页面中尚无别的逻辑,只需在route.js中配备好路由法则,整站无刷新跳转就那样轻松的贯彻了。

tpl目录

应用ui-router做了前者路由后,除了进口页面index.html外,其余兼具页面就都改为模板了(被ui-router动态加载)。全体的沙盘都放在tpl目录下。就算事情的模块相当多,能够在这里目录下再新建文件夹,本项目比较容易,所以就独有意气风发层。无论有多少层目录,在routers.js中配置好就OK啦。利用ui-router能够注入模板对应的调节器,所以代码中大家也不须要在加ng-controller,模板文件中正是很干净的ng模板。

lib目录

此地放置的是连串所需的外表库。有angular、ui-router、jquery、bootstrap。你能够看见作者只是把代码文件给平素放里面了,没有用当下风行的bower进行政管理制。是因为自个儿不想再人工的充实复杂度,万黄金时代有人的机械上bower安装退步只怕git景况有标题,也许github无法访问,都会令人分外意兴阑珊。

反正就那多少个安定版本,不比直接下载过来。假使急需减小小编前期用gulp来搞一下就行了。

总结

本条小品种的前端结构正是其一样子呀。从上边大家得以看见,用ng来做前端的框架结构还是很有系统的。controller、service、directive这几个概念,本质上如故“模块”,所以大家能够以模块开垦的法门来很舒畅的写代码,文件与公事之间未有任何耦合和依附。模块所需的依附,大家由此ng的注入机制来给注入。所以在index.html中引进那么些文件的时候,未有各种供给,任性顺序引进皆可。

顺便说一句,前端代码的后管理,笔者新惹事物正在如日方升度用gulp写好了剧本,用npm安装所需的包后,实践gulp就足以编写翻译生成dist目录。

正文只做angular前端架构入门级其他牵线,关于文中涉及的龙腾虎跃对切实本领细节,能够查看自个儿写的angular连串小说

以此示例项目自己已开源到github(),近年来黄金时代度达成了基本成效。后续我会扩张愈来愈多的机能,到时候也终将会提到到越多的本领难题,angular实行前端架构的路才刚刚最早。

1 赞 1 收藏 1
评论

www.yabovip4.com 2

发表评论

电子邮件地址不会被公开。 必填项已用*标注