Cordova+angularjs+ionic+vs2015開發（四）

時間 2019-11-15

標籤 cordova+angularjs+ionic+vs2015 cordova angularjs ionic 開發欄目 Cordova 简体版

原文原文鏈接

歡迎加羣學習：457351423 這裏有4000多部學習視頻，涵蓋各類技術，有須要的歡迎進羣學習！css

1、佈局html

Ionic模板提供了一個側邊欄菜單示例項目和標籤選項卡示例項目。本案例將兩個佈局進行結合，簡單介紹下Ionic的佈局。Ionic採用自定義標籤和標準Html標籤相結合。相對於所有使用div方式來講，自定義標籤的可讀性更強。Ionic的界面呈現既可使用靜態頁面方式呈現，也可使用Angular提供的路由機制和控制器來控制控制頁面的呈現及數據綁定。ios

使用VS建立一個空白的Ionic項目。項目中包含一個index.html頁面和app.js的腳本。依照慣例修改項目的基本屬性後，打開index.html頁面和app.js腳本。json

<body ng-app="starter">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>
        <ion-content>
        </ion-content>
    </ion-pane>
</body>

在body標籤上有一個自定義的屬性ng-app，該屬性是Angular用於標識應用程序模塊的，通常爲程序啓動模塊。<ion-pane>標籤內容爲ionic標籤，關於Ionic標籤請查閱相關文檔，這裏再也不贅述。服務器

angular.module('starter', ['ionic'])
.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

angular.module('starter',[])用於定義應用程序的啓動模塊，同時加載ionic模塊。以上代碼是連綴寫法，正常寫法以下：網絡

angular.module().run().config();

或者：app

var app = angular.module();
app.run();
app.config();

這樣寫，基本閱讀起來就沒有問題了。ionic

run()方法用於啓動運行程序。後續會加入config()等相關方法。ide

二、路由和控制器佈局

在www目錄下建立一個templates文件夾並添加一個home.html空白頁面。同時在js文件夾中建立一個controllers.js文件。

修改index.html內容以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/platformOverrides.js"></script>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <!--添加controllers引用-->
    <script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
    <!--添加導航視圖標籤-->
    <ion-nav-view></ion-nav-view>
</body>
</html>

將原來body內容添加到home.html中，並添加一個視圖標籤：

<ion-view view-title="Home">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">標題</h1>
        </ion-header-bar>
        <ion-content>
        </ion-content>
    </ion-pane>
</ion-view>

打開app.js,在run()方法後連綴config()方法，配置內容以下：

.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app', {
        url: '/app',
        templateUrl: 'templates/home.html'
    });

    $urlRouterProvider.otherwise('/app');
});

這裏使用$stateProvider.state()方法聲明一個狀態（路由）。$urlRouterProvider.otherwise('/app')設置默認路由。上述代碼功能是在程序啓動時，請求/app的路由，該路由導向home.html視圖模板，並將該視圖內容渲染到<ion-nav-view>導航視圖標籤上。

控制器的做用就是在視圖渲染前將數據送到視圖處理。而數據內容咱們可使用網絡請求從服務器上獲取，也可使用本地數據等。

例如上述案例須要在視圖渲染以前，動態顯示標題，在控制器中處理以下：

打開controllers.js文件，添加以下代碼：

angular.module('starter.controllers', [])
.controller('HomeCtrl', function ($scope) {
    $scope.msg = 'Hello';
});

同時修改app.js文件相關配置，完整app.js爲內容以下：

angular.module('starter', ['ionic', "starter.controllers"]) //添加控制器模塊
.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            cordova.plugins.Keyboard.disableScroll(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider.state('app', {
        url: '/app',
        templateUrl: 'templates/home.html',
        controller: 'HomeCtrl' //增長控制器處理
    });

    $urlRouterProvider.otherwise('/app');
});

在home.html中就可使用表達式進行數據綁定了。

<ion-view view-title="Home">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <!--這裏修改成數據綁定，動態上下文中獲取-->
            <h1 class="title">{{msg}}</h1>
        </ion-header-bar>
        <ion-content>
        </ion-content>
    </ion-pane>
</ion-view>

angular的綁定表達式使用{{}}這種方式。

結束語：以上就是一個最簡單的請求-路由-控制的案例。對於數據的操做通常是放在服務端處理的，手機程序使用$http對象從服務器上獲取數據便可。本地數據存儲，最簡單的方式就是使用json存儲。下篇給一個側邊欄菜單和標籤選項卡的案例，做爲往後開發的一個基礎骨架。

歡迎加羣學習：457351423 這裏有4000多部學習視頻，涵蓋各類技術，有須要的歡迎進羣學習！