AngularJs前端架构,怎么着行使ui

用“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~二〇一四年大红大紫,然而国内类似慢一拍,我从2015年才来看选择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

            });

可以由此点击事件举办传参

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>
AngularJs前端架构,怎么着行使ui。</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_腾讯摄像

相关文章

发表评论

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

*
*
Website