ui-router路由很详细

来源：互联网发布：协同过滤算法 python 编辑：程序博客网时间：2024/06/05 12:07

1.配置使用ui-router

1.1导入js文件

需要注意的是：必须导入angular.min.js这个文件，且angular.min.js必须导入在angular-ui-router.min.js前面。

<script type="text/javascript" src="JS/angular.min.js"></script><script type="text/javascript" src="JS/angular-ui-router.min.js"></script>1
2
1
2

1.2注入angular模块

var app = angular.module('myApp', ['ui.router']);1
1

注入的名字“ui.router”，可在angular-ui-router.min.js里找到，如下图：
这里写图片描述

1.3定义视图

ui-view替代的是ngroute路由的ng-view。

<div ui-view></div>1
1

1.4配置路由状态

app.config(["$stateProvider", function ($stateProvider){           $stateProvider         .state("home", { //导航用的名字，如<a ui-sref="login">login</a>里的login        url: '/',    //访问路径         template:'<div>模板内容......</div>'    })       }]);1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

2.简单示例

<html>  <head>       <title>ui-router</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!-- 导入JS -->    <script type="text/javascript" src="JS/angular.min.js"></script>    <script type="text/javascript" src="JS/angular-ui-router.min.js"></script>    </head>  <body >       <div ng-app="myApp">                <div ui-view></div> <!-- 视图 -->         </div>    </body>  <script type="text/javascript">    //定义模板，并注入ui-router    var app = angular.module('myApp', ['ui.router']);       //对服务进行参数初始化，这里配stateProvider服务的视图控制    app.config(["$stateProvider",  function ($stateProvider) {              $stateProvider             .state("home", {            url: '/',               template:'<div>模板内容......</div>'        })         }]);    </script></html>

原文链接是：http://blog.csdn.net/zcl_love_wx/article/details/52034193

阅读全文

0 0

ui-router路由 很详细

1.配置使用ui-router

2.简单示例

ui-router路由很详细