来自 前端知识 2019-11-21 21:28 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

【澳门金莎娱乐手机版】AngularJs前端架构

tpl目录

行使ui-router做了前面多个路由后,除了进口页面index.html外,别的具有页面就都改为模板了(被ui-router动态加载卡塔 尔(英语:State of Qatar)。全数的模板都位于tpl目录下。假如专门的学业的模块超级多,能够在这里目录下再新建文件夹,本项目比较容易,所以就只有风流倜傥层。无论有多少层目录,在routers.js中布置好就OK啦。利用ui-router能够注入模板对应的调节器,所以代码中我们也不必在加ng-controller,模板文件中正是很深透的ng模板。

鸣谢

多谢大家收看

BY :  李仁 | 吴昊杰

angular路由

小课堂

        分享人: 吴昊杰

前言

不知什么时候猛然冒出“MEAN本领栈”那些新词,听上去很牛逼的样本,其实就是咱们曾经熟练了的近五年在前端相比较盛行的技能,mongodb、express、angularjs、nodejs,由于这几项本事蕴涵了以前端到后端再到数据库,能够用他们全体的支出八个web应用了,所以成了叁个那多少个牛逼的结合,颇有当年LAMP的气焰。前端要从切图仔迈向全栈的中途,这几门技艺必需得有所涉猎。本类别作品利用谐和编造的三个小项目为例,对“使用MEAN本事栈开拓web应用”做叁个入门级的介绍。

答:因为ng-router没有明显的父亲和儿子层级关系,ui-router显明了那或多或少

过滤器合集filters.js

大家的类别利用ng提供的动态模板,服务端不渲染页面,只提供数据接口。有个别数据我们须求张开格式化后张开输出,那就用到filter了,全部的filter都放在这。filter的概念和应用的非常轻易,此不相当少述了。

5.参照他事他说加以考查文献

生手教程

AngularJS路由二三事(风姿罗曼蒂克卡塔尔:ngRoute

ngRoute 模块_AngularJS中文网

用“MEAN”本领栈开采web应用(生龙活虎卡塔 尔(阿拉伯语:قطر‎AngularJs前端架构

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

原来的小说出处: 吕大豹   

标题三:paramr是做什么用的

params是路由之中页面包车型的士参数传递格局.

this.$router.push({

 path:"/detail",

 params:{

 name:'nameValue',

 code:10011

 }

});

乐视网链接:

PPT链接:

一声令下合集directives.js

刺探过ng的同学应该对指令不会目生,通过指令大家得以用扩充html标签的议程来比较轻巧的落实部分UI效果,使用方便、可被多少个地点国有使用,就如过去大家写jquery插件相仿。全体的吩咐都定义在此个文件中,同样能够利用链式写法,很爽。

在大家的花色中,有一点点效果是通用的,举例列表的分页,那么就能够把分页效能做成一个命令。小编定义了二个名叫pagenav的命令,然后在具备需求用分页的地点就足以调用了,代码如下:

JavaScript

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

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

只需三个标签,然后经过品质内定分页数据和翻页函数就能够。

ngRoute完毕原理

笔者们知道,设置

<ahref="#div1">div1</a>

            <ahref="#div2">div2</a>

            <ahref="#div3">div3</a>

        <divid="div1">我是div1</div>

            <divid="div2">我是div2</div>

            <divid="div3">我是div3</div>

如此那般的锚点,a链接会在同风度翩翩页面中跳转。ngRoute利用了这一表征将锚点出的公文设置为模板,在锚点被链接时,监听到url的变通,加载相应的沙盘文件。

首页index.html

那是系列的进口页面,其实正是二个大容器,在此边加载全数的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>

NGROUTE蕴含以下一些:

劳动$routeProvider用来定义贰个路由表,即地址栏与视图模板的投射

劳动$routeParams保存了地方栏中的参数

劳动$location用来落到实处用于获取当前url以致更改目前的url,并且存入历史记录

劳务$route完结路由特别,並且提供路由相关的属性访问及事件,如访问当前路由对应的controller

命令ngView用来在主视图中钦命加载子视图的区域

$routeProvider提供了概念路由表的劳务,它有八个宗旨措施,when(path,route)和otherwise(params)。

劳务合集services.js

接上头,全数和课题相关的服务端诉求,大家能够封装成叁个Question瑟维斯,那个服务提供:提交试题、删除试题、更新试题等劳动,那样档期的顺序就很清晰了。

因而,在services.js中,我们定义全数和服务相关的事物,在本项目中,大家的劳务全部是ajax哀告,能够用ng提供的$http服务来很实惠的成就。事实上service中实际不是必需写ajax伏乞,凡是足以抽象通晓为“公共服务”的事物,都可以定义在那间,能够被别的模块随便调用。

4.解决方案

输入文件app.js

有了入口页面,还得有贰个js的运营入口,就是以此app.js了,在这里处它只做了两件工作:

  1. 起始angular,代码唯有风华正茂行:

JavaScript

var app = angular.module('QMaker', ['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;
});

6.越来越多切磋

怎么推荐用ui-router取代ngRoute

ngRoute在路由安插时用$routeProvider。

ui-router路由布置时用 $stateProvider 和$urlRouterProvider。

ngRoute是官方路由。

ui-route是第三方路由。

ngroute是用AngularJS框架的着力部分。

ui-router是二个社区库,它是用来拉长全面ngroute路由效用的。

ui-router允许嵌套视图(nested views)和八个命名视图(multiple named views)。

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:【澳门金莎娱乐手机版】AngularJs前端架构

关键词: