Cordova webapp实战开发(三)- AngularJS 路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。###

通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。###

注意,Ionic并没有采用Angular的官方路由(ngRoute),最主要的一个原因是ui-router项目很重要的特性ngRoute不支持,比如视图命名,视图嵌套和视图并行(parallel)。这些功能通过ionNavView命令被加入了Ionic得核心功能中。Ionic仅仅只能通过ui-router运行,所以在你的app中使用ngRoute会报错。

Cordova webapp实战开发(三)- AngularJS 路由_第1张图片

app.js页面


Cordova webapp实战开发(三)- AngularJS 路由_第2张图片

上面的.config就是项目中的路由设置,

config()函数 负责配置路由

// 1.配置UI-Router
.config(function ($stateProvider, $urlRouterProvider) {
      $stateProvider
      
      // 2. 添加第一层路由State,调用State函数
      .state('tab', {    url: '/tab',    
                                 abstract: true,   // abstract: true 表明此状态不能被显性激活,只能被子状态隐性激活
                                 templateUrl: 'templates/tabs.html'
      })

      // 3.添加第二层路由State嵌套在tab中的页面
      .state('tab.dash', {    
                                 url: '/dash',   
                                 views: {//是指ng-view       
                                               'tab-dash': {            
                                                    templateUrl: 'templates/tab-dash.html', // 模板          
                                                    controller: 'DashCtrl'        // 控制器
                                              }    
                                 }
                })
 });



// 如果没有任何配置,则跳到该页面“/tab/dash”
$urlRouterProvider.otherwise('/tab/dash');

你可能感兴趣的:(Cordova webapp实战开发(三)- AngularJS 路由)