ionic官方demo解读

ionic 模板个人理解（本例子下载命令 ionic start myapp slidemenu）

1、文件一：app.js  (主程序入口)

 //定义一个启动模块starter，并引入ionic、starter.controllers 两个已经定义的大模块
 //方括号中的模块均会在应用启动的时候加载
angular.module('starter', ['ionic', 'starter.controllers']) 

.run(function($ionicPlatform) {         //相当于java中的主函数，程序开始运行的地方
  $ionicPlatform.ready(function() {    //平台就绪回调函数
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {   //cordova键盘插件的默认设置，隐藏键盘附件，并设置不可滚动
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {   //设置手机状态栏按默认行为显示
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {  //angularjs 全局配置均放置于此方法内
  $stateProvider            //angularjs 路由配置，控制各个页面之间的跳转，以及配置页面的跳转参数、页面的缓存，每个页面对应的controller                

    .state('app', {      //页面的唯一标识
    url: '/app',   
    abstract: true,
    templateUrl: 'templates/menu.html',   //页面实际的地址，当前页面放在templates文件夹下
    controller: 'AppCtrl'          //通常情况下，为了方便管理，一个页面对应一个controller，当前页面内的逻辑代码均写在相对应的controller内
  })

  .state('app.search', {
    url: '/search',
    views: {
      'menuContent': {
        templateUrl: 'templates/search.html'
      }
    }
  })

  .state('app.browse', {
      url: '/browse',
      views: {
        'menuContent': {
          templateUrl: 'templates/browse.html'
        }
      }
    })
    .state('app.playlists', {
      url: '/playlists',
      views: {
        'menuContent': {
          templateUrl: 'templates/playlists.html',
          controller: 'PlaylistsCtrl'
        }
      }
    })

  .state('app.single', {
    url: '/playlists/:playlistId',       //此处playlistId的配置是为了接受上个页面传过来的名为playlistId的参数
    views: {
      'menuContent': {
        templateUrl: 'templates/playlist.html',
        controller: 'PlaylistCtrl'
      }
    }
  });
  //  if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/playlists');   //如果在地址栏中输入的url没有在路由配置中找到，则跳转到一个默认的页面
});

2、controller.js  （控制层，放置每个页面对应的controller）

angular.module('starter.controllers', [])   //app.js 中方括号内的模块在此定义了

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {  //AppCtrl必须在app.js的路由中进行配置，否则会报错
  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  // Form data for the login modal
  $scope.loginData = {};           //$scope 是angularjs双向绑定实现的服务，在此服务上可以定义变量、对象、方法，$scope定义变量发生变化会同步到页面上

  // Create the login modal that we will use later
  $ionicModal.fromTemplateUrl('templates/login.html', {   //ionic的一个组件，弹出一个预先定义好的模态框
    scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  // Triggered in the login modal to close it
  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  // Open the login modal
  $scope.login = function() {
    $scope.modal.show();
  };

  // Perform the login action when the user submits the login form
  $scope.doLogin = function() {
    console.log('Doing login', $scope.loginData);

    // Simulate a login delay. Remove this and replace with your login
    // code if using a login system
    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})