Angular--ui-router的使用

时间 2019-11-13

原文原文链接

先引用Angular而后引用ui-routerjavascript

路由清单：咱们依赖的ui.router中提供了一个服务$state，此时能够用config来配置这个服务。用$stateProvider的state方法来设置路由清单。也就是说，定义一个个“状态”。html

小tip：服务除了factory、service以外，还有一个provider。provider通常工程师不会本身定义的，你只须要知道全部的内置服务都是provider函数写的。provider函数写出的服务，能够在依赖注入前，用config函数配置。java

config表示配置，能够配置任何内置服务，此时$state就是插件给咱们的服务。通常的，服务对应的Provider就是服务名字后面直接加Provider（下文中黄色背景代码段）：app

var myapp = angular.module("myapp",["ui.router"]);函数

//配置路由表，实际上在配置$state服务。ui

myapp.config(function($stateProvider) {url

$stateProviderspa

.state({插件

url: '/news',

})

.state({

url: '/music',

})

.state({

url: '/movie',

});

</script>

配置路由使用$stateProvider的state方法，又是一个装饰者模式。

.state().state().state()装饰了三回，连续打点。

配置的时候有三个配置：名字name、路由url、模板template。

此时页面上不要忘记放置一个

<ui-view></ui-view>

的E级别指令。此时动态的内容（template里面的内容）都将呈如今ui-view里面。

完整代码：

<!DOCTYPE html>

<head>

</head>

<body>

<ui-view></ui-view>

var app = angular.module("app",["ui.router"]);

//对$state服务进行一个配置，此时能够书写路由清单

app.config(function($stateProvider){

$stateProvider

.state({

url: '/news',

})

.state({

url: '/music',

})

.state({

url: '/movie',

});

</script>

</body>

</html>