Angular-ui-router入门

2019-09-21

angular-ui-router是一个第三方路由框架，允许通过状态机制组织接口，而不是简单的URL路由。

小试牛刀

在开始之前需要安装一下本地服务：

1
2
3

npm install http-server -g  //全局安装模块

http-server -c-1 -o    //强制浏览器不缓存，确保每次代码修改的更新

首先是项目结构

|-- app.js
|-- index.html
|-- libs
|   |-- angular-ui-router.js
|   |-- angular.js
|-- view
    |-- about.html

其次是html结构

<head>
    <meta charset="utf-8">
    <title>测试</title>
    <script src="libs/angular.js"></script>
    <script src="libs/angular-ui-router.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="main">
    <a ui-sref='home'>主页</a>
    <a ui-sref='about'>关于</a>
    <a ui-sref='news'>消息</a>

    <ui-view></ui-view>
</body>
</html>

ui-sref指令指定路由的名称

入口文件app.js

angular.module("main", ['ui.router'])
  .config(function ($stateProvider) {
    $stateProvider
      .state("home", {
        url: "/home",
        template: "<h1>home</h1>"
      })
      .state("about", {
        url: "/about",
        templateUrl: "/view/about.html"
      })
      .state("news", {
        url: "/news",
        templateProvider: function () {
          return "<h1>news</h1>"
        }
      })
  })
  .run(function ($state) {
    $state.go("home")
  })

声明一个模块main，以及它的依赖模块['ui.router']，.config()方法对其配置。
$stateProvider服务是ui.router提供，配置路由名称、跳转的地址以及它的html模板来源，这边写了三种。常用的就是第二种templateUrl为了更好的模块化。
$state.go("home")指定初始是的路由在哪儿。

渐入佳境

ui-router在一个路由组件内可以设置多个命名视图，让组件的结构更加自由和灵活。

<body ng-app="main">
    <a ui-sref='home'>主页</a>
    <div ui-view="home1"></div>
    <div ui-view="home2"></div>
</body>

$stateProvider
  .state("home", {
    url: "/home",
    views: {
      home1: {
        template: "<h1>home1</h1>"
      },
      home2: {
        template: "<h1>home2</h1>"
      }
    }
  })

ui-view可以作为元素的属性指定它的路由视图，其与views配置对象内的键值一一对应

出神入化

项目结构

|-- app.js
|-- index.html
|-- libs
|   |-- angular-ui-router.js
|   |-- angular.js
|-- view
    |-- about.html
    |-- news.html

<head>
    <meta charset="utf-8">
    <title>测试</title>
    <script src="libs/angular.js"></script>
    <script src="libs/angular-ui-router.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="main">
    <a ui-sref='home'>主页</a>
    <a ui-sref='about'>关于</a>
    <a ui-sref='news'>消息</a>

    <ui-view></ui-view>
</body>

//about.html
<div>
  <h2>我是关于页面</h2>
  <a ui-sref='about.one'>关于1</a>
  <a ui-sref='about.two'>关于2</a>
  <ui-view></ui-view>   //这边和主页面的ui-view并不冲突
</div>

//news.html
<div>
  <h2>我是新闻页</h2>
  <ul>
    <li ui-view="news1"></li>
    <li ui-view="news2"></li>
  </ul>
</div>

//app.js
angular.module("main", ['ui.router'])
  .config(function ($stateProvider) {
    $stateProvider
      .state("home", {
        url: "/home",
        template: "<h1>home1</h1>"
      })
      .state("about", {
        url: "/about",
        templateUrl: "/view/about.html",
        controller: function ($state) {
          $state.go("about.one")
        }
      })
      .state("about.one", {
        url:"/about1",
        template: "<h3>about1</h3>"
      })
      .state("about.two", {
        url: "/about2",
        template: "<h3>about2</h3>"
      })
      .state("news", {
        url: "/news",
        templateUrl: "/view/news.html",
        controller: function ($state) {
            $state.go("news.details")
        }
      })
      .state("news.details", {
        url: "/details",
        views: {
          news1: {
            template: "<p>体育新闻</p>"
          },
          news2: {
            template: "<p>娱乐新闻</p>"
          }
        }
      })
  })
  .run(function ($state) {
    $state.go("home")
  })

可以看到about页面嵌套了一层路由，分别是one、two页面，注意这两个子页面的路由也是在这边一起配置，嵌套的路由运行逻辑是首先载入父视图然后是子视图, 如about.one,且父子间必须用.分隔开。
这边遇到一个问题，当你切换到about页面但是里面的子视图是空的，因为你没有默认路由，可以在controller里$state.go("about.one")指定。默认展示第一个视图。