angular1 ui-router使用

来源：互联网发布：英科宇软件输入口令编辑：程序博客网时间：2024/05/17 09:28

<!DOCTYPE html><html><head>  <title></title>  <style>  .nav>a.active{    color: red;  }  </style></head><body ng-app="app">  <div class="nav">    <a ui-sref="router1" ui-sref-active="active">router1</a>    <a ui-sref="router2" ui-sref-active="active">router2</a>  </div>  <ui-view></ui-view>  <script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>  <script src="//cdn.bootcss.com/angular-ui-router/0.3.2/angular-ui-router.js"></script>  <script>  var app = angular.module('app',['ui.router']);  app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){    $stateProvider      .state({        name: 'router1',        url: '/router1',        template: '<h1>这是router1的内容</h1>'        // templateUrl: 'router1.html'      })      .state({        name: 'router2',        url: '/router2',        template: '<h1>这是router2的内容</h1>'        // templateUrl: 'router2.html'      });    $urlRouterProvider.otherwise('/router1');  }])  </script></body></html>

使用ui-sref-active可以指定激活链接的class名

使用$urlRouterProvider.otherwise指定默认打开的路径

0 0