UI-Router详解

无需原生开发基础,也能完美呈现京东商城。《混合开发京东商城系统,提前布局大前端》课程融合vue、Android、IOS等目前流行的前端和移动端技术,混合开发经典电商APP——京东。课程将各种复杂功能与知识点完美融合,从技术原理到开发上线,让你真实感受到一个明星产品开发的全过程。功能实现之外,还有一流用户体验和优秀交互设计等你一探究竟,拓宽开发眼界。


我们了解 angular.js 是一种富客户端单页面应用,所以要在一个页面呈现不同的视图,路由起到了至关重要的作用.

angular.js :为我们封装好了一个路由工具 ngRoute ,它是一种靠url改变去驱动视图.

angularUI :也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state 来驱动视图.

后者有什么优势:一个页面可以嵌套多个视图,多个视图去控制某一个视图等.

咱们今天主要讲解ui-router的基本模块,先上代码。




  
  Document



  hello
  
world

基本的index.html,ui-sref表示指令链接到一个特定的状态,一般情况下为替换视图,替换视图的部分为使用所标记的区域。可以简单的理解为 起到的其实是一个占位符的作用。

接下来咱们再看js代码。

(function(angular){

  angular.module('sunday',['ui.router'])
    .config(function($stateProvider){
      $stateProvider.state({
        name:'hello',
        url:'/hello',
        template:'

hello world!

' }).state({ name:'world', url:'/world', template:'

hello ui-router!

' }) }); })(angular);

在构造angular对象的时候,我们引入了 'ui.router' 模块,在angular对象的配制方法中,我们通过 ui-router提供的$stateProvider对象的 state方法去配置路由对象,name对应ui-sref中配置的值,使用template去替换

那么ui-router中的嵌套路由是如何使用的呢?来看我们修改之后的代码。

.state('world',{
        url:'/world',
        templateUrl:'world.html'
      })

我们对index.js进行了修改,使点击world的之后指向了一个 world.html 的模板。




  
  This is a world



    

    

这是world.html中的代码,我们可以看到在world.html中我们创建了两个 ui-sref 分别为:.world1和world2 ,相信看到这里大家也都能知道了,ui-router其实就是通过 .语法 去进行的路由层级的配置。
来看一下新的 index.js的代码。

(function(angular){

  angular.module('sunday',['ui.router'])
    .config(function($stateProvider){
      $stateProvider.state('hello-world',{
        url:'/hello',
        template:'

hello world!

' }).state('world',{ url:'/world', templateUrl:'world.html' }).state('world.world1',{ url:'/world/world-1', template:'

This is a World 1

' }).state('world2',{ url:'/world/world-2', template:'

world2并不依赖于world,在我们点击它的时候,他会替换掉index.html中的

' }) }); })(angular);

index.html的代码




  
  Document

  



  hello
  
world

你可能感兴趣的:(UI-Router详解)