【亚洲必赢官网】哪些选用ui,AngularJs前端架构

用“MEAN”技术栈开发web应用(一)AngularJs前端架构

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

初稿出处:
吕大豹   

angular路由

世家好,我是IT修真院埃德蒙顿分院第10期学员余佳贝,一枚正直善良的web程序员。

率先给我们介绍angular-ui-router的要旨用法。
怎样引用依赖angular-ui-router

前言

不知何时突然冒出“MEAN技术栈”这些新词,听起来很牛逼的典范,其实就是我们曾经深谙了的近两年在前端比较流行的技巧,mongodb、express、angularjs、nodejs,由于这几项技艺涵盖了往日端到后端再到数据库,可以用他们全体的开发一个web应用了,所以成了一个不胜牛逼的组合,颇有当年LAMP的气焰。前端要从切图仔迈向全栈的中途,这几门技术必须得有所涉猎。本序列小说利用祥和胡编的一个小项目为例,对“使用MEAN技术栈开发web应用”做一个入门级的介绍。

国都小课堂

分享人:吴昊杰

目录

1.背景介绍

2.知识剖析

3.周边难题

4.解决方案

5.编码实战

6.展开思考

7.参考文献

8.越多琢磨

明日给我们大快朵颐一下,修真院官网js任务6,深度思考中的知识点——如何选拔ui-router?

angular.module(‘app’,[“ui.router”])
.config(function($stateProvider){
$stateProvider.state(stateName, stateCofig);
})

AngularJs的争议

angular,简称ng,是google出品的绝妙框架,在2013~二零一四年大红大紫,可是国内类似慢一拍,我从二〇一五年才看到使用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的基础知识不做助教,要求了然的同班可以看本身事先写过的一个多重

1.背景介绍

诚如的话,我们以为AngularJS是一套前端的MVC框架。那么,为了兑现视图的转折,肯定会涉嫌到路由的定义。这里大家就来说说关于AngularJS的路由——ngRoute。

第一谈谈APP应用。平常我们用的app总是多页面,即使用原生安卓或者苹果,那自然很流畅啦。不过当我们用一般的html页面做移动端,简单时候大家可以用这么的价签去链接页面时,速度仍能的。
  不过当大家的应用越多时,切换起来没那么顺理成章。又是碍于网速,页面加载进来多少慢。可是在angular里面,大家得以用路由举办切换。因为在angular里面,大家用户一般在加载那样的运用时,会整整的缓存在手机上。大家用路由举办切换时,不用再发起HTTP请求了。体验比原来好。

一.背景介绍

$stateProvider.state(stateName, stateConfig)
stateName是string类型
stateConfig是object类型
//statConfig可以为空对象
$stateProvider.state(“home”,{});
//state可以有子父级
$stateProvider.state(“home”,{});
$stateProvider.state(“home.child”,{})
//state可以是链式的
$stateProvider.state(“home”,{}).state(“about”,{}).state(“photos”,{});
stateConfig包蕴的字段:template, templateUrl, templateProvider,
controller, controllerProvider, resolve, url, params, views, abstract,
onEnter, onExit, reloadOnSearch, data
$urlRouteProvider
$urlRouteProvider.when(whenPath, toPath)
$urlRouterProvider.otherwise(path)
$urlRouteProvider.rule(handler)
$state.go
$state.go(to, [,toParams],[,options])
形参to是string类型,必须,使用”^”或”.”表示相对路径;
形参toParams可空,类型是目的;
形参options可空,类型是目的,字段包罗:location为bool类型默许true,inherit为bool类型默认true,
relative为对象默许$state.$current,notify为bool类型默许为true,
reload为bool类型默认为false
$state.go(‘photos.detail’)
$state.go(‘^’)到上超级,比如从photo.detail到photo
$state.go(‘^.list’)到相邻state,比如从photo.detail到photo.list
$state.go(‘^.detail.comment’)到孙子级state,比如从photo.detail到photo.detial.comment
ui-sref
ui-sref=’stateName’
ui-sref=’stateName({param:value, param:value})’
ui-view
==没知名称的ui-view

练手项目简介

为了系统的就学“MEAN”技术栈,我虚构了一个小品种,先做一个介绍。

QuestionMaker,是一个用以转移调查问卷的连串,用户可以编制试题(选用题、填空题),并可以实时预览编辑结果。然后还足以编制一份试卷,为试卷添加试题,然后保留为一分总体的调研问卷。有点类似于调查派。先上一张截图吧:

亚洲必赢官网 1

花色的效果首即使CRUD操作,所以那一个适合angular的利用场景,双向绑定对于贯彻实时预览那样的效应大概是随手拈来。

花色的前后端是一心分开的,后端不渲染页面,只提供数据接口,前端采纳ng的动态模板来渲染页面,通过ajax请求来博取所需数据。

品种自己已经开源到github,有趣味的同班能够查阅:

2.学问剖析

ngRoute是一个AngularJS的模块。其不是在AngularJS的主旨库当中。

           
在动用ngRoute的时候,实际上,我们是在选取的主模块中引入ngRoute模块并丰裕$routeProvider服务到主模块的config方法中来达成大家的靶子。那与其他部分库的利用方法是相近的,如ng-grid。

           
在ngRoute中,紧要有$route、$routeProvider、$routeParams七个服务项目。

           
$routeProvider用于在主应用主模块的配置方式中。$route与$routeParams一般常见于控制器中。

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

劳务$routeParams保存了地点栏中的参数

劳务$location用来兑现用于获取当前url以及变更如今的url,并且存入历史记录

劳动$route已毕路由相当,并且提供路由相关的质量访问及事件,如访问当前路由对应的controller

指令ngView用来在主视图中指定加载子视图的区域

angular路由得以兑现多视图的单页Web应用。
当请求一个url时,依据路由配置匹配那个url,然后请求模板片段,并插入到ng-view中去。那种做法使网页局部刷新,收缩了切换网页时带来的突兀感,
也缩减了档次的代码量。

大家都知道angular js日常用来支付客户端的单页面应用
所以要在一个页面呈现分歧的视图,路由起到了重在的效益 angular.js
为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去切换视图.
angularUI 也为大家封装了一个独门的路由模块 ui-router ,它是一种靠状态
state 来切换视图. 在学习ui-router此前可以先通晓一下
angulajs中路由和原生路由ngroute相关的定义

<div ui-view></div>
$stateProvider.state(“home”,{
template: “<h1>hi</h1>”
})
抑或这样部署:

前端目录结构

用ng来营造一个类型应当怎么布署目录结构吧?为了不人工增添复杂度,我那里没有用bower来保管信赖库,也远非别的小说中介绍的那样用yeoman来生成项目,只是一味的手动来创立目录,那样能够把我们的注意力集中到项目的中坚上,目录结构是这么的:

前者的代码都在src目录下,包罗进口文件index.html,那样方便大家后续做联合压缩等编译工作,编译后的文件可以一起放入dist目录下。

3.科普难点

ngRoute落成原理和怎样使用路由?

二.学问剖析

$stateProvider.state(“home”{
views: {
“”: {
template: “<h1>hi</h1>”
}
}
})
==盛名称的ui-view

首页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已毕原理

大家精晓,设置

<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的更动,加载相应的沙盘文件。

2.1什么是路由

<div ui-view=”main”></div>
$stateProvider.state(“home”,{
views: {
“main” : {
template: “<h1>hi</h1>”
}
}
})
==多个ui-view

入口文件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;
});

4.化解方案

貌似景况下,我们访问网页的时候,是因而url地址。比如大家日常访问一个网页: 

<div ui-view></div>
<div ui-view=”data”></div>
$stateProvider.state(“home”,{
views: {
“”:{template: “<h1>hi</h1>”},
“data”: {template: “<div>data</div>”}
}
})
品类文件结构
node_modules/
partials/
…..about.html
…..home.html
…..photos.html
app.js
index.html
创建state和view
app.js

控制器合集controllers.js

controller.js里面是兼具的controller定义,由于那个项目相比小,而且反正最终都要合并,所以就都放在一个文书里了,那样可以采取链式写法app.controller(‘a’,
…).controller(‘b’,
…), 一口气将富有的controller都定义好。即使项目比较大,controller多,可以把controllers建为一个文本夹,然后在里面放各样controller。

controller里面就是跟工作有关的局地代码了,如试题数据的先导化,添加答案、删除选项等操作。

只是当大家须求倡导ajax请求的时候,如保存试题,就不当在controller里面直接写了,那样会造成逻辑混杂代码混乱。所有要求请求服务端的操作,大家可以抽象为一个个劳务,举行“分层”,通过ng提供的service机制来做调用。

NGROUTE包蕴以下一些:

服务$routeProvider用来定义一个路由表,即地址栏与视图模板的照射

服务$routeParams保存了地址栏中的参数

服务$location用来落到实处用于获取当前url以及变更方今的url,并且存入历史记录

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

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

$routeProvider提供了概念路由表的劳动,它有几个着力措施,when(path,route)和otherwise(params)。

不过在angular中是那般的 

var photoGallery = angular.module(‘photoGallery’,[“ui.router”]);
photoGallery.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise(‘/home’);
$stateProvider
.state(‘home’,{
url: ‘/home’,
templateUrl: ‘partials/home.html’
})
.state(‘photos’,{
url: ‘/photos’,
templateUrl: ‘partials/photos.html’
})
.state(‘about’,{
url: ‘/about’,
templateUrl: ‘partials/about.html’
})
})
index.html

劳务合集services.js

接上头,所有和课题相关的服务端请求,大家可以封装成一个QuestionService,那几个服务提供:提交试题、删除试题、更新试题等劳务,那样层次就很显明了。

故而,在services.js中,大家定义所有和劳务相关的事物,在本项目中,大家的劳动全都是ajax请求,可以用ng提供的$http服务来很便宜的完成。事实上service中并不是必须写ajax请求,凡是可以抽象精通为“公共服务”的事物,都得以定义在那边,可以被别的模块随意调用。

ngRoute的使用

a.引入五个文本,angular和angular-route:

                    

<script src=”angular.min.js”></script>

<script src=”angular-route.min.js”></script>

b.主页面中安装容器ng-view

c.然后在ng-app中注入ngRoute

d.最后计划路由表

一个不难易行的ngRoute结构示例

                    

<script>

        angular.module(‘indexApp’, [ngRoute])

        .config([‘$routeProvider’, function($routeProvider) {

$routeProvider

                .when(‘/div1’, {

                    template: ‘<p>这是div1{{text}}</p>’,

                    controller: ‘div1Controller’

})

                .when(‘/div2’, {

                    template: ‘<p>这是div2{{text}}</p>’,

                    controller: ‘div2Controller’

})

                .when(‘/div3’, {

                    template: ‘<p>这是div3{{text}}</p>’,

                    controller: ‘div3Controller’

})

                .when(‘/content/:id’, {

                    template: ‘<p>这是content{{id}}</p>’,

                    controller: ‘div4Controller’

})

.otherwise({

                    redirectTo: ‘/div1’

});

}]);

    </script>

<!DOCTYPE html>
<html lang=”en” ng-app=”photoGallery”>
<head>
<meta charset=”UTF-8″>
<title></title>
<link rel=”stylesheet”
href=”node_modules/bootstrap/dist/css/bootstrap.css”/>
</head>
<body>
<h1>Welcome</h1>
<div ui-view></div>
<script
src=”node_modules/jquery/dist/jquery.js”></script>
<script src=”node_modules/angular/angular.js”></script>
<script
src=”node_modules/angular-ui-router/release/angular-ui-router.js”></script>
<script
src=”node_modules/angular-animate/angular-animate.js”></script>
<script
src=”node_modules/bootstrap/dist/js/bootstrap.js”></script>
<script
src=”node_modules/angular-bootstrap/ui-bootstrap-tpls.js”></script>
<script src=”app.js”></script>
</body>
</html>
state之间的跳转
index.html

命令合集directives.js

打听过ng的同窗应该对指令不会陌生,通过指令我们得以用扩大html标签的法门来很简单的贯彻部分UI效果,使用方便、可被五个地点国有使用,就如过去大家写jquery插件一样。所有的一声令下都定义在这一个文件中,同样可以动用链式写法,很爽。

在我们的类型中,有一部分功能是通用的,例如列表的分页,那么就可以把分页功用做成一个限令。我定义了一个名为pagenav的命令,然后在有着需求用分页的地点就足以调用了,代码如下:

JavaScript

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

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

只需一个标签,然后经过质量指定分页数据和翻页函数即可。

5.参考文献

菜鸟教程

AngularJS路由二三事(一):ngRoute

ngRoute 模块_AngularJS中文网

当大家点击以上任一一个链接时,向服务器请求的地点都是
,而#号之后的情节在向服务器端请求时会被浏览器忽略掉,
所以大家在客户端完成#号前面的功能达成即可。一句话来说,路由通过#+标记帮忙大家分别分裂逻辑页面,并将其绑定到对应的控制器上。

<nav class=”navbar navbar-inverse”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<button class=”navbar-toggle collapsed” type=”button”
data-toggle=”collapse”
data-target=”#bs-example-navbar-collapse-1″>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a ui-sref=”home” class=”navbar-brand”>Home</a>
</div>
<div class=”collapse navbar-collapse”
id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav”>
<li>
<a ui-sref=”photos”>Photos</a>
</li>
<li>
<a ui-sref=”about”>About</a>
</li>
</ul>
</div>
</div>
</nav>
<div ui-view></div>
上述通过ui-sref属性已毕state之间的跳转。
多个view以及state嵌套
偶尔,一个页面上或许有八个ui-view,比如:

过滤器合集filters.js

咱们的体系利用ng提供的动态模板,服务端不渲染页面,只提供数据接口。有些数据大家必要进行格式化后进行输出,那就用到filter了,所有的filter都位居此处。filter的概念和应用的格外简单,此不不多述了。

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)。

2.2透过angularjs中的路由模块,达成ng-route的步骤 

<div ui-view=”header”></div>
<div ui-view=”body”></div>
假定,以上页面属于一个称谓为parent的state中。
咱俩明白在ui-router中,一个state大致是这样设置的:

前者路由定义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中配备好路由规则,整站无刷新跳转如同此不难的兑现了。

标题一: 为啥ui-router可以嵌套路由而ng-router不可能嵌套路由

(1)载入包蕴ng-route的JS文件 (2)包含了 ngRoute
模块作为主应用模块的信赖模块 (3)使用指令ng-view
(4)我们在html中定义链接,可以兑现一个单页应用

<div ui-view=”header”></div>
<div ui-view=”body”></div>
装有state下views下的持有键值对(类似 “body@content”:{templateUrl:
‘partials/photos.html’})都被置于一个键值集合中。而ui-view的办事规律就是按照自己的属性值,到这些键值集合中去找匹配的键,找到就把相应的页面突显出来。
点击header对应的页面链接,可能会跳转到此外的子页面出现在<div
ui-view=”body”></div>那个职位。那时候页面现身了子父关系,而各样页面都属于某个state,这样state间就涌出了子父关系。那一个跳转的子页面,在路由设置中,可能被称为parent.son1,
parent.son2…那就是state的嵌套。
在现有的公文结构上扩张content.html, header.html,文件结构变成:
node_modules/
partials/
…..about.html
…..home.html
…..photos.html
…..content.html
…..header.html
app.js
index.html
content.html 包涵了多各ui-view,
一个ui-view和页头相关,保持不变;令一个ui-view和会按照页头上的点击展现差距的内容

tpl目录

接纳ui-router做了前者路由后,除了进口页面index.html外,其余所有页面就都变成模板了(被ui-router动态加载)。所有的模板都放在tpl目录下。假如事情的模块较多,可以在此目录下再新建文件夹,本项目比较简单,所以就唯有一层。不论有微微层目录,在routers.js中配置好就OK啦。利用ui-router可以注入模板对应的控制器,所以代码中我们也无需在加ng-controller,模板文件中就是很彻底的ng模板。

答:因为ng-router没有强烈的父子层级关系,ui-router明确了那一点

var app=angular.module(‘app’,[‘ngRoute’]);

<div ui-view=”header”></div>
<div ui-view=”body”></div>
header.html 把原先indext.html中nav部分放到那里来

lib目录

那边放置的是项目所需的外表库。有angular、ui-router、jquery、bootstrap。你可以观看本人只是把代码文件给一贯放里面了,没有用当下流行的bower进行保管。是因为我不想再人工的增添复杂度,万一有人的机器上bower安装战败或者git环境有难题,或者github不可能访问,都会令人不胜颓败。

左右就那多少个安定版本,不如直接下载过来。如若急需减小我前期用gulp来搞一下就行了。

题材二:分歧页面之间什么传参?

.controller(‘pageOneCtrl’, function ($scope, $state) {

              $scope.toPage2 = function (id) {

                $state.go(‘page2’, {ID:id});

            };

            //接收页面:

            .controller(‘pageTwoCtrl’, function ($scope, $state,
$stateParams) {

              var receivedId = $stateParams.ID;

              console.log(receivedId);

            //打印的结果即为id

【亚洲必赢官网】哪些选用ui,AngularJs前端架构。            });

可以透过点击事件开展传参

html中:

ng-click=“toPage2(name,number)”

控制器中:

  .controller(‘pageOneCtrl’, function ($scope, $state) {

$scope.toPage2 = function (name,number) {

$state.go(‘page2’, {

args:{

  NAME:name,

  NUMBER:number

  });

};

});

在其次个页面中经过$staeParams得到参数ID。

            .controller(‘pageTwoCtrl’, function ($scope, $state,
$stateParams) {

  var receivedName = $stateParams.args.NAME;

  var receivedNumber = $stateParams.args.NUMBER;

});

app.config([‘$routeProvider’,function($routeProvider) {

<nav class=”navbar navbar-inverse”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<button class=”navbar-toggle collapsed” type=”button”
data-toggle=”collapse”
data-target=”#bs-example-navbar-collapse-1″>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a ui-sref=”content.home” class=”navbar-brand”>Home</a>
</div>
<div class=”collapse navbar-collapse”
id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav”>
<li>
<a ui-sref=”content.photos”>Photos</a>
</li>
<li>
<a ui-sref=”content.about”>About</a>
</li>
</ul>
</div>
</div>
</nav>
index.html 那时变成了那样
<div ui-view></div>
app.js 路由现行这么设置

总结

本条小品种的前端结构就是这些样子呀。从上边大家得以观望,用ng来做前端的架构仍然很有系统的。controller、service、directive那一个概念,本质上依旧“模块”,所以大家可以以模块开发的法子来很舒服的写代码,文件与公事之间平素不别的耦合和凭借。模块所需的借助,大家由此ng的注入机制来给注入。所以在index.html中引入这一个文件的时候,没有种种必要,任意顺序引入皆可。

顺手说一句,前端代码的后甩卖,我早已用gulp写好了本子,用npm安装所需的包后,执行gulp就可以编译生成dist目录。

正文只做angular前端架构入门级其他介绍,关于文中涉及的有些具体技术细节,可以查看自己写的angular种类著作

那些示例项目自己已开源到github(),如今一度落到实处了基本成效。后续我会增加更加多的听从,到时候也必将会波及到更加多的技能难题,angular举办前端架构的路才刚刚初阶。

1 赞 1 收藏 1
评论

亚洲必赢官网 2

难题三:paramr是做什么用的

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

this.$router.push({

 path:”/detail”,

 params:{

 name:’nameValue’,

 code:10011

 }

});

腾讯摄像链接:

PPT链接:

$routeProvider.

var photoGallery = angular.module(‘photoGallery’,[“ui.router”]);
photoGallery.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise(‘home’);
$stateProvider
.state(‘content’,{
url: ‘/’,
views:{
“”:{templateUrl: ‘partials/content.html’},
“header@content”:{templateUrl: ‘partials/header.html’},
}
})
.state(‘content.home’,{
url: ‘home’,
views:{
“body@content”:{templateUrl: ‘partials/home.html’}
}
})
.state(‘content.photos’,{
url: ‘photos’,
views:{
“body@content”:{templateUrl: ‘partials/photos.html’}
}
})
.state(‘content.about’,{
url:’about’,
views:{
“body@content”:{templateUrl: ‘partials/about.html’}
}
})
})
此时,页面是如此突显出来的:
→ 来到home那么些路由

鸣谢

谢谢我们看来

BY :  李仁 | 吴昊杰

angular路由

小课堂

        分享人: 吴昊杰

when(‘/login’,{

.state(‘content.home’,{
url: ‘home’,
views:{
“body@content”:{templateUrl: ‘partials/home.html’}
}
})
上述,告诉大家partials/home.html将会被加载到与”body@content”匹配的ui-view中。暂时对应的ui-view还不曾出现,于是伺机。
→ 路由看到index.html上的<div ui-view></div>

templateUrl:’login.html’}).

.state(‘content’,{
url: ‘/’,
views:{
“”:{templateUrl: ‘partials/content.html’},
“header@content”:{templateUrl: ‘partials/header.html’},
}
})
于是,就找到了content这么些state下views下的 “”:{templateUrl:
‘partials/content.html’}这么些键值对,把partials/content.html显示出来。
→ 分别加载partials/content.html页面上的逐一部分
探望<div ui-view=”header”></div>,就加载如下:
“header@content”:{templateUrl: ‘partials/header.html’},
看到<div ui-view=”body”></div>,先加载
“body@content”:{templateUrl: ‘partials/home.html’}
→ 点击header上的链接
点击<a ui-sref=”content.photos”>Photos</a>,来到:

when(‘/list’,{

.state(‘content.photos’,{
url: ‘photos’,
views:{
“body@content”:{templateUrl: ‘partials/photos.html’}
}
})
把partials/photos.html显示到<div
ui-view=”body”></div>中去。
点击<div ui-view=”body”></div>,来到:

templateUrl:’list.html’}).

.state(‘content.about’,{
url:’about’,
views:{
“body@content”:{templateUrl: ‘partials/about.html’}
}
})

AngularJS 路由也可以通过差距的沙盘来兑现。$routeProvider.when
函数的第二个参数是 URL 或者 URL 正则规则,首个参数为路由安顿对象。

把partials/about.html显示到<div
ui-view=”body”></div>中去。
state多级嵌套
如上,在路由安装中,state名称有content,
content.photos有了这般的一层嵌套。接下来,要促成state的文山会海嵌套。
在photos.html页面准备加载一个子页面,叫做photos-list.html;
与photo-list.html页面相邻的还有一个页面,叫做photo-detail.html;
在photo-detail.html页面上加载一个子页面,叫做photos-detail-comment.html;
如此这般,页面有了嵌套关系,state也应和的会有嵌套关系。
明天,文件结构变成:
node_modules/
partials/
…..about.html
…..home.html
…..photos.html
…..content.html
…..header.html
…..photos-list.html
…..photo-detail.html
…..photos-detail-comment.html
亚洲必赢官网 ,app.js
index.html
photos.html 加一个容纳子页面的ui-view
photos
<div ui-view></div>
如何到达这几个子页面呢?修改header中的相关部分如下:

路由配置对象语法规则如下:

<nav class=”navbar navbar-inverse”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<button class=”navbar-toggle collapsed” type=”button”
data-toggle=”collapse”
data-target=”#bs-example-navbar-collapse-1″>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a ui-sref=”content.home” class=”navbar-brand”>Home</a>
</div>
<div class=”collapse navbar-collapse”
id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav”>
<li>
<a ui-sref=”content.photos.list”>Photos</a>
</li>
<li>
<a ui-sref=”content.about”>About</a>
</li>
</ul>
</div>
</div>
以上,通过<a
ui-sref=”content.photos.list”>Photos</a>来到photos.html的子页面photos-list.html.
photos-list.html 通过2种途径到隔壁页photo-detail.html

$routeProvider.when(url,
{template:string,//用于指定视图模板,也足以是一个形式该办法必须回到html模板内容

<h1>photos-list</h1>
<ul>
<li><a
ui-sref=”^.detail”>我通过相对路径到邻县的state</a></li>
<li><a
ui-sref=”content.photos.detail”>我经过相对路径到邻县的state</a></li>
</ul>
photo-detail.html
又提供了赶到其子页面photos-detail-comment.html的ui-view

templateUrl:string,//视图模板路径

<h1>photo-details</h1>
<a class=”btn btn-default”
ui-sref=”.comment”>通过相对路径去子state</a>
<div ui-view></div>
photos-detail-comment.html 则很粗略:
<h1>photos-detail-comment</h1>
app.js state多级嵌套的装置为

controller:string,function或 array,//控制器名称或控制器构造方法

var photoGallery = angular.module(‘photoGallery’,[“ui.router”]);
photoGallery.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise(‘home’);
$stateProvider
.state(‘content’,{
url: ‘/’,
views:{
“”:{templateUrl: ‘partials/content.html’},
“header@content”:{templateUrl: ‘partials/header.html’},
}
})
.state(‘content.home’,{
url: ‘home’,
views:{
“body@content”:{templateUrl: ‘partials/home.html’}
}
})
.state(‘content.photos’,{
url: ‘photos’,
views:{
“body@content”:{templateUrl: ‘partials/photos.html’}
}
})
.state(‘content.photos.list’,{
url: ‘/list’,
templateUrl: ‘partials/photos-list.html’
})
.state(‘content.photos.detail’,{
url: ‘/detail’,
templateUrl: ‘partials/photos-detail.html’
})
.state(‘content.photos.detail.comment’,{
url: ‘/comment’,
templateUrl: ‘partials/photos-detail-comment.html’
})
.state(‘content.about’,{
url:’about’,
views:{
“body@content”:{templateUrl: ‘partials/about.html’}
}
})
})
抽象state
如果一个state,没有经过链接找到它,那就足以把那些state设置为abstract:true,大家把以上的content和content.photos那2个state设置为架空。

controllerAs:string,//通过控制器标识符名称引用控制器

.state(‘content’,{
url: ‘/’,
abstract: true,
views:{
“”:{templateUrl: ‘partials/content.html’},
“header@content”:{templateUrl: ‘partials/header.html’},
}
})

.state(‘content.photos’,{
url: ‘photos’,
abstract: true,
views:{
“body@content”:{templateUrl: ‘partials/photos.html’}
}
})
那么,当一个state设置为架空,假设通过ui-sref或路由导航到该state会出现哪些结果吗?
–会导航到默许路由上
$urlRouterProvider.otherwise(‘home’);

resolve: object类型,//用于指定注入控制器中的内容});

.state(‘content.home’,{
url: ‘home’,
views:{
“body@content”:{templateUrl: ‘partials/home.html’}
}
})
最终把partials/home.html突显出来。
运用控制器
在实际项目中,数据大致从controller中来。
首先在路由中装置state所用到的控制器以及控制器别名。

ui-router是一个方可用来替换AngularJS原生路由的插件,它最大的风味就是支持嵌套路由

var photoGallery = angular.module(‘photoGallery’,[“ui.router”]);
photoGallery.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise(‘home’);
$stateProvider
.state(‘content’,{
url: ‘/’,
abstract: true,
views:{
“”:{templateUrl: ‘partials/content.html’},
“header@content”:{templateUrl: ‘partials/header.html’},
}
})
.state(‘content.home’,{
url: ‘home’,
views:{
“body@content”:{
templateUrl: ‘partials/home.html’,
controller: ‘HomeController’,
controllerAs: ‘ctrHome’
}
}
})
.state(‘content.photos’,{
url: ‘photos’,
abstract: true,
views:{
“body@content”:{
templateUrl: ‘partials/photos.html’,
controller: ‘PhotoController’,
controllerAs: ‘ctrPhoto’
}
}
})
.state(‘content.photos.list’,{
url: ‘/list’,
templateUrl: ‘partials/photos-list.html’,
controller: “PhotoListController”,
controllerAs: ‘ctrPhotoList’
})
.state(‘content.photos.detail’,{
url: ‘/detail’,
templateUrl: ‘partials/photos-detail.html’,
controller: ‘PhotoDetailController’,
controllerAs: ‘ctrPhotoDetail’
})
.state(‘content.photos.detail.comment’,{
url: ‘/comment’,
templateUrl: ‘partials/photos-detail-comment.html’
})
.state(‘content.about’,{
url:’about’,
views:{
“body@content”:{templateUrl: ‘partials/about.html’}
}
})
})
添加controller.js,该公文用来定义所用到的controller.现在的文件结构为:
asserts/
…..css/
…..images/
……….image1.jpg
……….image2.jpg
……….image3.jpg
……….image4.jpg
node_modules/
partials/
…..about.html
…..home.html
…..photos.html
…..content.html
…..header.html
…..photos-list.html
…..photo-detail.html
…..photos-detail-comment.html
app.js
index.html
controllers.js

那么,什么是嵌套路由呢?

photoGallery.controller(‘HomeController’,[‘$scope’, ‘$state’,
function($scope, $state){
this.message = ‘Welcome to the Photo Gallery’;
}]);
//别名:ctrPhoto
photoGallery.controller(‘PhotoController’,[‘$scope’,’$state’,
function($scope, $state){
this.photos = [
{ id: 0, title: ‘Photo 1’, description: ‘description for photo 1’,
imageName: ‘image1.jpg’, comments:[
{name: ‘user1’, comment: ‘Nice’},
{ name:’User2′, comment:’Very good’}
]},
{ id: 1, title: ‘Photo 2’, description: ‘description for photo 2’,
imageName: ‘image2.jpg’, comments:[
{ name: ‘user2’, comment: ‘Nice’},
{ name:’User1′, comment:’Very good’}
]},
{ id: 2, title: ‘Photo 3’, description: ‘description for photo 3’,
imageName: ‘image3.jpg’, comments:[
{name: ‘user1’, comment: ‘Nice’}
]},
{ id: 3, title: ‘Photo 4’, description: ‘description for photo 4’,
imageName: ‘image4.jpg’, comments:[
{name: ‘user1’, comment: ‘Nice’},
{ name:’User2′, comment:’Very good’},
{ name:’User3′, comment:’So so’}
]}
];
//给子state下controller中的photos赋值
this.pullData = function(){
$scope.$$childTail.ctrPhotoList.photos = this.photos;
}
}]);
//别名:ctrPhotoList
photoGallery.controller(‘PhotoListController’,[‘$scope’,’$state’,
function($scope, $state){
this.reading = false;
this.photos = new Array();
this.init = function(){
this.reading = true;
setTimeout(function(){
$scope.$apply(function(){
$scope.ctrPhotoList.getData();
});
}, 1500);
}
this.getData = function(){
//调用父state中controller中的方法
$scope.$parent.ctrPhoto.pullData();
/*this.photos = $scope.$parent.ctrPhoto.photos;*/
this.reading = false;
}
}]);
//别名:ctrPhotoDetail
photoGallery.controller(‘PhotoDetailController’,[‘$scope’, ‘$state’,
function($scope,$state){
}]);
以上,通过$scope.$$childTail.ctrPhotoList在父state中的controller中获得子state中的controller;通过$scope.$parent.ctrPhoto在子state中的controller中获得父state中的controller。
photos-list.html

原生路由刚刚也给大家说了 angular的视图是透过ng-view那一个命令举行加载的
然后通过控制器来加载相应的视图模板
如若说我们有一个网页,左边是菜单栏,右侧是逐一菜单所对应的视图。
那么,假如按照那样的定义,点击每个菜单项,岂不得刷新整个网页?
而我辈想要的只是左边的视图刷新。所以,那即将用到嵌套路由了。

<h1>photos-list</h1>
<div ng-init=”ctrPhotoList.init()”>
<div style=”margin:auto; width: 40px;”
ng-if=”ctrPhotoList.reading”>
<i class=”fa fa-spinner fa-5x fa-pulse”></i>
</div>
<div class=”well well-sm” ng-repeat=”photo in
ctrPhotoList.photos”>
<div class=”media”>
<div class=”media-left” style=”width:15%;”>
<a ui-sref=”content.photos.detail”>
<img class=”img-responsive img-rounded”
src=”../asserts{{photo.imageName}}” alt=””>
</a>
</div>
<div class=”media-body”>
<h4 class=”media-heading”>{{photo.title}}</h4>
{{photo.description}}
</div>
</div>
</div>
</div>
state间如何传路由参数
在content.photos.detail那一个state设置接收一个路由参数。

三.周边难题

.state(‘content.photos.detail’,{
url: ‘/detail/:id’,
templateUrl: ‘partials/photos-detail.html’,
controller: ‘PhotoDetailController’,
controllerAs: ‘ctrPhotoDetail’
})
photos-list.html 送出一个路由参数
<h1>photos-list</h1>
<div ng-init=”ctrPhotoList.init()”>
<div style=”margin:auto; width: 40px;”
ng-if=”ctrPhotoList.reading”>
<i class=”fa fa-spinner fa-5x fa-pulse”></i>
</div>
<div class=”well well-sm” ng-repeat=”photo in
ctrPhotoList.photos”>
<div class=”media”>
<div class=”media-left” style=”width:15%;”>
<a ui-sref=”content.photos.detail({id:photo.id})”>
<img class=”img-responsive img-rounded”
src=”../asserts{{photo.imageName}}” alt=””>
</a>
</div>
<div class=”media-body”>
<h4 class=”media-heading”>{{photo.title}}</h4>
{{photo.description}}
</div>
</div>
</div>
</div>
如上,通过<a
ui-sref=”content.photos.detail({id:photo.id})”>把路由参数送出。
controller.js PhotoDetailController控制器通过$stateParams获取路由参数

怎样促成嵌套路由?

//别名:ctrPhotoDetail
photosGallery.controller(‘PhotoDetailController’, [‘$scope’, ‘$state’,
‘$stateParams’,
function($scope, $state, $stateParams){
var id = null;
this.photo = null;
this.init = function(){
id = parseInt($stateParams.id);
this.photo = $scope.ctrPhoto.photos[id];
}
}
]);
photos-detail.html 从以上的PhotoDetailController中获取数据。

四.化解方案

<h1>photo-details</h1>
<a class=”btn btn-default”
ui-sref=”.comment”>通过相对路径去子state</a>
<a ui-sref=”content.photos.list” style=”margin-left: 15px;”>
<i class=”fa fa-arrow-circle-left fa-2x”></i>
</a>
<div ng-init=”ctrPhotoDetail.init()”>
<img class=”img-responsive img-rounded”
ng-src=”../assets{{ctrPhotoDetail.photo.imageName}}”
style=”margin:auto; width: 60%;”>
<div class=”well well-sm” style=”margin:auto; width: 60%; margin-top:
15px;”>
<h4>{{ctrPhotoDetail.photo.title}}</h4>
<p>{{ctrPhotoDetail.photo.description}}</p>
</div>
<div style=”margin:auto; width: 80%; margin-bottom: 15px;”>
<button style=”margin-top: 10px; width:100%;”
class=”btn btn-default” ui-sref=”.comment”>Comments</button>
</div>
</div>
<div ui-view></div>
state间怎么着传字符串参数
在路由中那样设置:

ui-route子路由得以再而三父路由,也就是说 state
设置可以嵌套,通过名称中的.(点)来分别层次.

.state(‘content.photos.detail.comment’,{
url:’/comment?skip&limit’,
templateUrl: ‘partials/photos-detail-comment.html’,
controller: ‘PhotoCommentController’,
controllerAs: ‘ctrPhotoComment’
})
controllers.js 中修改如下

五.编码实战

photoGallery.controller(‘HomeController’,[‘$scope’, ‘$state’,
function($scope, $state){
this.message = ‘Welcome to the Photo Gallery’;
}]);
//别名:ctrPhoto
photoGallery.controller(‘PhotoController’,[‘$scope’,’$state’,
function($scope, $state){
this.photos = [
{ id: 0, title: ‘Photo 1’, description: ‘description for photo 1’,
imageName: ‘image1.JPG’, comments:[
{ name:’User1′, comment: ‘Nice’, imageName: ‘man.png’},
{ name:’User2′, comment:’Very good’, imageName: ‘man.png’},
{ name:’User3′, comment:’Nice’, imageName: ‘woman.png’},
{ name:’User4′, comment:’Very good’, imageName: ‘woman.png’},
{ name:’User5′, comment:’Very good’, imageName: ‘man.png’},
{ name:’User6′, comment:’Nice’, imageName: ‘woman.png’},
{ name:’User7′, comment:’So so’, imageName: ‘man.png’}
]},
{ id: 1, title: ‘Photo 2’, description: ‘description for photo 2’,
imageName: ‘image2.JPG’, comments:[
{ name:’User1′, comment: ‘Nice’, imageName: ‘man.png’},
{ name:’User2′, comment:’Very good’, imageName: ‘man.png’},
{ name:’User3′, comment:’Nice’, imageName: ‘woman.png’},
{ name:’User4′, comment:’Very good’, imageName: ‘woman.png’}
]},
{ id: 2, title: ‘Photo 3’, description: ‘description for photo 3’,
imageName: ‘image3.JPG’, comments:[
{ name:’User1′, comment: ‘Nice’, imageName: ‘man.png’},
{ name:’User2′, comment:’Very good’, imageName: ‘man.png’},
{ name:’User3′, comment:’Nice’, imageName: ‘woman.png’},
{ name:’User4′, comment:’Very good’, imageName: ‘woman.png’},
{ name:’User5′, comment:’Very good’, imageName: ‘man.png’},
{ name:’User6′, comment:’Nice’, imageName: ‘woman.png’},
{ name:’User7′, comment:’So so’, imageName: ‘man.png’}
]},
{ id: 3, title: ‘Photo 4’, description: ‘description for photo 4’,
imageName: ‘image4.JPG’, comments:[
{ name:’User6′, comment:’Nice’, imageName: ‘woman.png’},
{ name:’User7′, comment:’So so’, imageName: ‘man.png’}
]}
];
//给子state下controller中的photos赋值
this.pullData = function(){
$scope.$$childTail.ctrPhotoList.photos = this.photos;
}
}]);
//别名:ctrPhotoList
photoGallery.controller(‘PhotoListController’,[‘$scope’,’$state’,
function($scope, $state){
this.reading = false;
this.photos = new Array();
this.init = function(){
this.reading = true;
setTimeout(function(){
$scope.$apply(function(){
$scope.ctrPhotoList.getData();
});
}, 1500);
}
this.getData = function(){
//调用父state中controller中的方法
$scope.$parent.ctrPhoto.pullData();
/*this.photos = $scope.$parent.ctrPhoto.photos;*/
this.reading = false;
}
}]);
//别名:ctrPhotoDetail
photoGallery.controller(‘PhotoDetailController’, [‘$scope’, ‘$state’,
‘$stateParams’,
function($scope, $state, $stateParams){
var id = null;
this.photo = null;
this.init = function(){
id = parseInt($stateParams.id);
this.photo = $scope.ctrPhoto.photos[id];
}
}
]);
photoGallery.controller(‘PhotoCommentController’, [‘$scope’, ‘$state’,
‘$stateParams’,
function($scope, $state, $stateParams){
var id, skip, limit = null;
this.comments = new Array();
this.init = function(){
id = parseInt($stateParams.id);
var photo = $scope.ctrPhoto.photos[id];
if($stateParams.skip){
skip = parseInt($stateParams.skip);
}else{
skip = 0;
}
if($stateParams.limit){
limit = parseInt($stateParams.limit);
}else{
limit = photo.comments.length;
}
this.comments = photo.comments.slice(skip, limit);
}
}
]);
也就是,$stateParams不仅可以接收路由参数,还是能接受查询字符串参数。
photo-detail.html 需求把询问字符串参数传递出去

六.进行思考

<h1>photo-details</h1>
<a class=”btn btn-default”
ui-sref=”.comment”>通过相对路径去子state</a>
<a ui-sref=”content.photos.list” style=”margin-left: 15px;”>
<i class=”fa fa-arrow-circle-left fa-2x”></i>
</a>
<div ng-init=”ctrPhotoDetail.init()”>
<img class=”img-responsive img-rounded”
ng-src=”../assets{{ctrPhotoDetail.photo.imageName}}”
style=”margin:auto; width: 60%;”>
<div class=”well well-sm” style=”margin:auto; width: 60%; margin-top:
15px;”>
<h4>{{ctrPhotoDetail.photo.title}}</h4>
<p>{{ctrPhotoDetail.photo.description}}</p>
</div>
<div style=”margin:auto; width: 80%; margin-bottom: 15px;”>
<button style=”margin-top: 10px; width:100%;”
class=”btn btn-default” ui-sref=”.comment({skip:0,
limit:2})”>Comments</button>
</div>
</div>
<div ui-view></div>
上述,通过ui-sref=”.comment({skip:0, limit:2})把询问字符串传递出去。
photos-detail-comment.html

在 Angularjs 中 ui-sref 和 $state.go 怎么样传递参数?

<h1>photos-detail-comment</h1>
<div ng-init=”ctrPhotoComment.init()” style=”margin-top:15px;”>
<div ng-repeat=”comment in ctrPhotoComment.comments” class=”well
well-sm” style=”margin: auto; width: 60%;”>
<div class=”media”>
<div class=”media-left media-middle”>
<a href=””>
<img class=”img-circle” style=”width:60px;”
src=”../assets{{comment.imageName}}” alt=””>
</a>
</div>
<div class=”media-body”>
<h4 class=”media-heading”>{{comment.name}}</h4>
{{comment.comment}}
</div>
</div>
</div>
</div>
state间怎么传递对象
由此data属性,把一个目的赋值给它。

1.ui-sref、$state.go 的区别

.state(‘content’,{
url: ‘/’,
abstract: true,
data:{
user: “user”,
password: “1234”
},
views:{
“”:{templateUrl: ‘partials/content.html’},
“header@content”:{templateUrl: ‘partials/header.html’},
}
})
给header.html加上一个对应的控制器,并提供注销方法。

ui-sref一般接纳在a链接中

$stateProvider
.state(‘content’,{
url: ‘/’,
abstract: true,
data:{
user: “user”,
password: “1234”
},
views:{
“”:{templateUrl: ‘partials/content.html’},
“header@content”:{
templateUrl: ‘partials/header.html’,
controller: function($scope, $rootScope, $state){
$scope.logoff = function(){
$rootScope.user = null;
}
}
}
}
})
拉长一个关于登录页的state

$state.go一般选取在控制器中

.state(‘content.login’,{
url:’login’,
data:{
loginError: ‘User or password incorrect.’
},
views:{
“body@content” :{
templateUrl: ‘partials/login.html’,
controller: function($scope, $rootScope, $state){
$scope.login = function(user, password, valid){
if(!valid){
return;
}
if($state.current.data.user === user && $state.current.data.password ===
password){
$rootScope.user = {
name: $state.current.data.user
}
// Or Inherited
/*$rootScope.user = {
name: $state.$current.parent.data.user
};*/
$state.go(‘content.home’);
}else{
$scope.message = $state.current.data.loginError;
}
}
}
}
}
})
添加login.html文书,现在的文本结构为:
asserts/
…..css/
…..images/
……….image1.jpg
……….image2.jpg
……….image3.jpg
……….image4.jpg
node_modules/
partials/
…..about.html
…..home.html
…..photos.html
…..content.html
…..header.html
…..photos-list.html
…..photo-detail.html
…..photos-detail-comment.html
…..login.html
app.js
index.html
login.html

这五头的面目上是一律的 ui-sref源码里面最后调用的要么$state.go的方法

<form name=”form” ng-submit=”login(user, password,
form.$valid)”>
<div class=”panel panel-primary” style=”width:360px; margin:
auto;”>
<div class=”panel-heading”>
<h3 class=”panel-title”>Indentification</h3>
</div>
<div class=”panel-body”>
<input name=”user” type=”text” class=”form-control” ng-model=”user”
placeholder=”User …” required>
<span ng-show=”form.user.$error.required && form.user.$dirty”
class=”label label-danger”>Enter the user</span>
<hr>
<input name=”password” type=”password” class=”form-control”
ng-model=”password” placeholder=”Password …” required>
<span ng-show=”form.password.$error.required && form.password.$dirty”
class=”label label-danger”>Enter the password</span>
</div>
<div class=”panel-footer”>
<button class=”btn btn-default”
type=”submit”>Login</button>
<button class=”btn btn-default”
type=”reset”>Reset</button>
<span class=”label label-danger”>{{message}}</span>
</div>
</div>
</form>
header.html 修改如下

2.如何传递参数

<nav class=”navbar navbar-inverse”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<button class=”navbar-toggle collapsed” type=”button”
data-toggle=”collapse”
data-target=”#bs-example-navbar-collapse-1″>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” ui-sref=”content.home”>Home</a>
</div>
<div class=”collapse navbar-collapse”
id=”bs-example-navbar-collapse-1″>
<ul class=”nav navbar-nav”>
<li>
<a ui-sref=”content.photos.list”>Photos</a>
</li>
<li>
<a ui-sref=”content.about”>About</a>
</li>
</ul>
<ul class=”nav navbar-nav navbar-right”>
<li ng-if=”user.name” class=”dropdown”>
<a class=”dropdown-toggle” role=”button” aria-expanded=”false”
href=”#” data-toggle=”dropdown”>{{user.name}} <span
class=”caret”></span></a>
<ul class=”dropdown-menu” role=”menu”>
<li><a ui-sref=”content.home” ng-click=”logoff()”>Sing
out</a></li>
</ul>
</li>
<li ng-if=”!user.name”>
<a ui-sref=”content.login”>Sing In</a>
</li>
</ul>
</div>
</div>
</nav>
onEnter和onExit事件

第一,要在对象页面定义接受的参数:

.state(‘content.photos.detail’,{
url: ‘/detail/:id’,
templateUrl: ‘partials/photos-detail.html’,
controller: ‘PhotoDetailController’,
controllerAs: ‘ctrPhotoDetail’,
resolve:{
viewing: function($stateParams){
return{
photoId: $stateParams.id
}
}
},
onEnter: function(viewing){
var photo = JSON.parse(sessionStorage.getItem(viewing.photoId));
if(!photo){
photo = {
views: 1,
viewing: 1
}
}else{
photo.views = photo.views + 1;
photo.viewing = photo.viewing + 1;
}
sessionStorage.setItem(viewing.photoId, JSON.stringify(photo));
},
onExit: function(viewing){
var photo = JSON.parse(sessionStorage.getItem(viewing.photoId));
photo.viewing = photo.viewing – 1;
sessionStorage.setItem(viewing.photoId, JSON.stringify(photo));
}
})
在PhotoDetailController中:

$stateProvider.state(“page1”,{

photoGallery.controller(‘PhotoDetailController’, [‘$scope’, ‘$state’,
‘$stateParams’,
function($scope, $state, $stateParams){
var id = null;
this.photo = null;
this.viewObj = null;
this.init = function(){
id = parseInt($stateParams.id);
this.photo = $scope.ctrPhoto.photos[id];
this.viewObj = JSON.parse(sessionStorage.getItem($stateParams.id));
}
}
]);
photos-detail.html

url:”/page2″,

<h1>photo-details</h1>
<a class=”btn btn-default”
ui-sref=”.comment”>通过相对路径去子state</a>
<a ui-sref=”content.photos.list” style=”margin-left: 15px;”>
<i class=”fa fa-arrow-circle-left fa-2x”></i>
</a>
<div ng-init=”ctrPhotoDetail.init()”>
<img class=”img-responsive img-rounded”
ng-src=”../assets{{ctrPhotoDetail.photo.imageName}}”
style=”margin:auto; width: 60%;”>
<div class=”well well-sm” style=”margin:auto; width: 60%; margin-top:
15px;”>
<div class=”well well-sm pull-right” style=”width: 100px;”>
<i>Views <span
class=”badge”>{{ctrPhotoDetail.viewObj.views}}</span></i>
</div>
<div class=”well well-sm pull-right” style=”width: 110px;”>
<i>Viewing <span
class=”badge”>{{ctrPhotoDetail.viewObj.viewing}}</span></i>
</div>
<h4>{{ctrPhotoDetail.photo.title}}</h4>
<p>{{ctrPhotoDetail.photo.description}}</p>
</div>
<div style=”margin:auto; width: 80%; margin-bottom: 15px;”>
<button style=”margin-top: 10px; width:100%;”
class=”btn btn-default” ui-sref=”.comment({skip:0,
limit:2})”>Comments</button>
</div>
</div>
<div ui-view></div>
StateChangeStart事件
controller.js 增添如下

templateUrl:”page2.html”,

photoGallery.controller(‘RootController’, [‘$scope’, ‘$state’,
‘$rootScope’,
function($scope, $state, $rootScope){
$rootScope.$on(‘$stateChangeStart’,
function(event, toState, toParams, fromState, fromParams){
if(toState.data.required && !$rootScope.user){
event.preventDefault();
$state.go(‘content.login’);
}
});
}
]);
修改content这个state:

controller:”p2″,

.state(‘content’,{
url:’/’,
abstract: true,
data:{
user: “user”,
password: “1234”
},
views:{
“”:{
templateUrl: ‘partials/content.html’,
controller: ‘RootController’
},
“header@content”:{
templateUrl: ‘partials/header.html’,
controller: function($scope, $rootScope, $state){
$scope.logoff = function(){
$rootScope.user = null;
}
}
}
}
})
content.photos.detail这个state
.state(‘content.photos.detail’,{
url:’/detail/:id’,
templateUrl: ‘partials/photos-detail.html’,
controller: ‘PhotoDetailController’,
controllerAs: ‘ctrPhotoDetail’,
data:{
required: true
},
resolve:{
viewing: function($stateParams){
return{
photoId: $stateParams.id
}
}
},
onEnter: function(viewing){
var photo = JSON.parse(sessionStorage.getItem(viewing.photoId));
if(!photo){
photo = {
views: 1,
viewing: 1
}
}else{
photo.views = photo.views + 1;
photo.viewing = photo.viewing + 1;
}
sessionStorage.setItem(viewing.photoId, JSON.stringify(photo));
},
onExit: function(viewing){
var photo = JSON.parse(sessionStorage.getItem(viewing.photoId));
photo.viewing = photo.viewing – 1;
sessionStorage.setItem(viewing.photoId, JSON.stringify(photo));
}
})
以上,添加了

params:{name:null}//在对象页面定义接收的参数

data:{
required: true
}
同理,content.photos.detail.comment这个state

});

.state(‘content.photos.detail.comment’,{
url:’/comment?skip&limit’,
templateUrl: ‘partials/photos-detail-comment.html’,
controller: ‘PhotoCommentController’,
controllerAs: ‘ctrPhotoComment’,
data:{
required: true
}
})
StateNotFound事件
photosGallery.controller(‘RootController’, [‘$scope’, ‘$state’,
‘$rootScope’,
function($scope, $state, $rootScope){
$rootScope.$on(‘$stateChangeStart’,
function(event, toState, toParams, fromState, fromParams){
if(toState.data.required && !$rootScope.user){
event.preventDefault();
$state.go(‘content.login’);
return;
}
});
$rootScope.$on(‘$stateNotFound’,
function(event, unfoundState, fromState, fromParams){
event.preventDefault();
$state.go(‘content.notfound’);
});
}
]);

在对象页面的controller里注入$stateParams,然后$stateParams.参数名得到

添加一个state:

app.controller(“p2”,function($scope,$state,$stateParams){

.state(‘content.notfound’,{
url:’notfound’,
views: {
“body@content”: {templateUrl: ‘partials/page-not-found.html’}
}
})
page-not-found.html

console.log($stateParams.name);//接收参数 

<div class=”well well-sm” style=”margin: 20px;”>
<i class=”fa fa-frown-o fa-4x pull-left”></i><h3>404 –
Sorry! Not found your page.</h3>
</div>
StateChangeSuccess事件

});

photosGallery.controller(‘RootController’, [‘$scope’, ‘$state’,
‘$rootScope’,
function($scope, $state, $rootScope){
$rootScope.accessLog = new Array();
$rootScope.$on(‘$stateChangeStart’,
function(event, toState, toParams, fromState, fromParams){
if(toState.data.required && !$rootScope.user){
event.preventDefault();
$state.go(‘content.login’);
return;
}
});
$rootScope.$on(‘$stateNotFound’,
function(event, unfoundState, fromState, fromParams){
event.preventDefault();
$state.go(‘content.notfound’);
});
$rootScope.$on(‘$stateChangeSuccess’,
function(event, toState, toParams, fromState, fromParams){
$rootScope.accessLog.push({
user: $rootScope.user,
from: fromState.name,
to: toState.name,
date: new Date()
});
});
}
]);
累加一个state

$state.go(“page1.page2”,{name:’rose’});//传参

.state(‘content.log’,{
url:’log’,
data:{
required: true
},
views: {
“body@content”: {templateUrl: ‘partials/log.html’}
}
})
log.html

<a ui-sref=”page1.page3({name:’jack’})</a>

<h1><i class=”fa fa-file-text-o”></i> Access
Log</h1>
<div style=”margin:auto; width: 380px;”>
<div class=”well well-sm” ng-repeat=”log in accessLog track by
$index”>
<i class=”fa fa-pencil fa-2x pull-left”></i>
{{log.user ? log.user.name: ‘anonymous’}} in {{log.date | date:
‘longDate’}} at {{log.date | date: ‘shortTime’}}
<p>From: {{log.from}} => to: {{log.to}}</p>
</div>
</div>
StateChangeError事件

七.参考文献

photosGallery.controller(‘RootController’, [‘$scope’, ‘$state’,
‘$rootScope’,
function($scope, $state, $rootScope){
$rootScope.accessLog = new Array();
$rootScope.$on(‘$stateChangeStart’,
function(event, toState, toParams, fromState, fromParams){
if(toState.data.required && !$rootScope.user){
event.preventDefault();
$state.go(‘content.login’);
return;
}
});
$rootScope.$on(‘$stateNotFound’,
function(event, unfoundState, fromState, fromParams){
event.preventDefault();
$state.go(‘content.notfound’);
});
$rootScope.$on(‘$stateChangeSuccess’,
function(event, toState, toParams, fromState, fromParams){
$rootScope.accessLog.push({
user: $rootScope.user,
from: fromState.name,
to: toState.name,
date: new Date()
});
});
$rootScope.$on(‘$stateChangeError’,
function(event, toState, toParams, fromState, fromParams, error){
event.preventDefault();
$state.go(‘content.error’, {error: error});
});
}
]);
添加2个state:

学习ui-router

.state(‘content.profile’, {
url:’profile’,
data:{
required: true
},
resolve:{
showError: function(){
throw ‘Error in code.’;
}
},
views:{
“body@content”: {template: ‘<div>Error</div>’}
}
})
.state(‘content.error’,{
url:’error/:error’,
views:{
“body@content”:{
templateUrl: ‘partials/error.html’,
controller: function($scope, $stateParams){
$scope.error = {
message: $stateParams.error
}
}
}
}
})
error.html

八.更加多研究

<div class=”well well-sm” style=”margin: 20px;”>
<i class=”fa fa-exclamation-circle fa-2x”> Sorry! But this message
was displayed: {{error.message}}</i>
</div>

1.什么激活状态?

有两种格局来激活特定的景观

行使ui-sref绑定的总是

直白导航到与气象关联的url

使用$state.go()方法

2.多少个页面可能应用同一的html模板,我们是要平等的代码写N遍呢?

(1)在html中给ui-view添加名字

(2)在路由陈设中添加配置新闻

3.大家平时会需求用到路由去传参,例如编辑一条音讯,获取单个音信,应该如何去做吗?

angular-ui-router提供了一个$stateParams的service,可径直获取.在controller中的使用示例 
 有人肯定会疑窦,$stateParams从何而来,在地点大家给angular.module中曾经将其开始化,挂在到$rootScope.

PPT

undefined_腾讯视频

网站地图xml地图