<!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>
另一种写法
--> <ui-view name="header"></ui-view> <div ui-view></div> <ui-view name="footer"></ui-view> </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地址中显示*/ views:{ "":{ template:"<h1>默认路由中显示的内容</h1>" }, "header":{ template:"<h2>这是hello页面的头部内容</h2>" }, "footer":{ template:"<h2>这是hello页面的页面底部内容</h2>" } } }).state({ name: "world", url: "/world", views:{/*用于进行多数据展示的情况下*/ "":{ template:"<h1>这是默认路由ui-view中展示的内容</h1>" }, "header":{ template:"<h1>这是world链接，展示在header中的内容</h1>" }, "footer":{ template:"<h1>这是world链接，footer</h1>" } } }); }]); </script> </body> </html>
转载请注明原文地址: https://www.6miu.com/read-885.html
