angularJs 之ui-router

如何引用依赖angular-ui-router

angular.module('app',["ui.router"])
.config(function($stateProvider){
$stateProvider.state('contacts',{
  url: '/contacts',
  templateUrl: '/script/contacts.html'
}); })

当我们访问index.html/contacts时, 'contacts'状态将被激活,同时index.html中的ui-view将被'contacts.html'填充。或者,通过transitionTo('contacts')方法将状态转变到'contacts'状态,同时 url 将更新为index.html/contacts

URL参数

基本参数

通常,url动态部分被称为参数,有几个选项用于指定参数。

dom中参数传递方式如下:

<body >    
    <div ng-app="myApp" >
        <a ui-sref="index({id:30})">show index</a>    
        <a ui-sref="test({username:'peter'})">show test</a>
        <div ui-view></div>
    </div>  
  </body>

基本参数如下:

$stateProvider
    .state('contacts.detail', {
        // 这里设置了url参数
        url: "/contacts/:contactId",
        templateUrl: 'contacts.detail.html',
        controller: function ($stateParams) {
            // If we got here from a url of /contacts/42
            expect($stateParams).toBe({contactId: 42});
       //获取参数
       var username = $stateParams.username;
        }
    })

或者,你也可以使用花括号的方式来指定参数:

// 与前面的设置方法等效
url: "/contacts/{contactId}"

示例:

  • '/hello/' - 只匹配'/hello/'路径,没有对斜杠进行特殊处理,这种模式将匹配整个路径,而不仅仅是一个前缀。
  • '/user/:id' - 匹配'/user/bob''/user/1234!!!',甚至还匹配 '/user/',但是不匹配'/user''/user/bob/details'。第二个路径段将被捕获作为参数"id"
  • '/user/{id}' - 与前面的示例相同,但使用花括号语法。

含正则表达式的参数

使用花括号的方式可以设置一个正则表达式规则的参数:

// 只会匹配 contactId 为1到8位的数字
url: "/contacts/{contactId:[0-9]{1,8}}"

示例:

'/user/{id:[^/]*}' - 与'/user/{id}'相同

    • '/user/{id:[0-9a-fA-F]{1,8}}' - 与前面的示例相似,但只匹配1到8为的数字和字符
    • '/files/{path:.*}' - 匹配任何以'/files/'开始的URL路径,并且捕获剩余路径到参数'path'中。
    • '/files/*path' - 与前面相同,捕获所有特殊的语法。

警告:不要把捕获圆括号写进正则表达式,ui-router 的 UrlMatcher 将为整个正则表达式添加捕获。

Query Parameters

可以通过?来指定参数作为查询参数

url: "/contacts?myParam1&myParam2"

// 匹配 "/contacts?myParam1=value1&myParam2=wowcool"

嵌套路由

默认方式是子状态的 url 附加到父状态的 url 之后

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '/list',
     ...
  });

 

路由将成为:

  • 'contacts'状态将匹配"/contacts"
  • 'contacts.list'状态将匹配"/contacts/list"。子状态的url是附在父状态的url之后的。

绝对路由(^)

$stateProvider
  .state('contacts', {
     url: '/contacts',
     ...
  })
  .state('contacts.list', {
     url: '^/list',
     ...
  });

路由将成为:

  • 'contacts'状态将匹配"/contacts"
  • 'contacts.list'状态将匹配"/list"。子状态的url没有附在父状态的url之后的,因为使用了^

$stateParams 服务

之前看到的$stateParams服务是一个对象,包含 url 中每个参数的键/值。$stateParams可以为控制器或者服务提供 url 的各个部分。
注意:$stateParams服务必须与一个控制器相关,并且$stateParams中的“键/值”也必须事先在那个控制器的url属性中有定义

// 如果状态中 url 属性是:
url: '/users/:id/details/{type}/{repeat:[0-9]+}?from&to'

// 当浏览
'/users/123/details//0'

// $stateParams 对象将是
{ id:'123', type:'', repeat:'0' }

// 当浏览
'/users/123/details/default/0?from=there&to=here'

// $stateParams 对象将是
{ id:'123', type:'default', repeat:'0', from:'there', to:'here' }

 

只有当状态被激活并且状态的所有依赖项都被注入时,$stateParams对象才存在。这代表你不能再状态的resolve函数中使用$stateParams对象,可以使用$state.current.params来代替。使用$stateParams的两个陷阱

$stateProvider.state('contacts.detail', {  
   resolve: { 
      someResolve: function($state){ 
         //*** 不能在这里使用 $stateParams , the service is not ready ***//
         //*** 使用 $state.current.params 来代替 ***//
         return $state.current.params.contactId + "!" 
      }; 
   },
   // ...
})
  • 在状态控制器中,$stateParams对象只包含那些在状态中定义的参数,因此你不能访问在其他状态或者祖先状态中定义的参数。
$stateProvider.state('contacts.detail', {
   url: '/contacts/:contactId',   
   controller: function($stateParams){
      $stateParams.contactId  //*** Exists! ***//
   }
}).state('contacts.detail.subitem', {
   url: '/item/:itemId', 
   controller: function($stateParams){
      $stateParams.contactId //*** 注意! DOESN'T EXIST!! ***//
      $stateParams.itemId //*** Exists! ***//  
   }
})

$urlRouterProvider

$urlRouterProvider负责处理在状态配置中指定的url路由方式之外的 url 请求的路由方式。$urlRouterProvider负责监视$location,当$location改变后,$urlRouterProvider将从一个列表,一个接一个查找匹配项,直到找到。所有 url 都编译成一个UrlMatcher对象。

when() for redirection 重定向

参数:

  • what String | RegExp | UrlMatcher,你想重定向的传入路径
  • handler String | Function 将要重定向到的路径

handler 作为 String
如果handler是字符串,它被视为一个重定向,并且根据匹配语法决定重定向的地址

app.config(function($urlRouterProvider){
    // when there is an empty route, redirect to /index   
    $urlRouterProvider.when('', '/index');

    // You can also use regex for the match parameter
    $urlRouterProvider.when('/aspx/i', '/index');
})
复制代码

函数可以返回:handler 作为 Function
如果handler是一个函数,这个函数是注入一些服务的。如果$location匹配成功,函数将被调用。你可以选择性注入$match

  • falsy 表明规则不匹配,$urlRouter将试图寻找另一个匹配
  • String 该字符串作为重定向地址并且作为参数传递给$location.url()
  • nothing或者任何为真的值,告诉$urlRouterurl 已经被处理

示例:

$urlRouterProvider.when(state.url, ['$match', '$stateParams', function ($match, $stateParams) {
    if ($state.$current.navigable != state || !equalForKeys($match, $stateParams)) {
        $state.transitionTo(state, $match, false);
    }
}]);

参数:otherwise() 无效路由

  • path String | Function 你想重定向url路径或者一个函数返回url路径。函数可以包含$injector$location两个参数。
app.config(function($urlRouterProvider){
    // 在配置(状态配置和when()方法)中没有找到url的任何匹配
    // otherwise will take care of routing the user to the specified url
    $urlRouterProvider.otherwise('/index');

    // Example of using function rule as param
    $urlRouterProvider.otherwise(function($injector, $location){
        ... some advanced code...
    });
})

参数:rule() 自定义url处理

  • handler Function 一个函数,包含$injector$location两个服务作为参数,函数负责返回一个有效的路径的字符串。
app.config(function($urlRouterProvider){
    // Here's an example of how you might allow case insensitive urls
    $urlRouterProvider.rule(function ($injector, $location) {
        var path = $location.path(), normalized = path.toLowerCase();
        if (path != normalized) return normalized;
    });
})

$urlMatcherFactory 和 UrlMatchers


定义了url模式和参数占位符的语法。$urlMatcherFactory是在幕后被$urlRouterProvider调用,来缓存编译后的UrlMatcher对象,而不必在每次 location 改变后重新解析url。大多数用户不需要直接使用$urlMatcherFactory方法,但是在状态配置中非常实用,可以使用$urlMatcherFactory方法来生成一个UrlMatcher对象,并在状态配置中使用该对象。

var urlMatcher = $urlMatcherFactory.compile("/home/:id?param1");
$stateProvider.state('myState', {
    url: urlMatcher 
});

 

 

转载于:https://www.cnblogs.com/hjsblogs/p/8436104.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS `ui-view` 的使用通常涉及以下几个步骤: 1. 安装 AngularJS 和 AngularUI Router。AngularUI Router 是一个用于 AngularJS 的第三方路由模块,可以实现多视图和嵌套路由等功能。 2. 在 HTML 中定义 `ui-view` 指令,用于展示视图。可以定义一个或多个 `ui-view`,每个指令可以使用一个名字来标识。 3. 在 JavaScript 中配置路由,并指定与视图相关的模板和控制器。通常使用 `$stateProvider` 和 `$urlRouterProvider` 服务来配置路由。 下面是一个简单的示例,演示了如何使用 `ui-view` 展示两个页面: ```html <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>AngularJS UI-Router Demo</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.29/angular-ui-router.min.js"></script> <script> // 创建 AngularJS 应用程序 var app = angular.module('myApp', ['ui.router']); // 配置路由 app.config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/', templateUrl: 'home.html', controller: 'HomeController' }) .state('about', { url: '/about', templateUrl: 'about.html', controller: 'AboutController' }); $urlRouterProvider.otherwise('/'); }); // 控制器定义 app.controller('HomeController', function($scope) { $scope.message = 'Welcome to the homepage!'; }); app.controller('AboutController', function($scope) { $scope.message = 'Learn more about us!'; }); </script> </head> <body> <h1>AngularJS UI-Router Demo</h1> <nav> <a ui-sref="home">Home</a> <a ui-sref="about">About</a> </nav> <div ui-view></div> </body> </html> ``` 在上面的示例中,我们定义了两个路由:`home` 和 `about`。每个路由都指定了一个与之对应的模板和控制器。在 HTML 中,我们使用 `ui-sref` 指令来指定路由,并使用 `ui-view` 指令来展示视图。在这种情况下,我们只有一个 `ui-view`,因此没有必要给它指定任何名字。 当用户点击导航链接时,将会触发路由,对应的视图将会展示在 `ui-view` 中。在这个示例中,我们在 `HomeController` 和 `AboutController` 中定义了一些文本信息,用于展示在对应的视图中。 注意,使用 `ui-sref` 指令时,需要将路由名称作为参数传递给指令。这个名称应该与路由配置中的名称匹配。 这只是一个简单示例,实际应用中可能还需要更多的路由和视图。掌握了 `ui-view` 的基本使用方法之后,你可以继续学习 AngularUI Router 的更多功能,例如嵌套视图、路由参数等等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值