angular2的routerLinkActive指令在路由激活时添加样式class .red{color: red; }<a routerLink="/user/login" routerLinkActive="red">login</a>当url是user或者/user/login的时候，a标签将会被加上classred。当url变化为别的时，class将会被移除。 如何添加两个class <a routerLink="/user/login" routerLinkActive="class1 class2">login</a>routerLinkActive的两种写法 <a routerLink="/user/login" routerLinkActive="cla...
前言 除了使用Router的navigate()方法切换路由，Angular2还提供了一个指令用来 将一个DOM对象增强为路由入口： @View({ directives:[RouterOutlet,RouterLink] template : `<nav> <b router-link="video">video</b> | <b router-link="music">music</b> </nav> <router-outlet></router-outlet>` }) RouterLink指令为宿主DOM对象添加click事件监听，在触发时调用Router的 navigate()方法进行路由。 不过本文主要介绍的是关于Angul...
路由高亮是什么？有什么好处？ 当你在做一个后台管理系统，左边是一排路由导航，点击可以进入不同的页面，那么这个路由所在dom元素会添加上样式表示当前是位置。但是一刷新你会发现，这个样式没了...怎么办？ 采用路由高亮：当路由被激活时允许你添加一个class在你添加路由的dom元素上，只有url变化时才会移除此样式。 当前路由被激活或者当前路由处于激活状态表示页面的url中路由和当前dom标签里的路由想匹配。 // 用法概览 @Dire...
序言： Angular APP 视图之间的跳转，依赖于 Router （路由），这一章，我们来讲述 Router 的应用 实例讲解 运行结果如下。 设置了3个导航栏， Home、 About、Dashboard。 点击不同的导航栏，跳转到相应的页面：创建3个 component ng g c homeng g c aboutng g c dashboard路由与配置 （1）**引入 Angular Router ** 当用到 Angular Router 时，需要引入 RouterModule，如下： // app.module.ts import { RouterModule } from @ang...
本文介绍了angular笔记路由之angular-router，分享给大家，具体如下：创建项目 ng new router --routing \\ 加routing参数 \\ 会新增一个app-routing.module.ts 文件路由的基本使用名称简介Routes路由的配置，保存着哪一个URL对应展示哪一个组件和在哪一个RouterOutler展示RouterOutler在HTML中标记路由内容呈现的占位符指令Router运行时执行的路由对象，可以通过navigate()和navigateByUrl()方法来导航到指定路由RouterLink在HTM...
Angular2 为我们提供了名为Title的Service用于修改和获取页面标题，但是如果只是能够在每个页面的ngOnInit方法中为每个页面设置标题岂不是太low了，不符合Angular2高(zhuang)大(bi)的身影。我们想要的结果是在页面改变时能够动态地改变页面标题，如此最好的解决方案就是组合使用Router事件和Title Service。 Title Service 使用Service自然首先要将其引入，不过要注意Title Service并不在@angular/core中，而是在@angular/platform...
博主用的ionic 这里使用ui-router传值，用来在跳转页面的同时带着你想带走的东西一起跳走 （PS：博主半路出家，尚是菜鸟，写的东西自己跑起来并没有什么问题但不敢保证写的一定对，语言也很随意，仅供参考。另，期待各位前辈的指教） 博主用的ionic 这里使用ui-router传值，用来在跳转页面的同时带着你想带走的东西一起跳走 需求是这样的，我有一个商品单子（概览页），点一个商品就可以去看它的详情（详情页） 要解决的问题就是把...
开始之前一些说明 angular-ui-router的使用方法有很多，此文中，我们直接在控制器中使用，并完成一个简单的路由。文中 Angular.js 的版本为 1.5.2下载和安装直接通过 bower 来安装 angular-ui-router使用 bower 安装 angular-ui-router 之前，首先需要安装 npm 和 bower 。npm 是node.js的包管理工具，下载安装node.js，即可完成 npm 的安装通过 npm 安装 bower （如果未安装 bower）：npm install -g bower 安装 angular-ui-route...
1.配置使用ui-router 1.1导入js文件 需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。 <script type="text/javascript" src="JS/angular.min.js"></script> <script type="text/javascript" src="JS/angular-ui-router.min.js"></script>1.2注入angular模块 var app = angular.module(myApp, [ui.router]);注入的名字“ui.router”，可在angular-ui-router.min.js里找到，...
ng-route模块中的when()和ui-route的state()都提供了resolve属性。 为什么需要使用resolve？ 当路由切换的时候，被路由的页面中的元素（标签）就会立马显示出来，同时，数据会被准备好并呈现出来。但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，而后再呈现出数据。这样就会导致页面会被渲染两遍，导致“页面UI抖动”的问题，对用户不太友好。resolve的出现解决了这个问题。 resolve是干嘛...
最近感觉有很多学angular 的童鞋在路由问题中还不清楚怎么使用。其实我之前也是一直晕晕的不懂怎么用，现在要好得多了。在这里就记录下ui-router使用。 就已目前做的这个项目来介绍下怎么使用吧。Note:最好是按照层次规则来设置路由名，好处是容易看懂，也便于管理。 我这里是以总state到模块state再到下一层模块state（再到下一层模块state）最后到详细页面的state来分层。 首先我们先定义一个总的state如： .state(home, {url: /...
最近一直在学习angular4，它确实比以前有了很大的变化和改进，好多地方也不是那么容易就能理解，好在官方的文档和例子是中文，对英文不太好的还是有很大帮助去学习。 官方地址：https://angular.cn/docs/ts/latest/api/router/index/Router-class.html 在学习的过程中路由（router）机制是离不开的，并且好多地方都要用到。 首先路由配置Route： import { NgModule } from @angular/core; import { RouterModule, Routes } f...
本文实例讲述了AngularJS路由Ui-router模块用法。分享给大家供大家参考，具体如下： 由于某些设计原因，AngularJS原生的路由模块有一些缺点，比如说不支持view的嵌套等，所以有许多社区开始自己设计路由模块，最有代表性的就是ui-route了。 ui-route是一个功能强大的路由模块，它在原生的ng-route模块上加强了其他方面的功能。 现在就开始做几个DEMO接触一下ui-route。 <!--初始页面--> <!doctype html> <meta charset="UTF-8"> <h...
什么是路由？路由是AngularJS构建单页面应用的基础。 路由，就是网络数据或者请求进行分发的一个网络组件。路由就是一个用于请求URL分发和跳转的一个应用组件，Angular中通过$routeProvider路由服务提供者进行核心的配置处理。 ng路由ng 路由是 AngularJS 官方提供的一种简单的路由操作。 ng 路由主要分三个组成部分：路由指令、路由服务、路由服务提供者 路由指令:ng-viewngView指令主要用于将路由指向的页面渲染到当前页面的布局...
AngularJS 路由 是通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。因此在设置好路由规则后，为html页面的a标签设置href路由链接切换不同的视图。Angular1.6版本之前通常有href=“#...”或href=“#/...”这两种写法，结果这两种写法在Angular1.6中没有任何反应。结果查看了下浏览器地址栏，默认视图链接竟然显示“#!/..”,是的，中间多加了个！号。AngularJS升级到了1.6版本后，里面多了很多/#!/的改...