Ionic Demo 解析

時間 2019-11-21

標籤 ionic demo 解析简体版

原文原文鏈接

Ionic Demo 解析

index.html 解析

1.引入所須要的類庫

<link rel="manifest" href="manifest.json">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

2.引入自定義js(app.js,servcie,controller等)

<!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>

3.添加app顯示的容器 (此處 ng-app 定義了app總模塊名稱)

<body ng-app="starter">
        <ion-nav-view></ion-nav-view>
    </body>

app.js解析

1.定義總模塊,引入須要的模塊(此處引入了ionic,starter.controllers)

2.運行時須要的操做設置

3.配置app的導航映射

//定義總模塊名爲starter，此處名稱要與index上的ng-app相對應
    angular.module('starter', ['ionic', 'starter.controllers'])

    .run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
        //app 準備完成後要進行什麼操做 放到這個方法裏面
      });
    })

    //配置app的導航
    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider

        //設置viewport ,配置其controller
        .state('app', {
            url: '/app',
            abstract: true,
            templateUrl: 'templates/menu.html',
            controller: 'AppCtrl'
        })
        //配置一個模塊
        .state('app.search', {
            url: '/search',
            views: {
                'menuContent': {
                    templateUrl: 'templates/search.html'
                }
            }
        })

        //配置一個模塊，而且url能接收一個參數
        .state('app.single', {
            url: '/playlists/:playlistId',
            views: {
                'menuContent': {
                    templateUrl: 'templates/playlist.html',
                    controller: 'PlaylistCtrl'
                }
            }
        });

        // 其餘狀況下跳轉到該頁面
        $urlRouterProvider.otherwise('/app/playlists');
    });

<!-- viewport-->
    <ion-side-menus enable-menu-with-back-views="false">

     <!-- 頁面切換的主容器-->
      <ion-side-menu-content>
        
        <!--配置導航工具欄 -->
        <ion-nav-bar class="bar-stable">
          
          <!--添加後退按鈕 -->
          <ion-nav-back-button>
          </ion-nav-back-button>
          
          <!-- 添加一個菜單按鈕在左邊-->
          <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
            </button>
          </ion-nav-buttons>

        </ion-nav-bar>

        <!--添加切換頁面的容器 -->
        <ion-nav-view name="menuContent"></ion-nav-view>

      </ion-side-menu-content>

      <!-- 配置導航菜單 -->
      <ion-side-menu side="left">
        <!-- 菜單名稱-->
        <ion-header-bar class="bar-stable">
          <h1 class="title">Left</h1>
        </ion-header-bar>
        
        <!--菜單列表，跳轉配置 -->
        <ion-content>
          <ion-list>
            <ion-item menu-close ng-click="login()">
              Login
            </ion-item>
            <ion-item menu-close href="#/app/search">
              Search
            </ion-item>
            <ion-item menu-close href="#/app/browse">
              Browse
            </ion-item>
            <ion-item menu-close href="#/app/playlists">
              Playlists
            </ion-item>
          </ion-list>
        </ion-content>

      </ion-side-menu>

    </ion-side-menus>

各個模塊頁面定義

1.使用ion-view爲根標籤(設置頁面title)

2.ion-content標籤裏面放主要頁面內容

<!--定義頁面title-->
    <ion-view view-title="Browse">
      <!--定義頁面主要內容-->
      <ion-content>
        <!--頁面內容-->
        <h1>Browse</h1>
      </ion-content>
    </ion-view>

controller定義

1.定義一個controllers模塊

angular.module('starter.controllers', []);

2.controller都定義在controllers，模塊之下

angular.module('starter.controllers')
    .controller('AppCtrl', ['$scope',function($scope) {

    }]);

3.同時定義

angular.module('starter.controllers', [])
    .controller('AppCtrl', ['$scope',function($scope) {

    }]);

示例項目

github - IonicDemojavascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

Ionic Demo 解析

Ionic Demo 解析

index.html 解析

1.引入所須要的類庫

2.引入自定義js(app.js,servcie,controller等)

3.添加app顯示的容器 (此處 ng-app 定義了app總模塊名稱)

app.js解析

1.定義總模塊,引入須要的模塊(此處引入了ionic,starter.controllers)

2.運行時須要的操做設置

3.配置app的導航映射

menu.html解析

各個模塊頁面定義

1.使用ion-view爲根標籤(設置頁面title)

2.ion-content標籤裏面放主要頁面內容

controller定義

1.定義一個controllers模塊

2.controller都定義在controllers，模塊之下

3.同時定義

示例項目