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);  };})