ui-router路由 很详细

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", { //导航用的名字,如login里的login
        url: '/',    //访问路径 
        template:'
模板内容......
'
}) }]);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2.简单示例

<html>
  <head>   
    <title>ui-routertitle>
    <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">
    
    <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:'
模板内容......
'
}) }]);
script> html>
    
  原文链接是:http://blog.csdn.net/zcl_love_wx/article/details/52034193



你可能感兴趣的:(angular.js)