大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

AngularJS中ui-router的示例分析

这篇文章将为大家详细讲解有关AngularJS中ui-router的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

成都创新互联自2013年创立以来,先为平度等服务建站,平度等地企业,进行企业商务咨询服务。为平度企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的。比如这样:

。一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图。比如这样:

var bookStoreApp = angular.module('bookStoreApp', [ 
  'ngRoute', 'ngAnimate', 'bookStoreCtrls', 
]); 
bookStoreApp.config(function($routeProvider) { 
  $routeProvider.when('/hello', { 
    templateUrl: 'tpls/hello.html', 
    controller: 'HelloCtrl' 
  }).when('/list', { 
    templateUrl: 'tpls/bookList.html', 
    controller: 'BookListCtrl' 
  }).otherwise({ 
    redirectTo: '/hello' 
  }) 
});

这是属于AngularJS的原生路由定义。从表面上看似乎挺方便,没有什么太大的问题。但是细想一下,如果说我们有一个网页,左边是菜单栏,右边是各个菜单所对应的视图。那么,如果按照这样的定义,点击每个菜单项,岂不得刷新整个网页?而我们想要的只是右边的视图刷新。所以,这就要用到嵌套路由了。

所谓嵌套路由,就是视图里面还可以再嵌套视图,路由里还可以再嵌套路由。并且,通过ui-router,可以实现不同视图之间的参数传递。

ui-router定义路由的时候,与ngRouter不一样,它是使用.来进行定义的,并且在html标签里,不使用ng-view,而是使用ui-view,比如

。ui-router提供了$stateProvider,$urlRouterProvider来进行路由定义。

下面的实例演示如何实现路由嵌套:

home.html

创建如下的html页面:

 
  

Home

    

This page demonstrates      nestedviews.    

    List    Paragraph 
 

home-list.html

创建如下的html页面:

        {{ topic }} 

about.html

创建如下的html页面:

 
  

The About Page

    

This page demonstrates      multipleand      namedviews.

 
            
                   

table-data.html

创建如下的html页面:

Ice-Creams

                    Name        Cost                            {{ topic.name }}        ${{ topic.price }}           

注意,到目前为止,我们还没有插入任何AngularJS路由或者其它任何框架。目前我们只是创建了一些页面片段,我们需要一个占位或者说父页面来装下这些页面片段。让我们把这个页面叫做 index.html.

index.html

用如下内容创建这个html页面

 
 
 
   
   
   
   
   
   
 
 
   
     
      AngularUI Router 
     
     
      
  •           Home        
  •         
  •           About        
  •                            

    在主页中我们引入了angular.min.js、angular-ui-router.js、angular-animate.js和app.js。在class为Container的div中我们创建了一个

    , 该 div 内的 HTML 内容会根据路由的变化而变化。在中ui-sref 指令链接到特定状态。

    在app.JS文件的内容,我们声明了AngularJS模块和路由配置。当页面加载的时候我们会在index.html中显示home.html的内容。代码如下:

    var routerApp = angular.module('routerApp', ['ui.router']); 
    routerApp.config(function($stateProvider, $urlRouterProvider) { 
      /*路由重定向 $urlRouterProvider:如果没有路由引擎能匹配当前的导航状态,那它就会默认将路径路由至 home.html, 
       *这个页面就是状态名称被声明的地方. */ 
      $urlRouterProvider.otherwise('/home'); 
      $stateProvider 
        .state('home', { 
          url: '/home', 
          templateUrl: 'tpls2/home.html' 
        }) 
       /* nested list with custom controller*/ 
      .state('home.list', { 
        url: '/list', 
        templateUrl: 'tpls2/home-list.html', 
        controller: function($scope) { 
          $scope.topics = ['Butterscotch', 'Black Current', 'Mango']; 
        } 
      }) 
      // nested list with just some random string data 
      .state('home.paragraph', { 
        url: '/paragraph', 
        template: 'I could sure use a scoop of ice-cream. ' 
      }) 
      .state('about', { 
        url: '/about', 
        /* view 用在该状态下有多个 ui-view 的情况,可以对不同的 ui-view 使用特定的 template, controller, resolve data 
         绝对 view 使用 '@' 符号来区别,比如 'columnOne@about' 表明名为 'columnOne' 的 ui-view 使用了 'about' 状态的 
         模板(template),相对 view 则无*/ 
        views: { 
          // 无名 view 
          '': { 
            templateUrl: 'tpls2/about.html' 
          }, 
          // for "ui-view='columnOne'" 
          'columnOne@about': { 
            template: '这里是第一列的内容' 
          }, 
          // for "ui-view='columnTwo'" 
          'columnTwo@about': { 
            templateUrl: 'tpls2/table-data.html', 
            controller: 'Controller' 
          } 
        } 
      }); 
    }); 
    routerApp.controller('Controller', function($scope) { 
      $scope.message = 'test'; 
      $scope.topics = [{ 
        name: 'Butterscotch', 
        price: 50 
      }, { 
        name: 'Black Current', 
        price: 100 
      }, { 
        name: 'Mango', 
        price: 20 
      }]; 
    });

    AngularJS中ui-router的示例分析

    AngularJS中ui-router的示例分析

    AngularJS中ui-router的示例分析

     AngularJS中ui-router的示例分析

    关于“AngularJS中ui-router的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


    当前名称:AngularJS中ui-router的示例分析
    新闻来源:http://dzwzjz.com/article/ppjohc.html