Angular路由之ui-router

说明
官网
hello world
完整代码
在线测试
补充
效果图

说明

上一篇介绍了angular自带的路由的使用，但实际上已经用的很少了，基本被第三方的ui-router取代。二者使用上区别不是很大，之所以前者被取代，是因为ui-router功能更为强大

官网

https://ui-router.github.io/

hello world

自认为最好的入门教程是官方demo

完整代码


<html>
  <head>
    <title>ui-router入门程序</title>
    <script src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script>
    <script src="https://unpkg.com/@uirouter/angularjs@1.0.22/release/angular-ui-router.js"></script>
    <style>.active { color: red; font-weight: bold; }</style>
  </head>
  <body ng-app="helloworld">
<!--  ui-sref-active="active" 会自动匹配当前访问的是哪一个 -->
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a>
<!--  呈递视图，不要忘记加，这个小东西很重要，一个页面可以放多个 -->
    <ui-view></ui-view>
  </body>
  <script>
		//创建应用模块，加载ui.router
    var myApp = angular.module('helloworld', ['ui.router']);
		//配置路由
        myApp.config(function($stateProvider) {
          var helloState = {
            name: 'hello',//状态名，与 ui-sref的值相同
            url: '/hello',//访问地址
            template: '<h3>hello world!</h3>'//显示的内容
          }
          var aboutState = {
            name: 'about',
            url: '/about',
            template: '<h3>Its the UI-Router hello world app!</h3>'
          }
          //挂载路由
          $stateProvider.state(helloState);
          $stateProvider.state(aboutState);
        });
        
  </script>
</html>