查看: 4019|回复: 0

[HTML代码] angular 课堂笔记 $location Ui-router State方法

发表于 2018-1-26 09:37:43
$locationJs中location对象保留是url上的一些信息,

Angular中$location服务是为方便处理路由信息定义一个服务

Path:
不传递参数时候,用来获取hash路径(#后面的部分)

传递参数的时候,用来设置hash路径的(#后面的部分)


1 $rootScope.changeUrl = function (url) {
2 // 通过location服务设置新路由
3 $location.path(url)
4 }

Ui-router用ngroute有什么问题

1 是能渲染一个视图(不能实现视图嵌套)

2 子路由的嵌套

3 路由参数的定义

这些问题时ngroute不能解决的,我们可以通过ui-router实现

Ui-route理念:路由改变本事是状态改变,因此改变一个路由就是改变一个状态,所以ui-router是基于状态一个路由框架,因此在定义时候是基于状态定义的

使用ui-router跟ng-route是一样的

第一步引入angular-ui-router库

第二步在视图模板中定义路由容器 ui-view

第三步在app的依赖集合中引入插件模块 ui.router

第四步在config中配置ui路由

在ui路由中,我们依赖于$stateProvider
State方法第一个参数表示状态名称

第二个参数表示状态对象

Url定义路径

Template定义模板

1 var app = angular.module('app', ['ui.router'])
2 // 在配置中定义路由
3 app.config(function ($stateProvider) {
4 // console.log($stateProvider)
5 // 定根路由
6 $stateProvider
7 .state('home', {
8 url: '/',
9 template: '<h1>hello</h1>'
10 })
11 .state('movie', {
12 // /movie/abc
13 url: '/movie/{id:int}?color&price',
14 // template: '<h1>{{movie}}</h1>',
15 templateUrl: 'demo2.html',
16 controller: 'movie'
17 })
18 })
19 .controller('movie', function ($scope, $stateParams) {
20 console.log($stateParams)
21 $scope.movie = '冰河世纪'
22 })

往期文章
angular课堂笔记 第一天

js基础 定时器

js基础 IE6,7,8方法

js基础 高级浏览器

js基础 对应思想 排他思想

本文章版权归爱创课堂所有,转载请注明出处。

更多详细内容请访问爱创课堂官网首页

http://www.icketang.com/





回复

使用道具 举报