<!doctype html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/lib/AngularJS/angular.min.js"></script> <script src="js/lib/ui0.4.2/angular-ui-router.js"></script> <!-- 指令：ui-view 该指令主要用于进行目标视图模板的展示 链接：ui-sref 该属性，主要用于替换HTML中a标签的href属性，用于指定目标路由的名称 服务：$stateProvider 该服务主要用于进行路由状态的定义~ 路由URL和视图模板的绑定 --> <style> .active { font-size: 18px; color: red; } </style> </head> <body> <ul> <li><a ui-sref="hello" ui-sref-active="active">hello</a></li> <li><a ui-sref="world" ui-sref-active="active">world</a></li> </ul> <div> <!--<ui-view></ui-view>--> <div ui-view></div> </div> <script> var app = angular.module("myApp", ["ui.router"]); /* 配置路由信息 */ /* $stateProvider: Ui路由中的状态服务提供者 */ app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider,$urlRouterProvider) { $urlRouterProvider.otherwise("/hello"); $stateProvider.state({ name: "hello", /* 状态名称，用于链接中使用 */ url: "/hello", /* 显示路径，在url地址中显示*/ template: "<h1>这是hello对应的内容</h1>"/*跳转的目标数据/页面*/ }).state({ name: "world", url: "/world", template: "<h1>这是world跳转之后对应的内容</h1>" }); }]); </script> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-648.html
