AngularJS中ui-router的示例分析

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中我们创建了一个

在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的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。