AngularJs --Ionic初學者類

-1

我使用Ionic-AngularJS創建了iOS應用程序，我是這個框架的新手，在這裏我有關於框架的一些問題，讓我們解釋一下我的示例。AngularJs --Ionic初學者類

應用程序創建的 - 現在我已經starter.html和像一個視圖和一個控制器，並呼籲starterObj.js
如何將這三個文件連接，並與這些文件的一個模型starter.js。
請給我一個簡單的例子與三個文件。

Starter.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="../lib/ionic/js/ionic.bundle.js"></script> 
<script src="../cordova.js"></script> 
<script src="../Controller/Starter.js"></script> 
</head> 
<body ng-app="starterApp" class="platform-ios platform-cordova platform-webview"> 
<ion-pane> 
<ion-header-bar class="bar-stable"> 
<h1 class="title">Login</h1> 
</ion-header-bar> 
<ion-content> 
<form ng-submit="doLogin()"> 
<div class="list"> 
<label class="item item-input"> 
<span class="input-label">Username</span> 
<input type="text" ng-model="loginData.username"> 
</label> 
<label class="item item-input"> 
<span class="input-label">Password</span> 
<input type="password" ng-model="loginData.password"> 
</label> 
<label class="item"> 
<button class="button button-block button-positive" type="submit">Log in</button> 
</label> 
</div> 
</form> 
</ion-content> 
</ion-pane> 
</body> 
</html>

Starter.Js

angular.module('starterApp', ['ionic']) 

.run(function($ionicPlatform) { 
    $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.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
})

StarterObj.Js

{ 
// here i want to do some web-service handling 
}

最後我有一個登錄屏幕，現在我想爲Starter.js文件創建一個doLogin（）函數，以及如何將Starter.html連接到Starter.js
而且我需要一個webservice處理程序，我需要在StarterObj.js文件中配置，就像成功驗證後，我需要將userName發佈到一臺服務器上如何執行此操作？

來源

2015-08-21 Shiv Suthan M

你必須更具體，發佈你現在得到的代碼，並解釋你想要達到什麼樣的效果.... – iCediCe

@＃iCediCe感謝您的評論，請找到更新的代碼塊謝謝。 –

喜按我的理解，我得到的回答可能是這對角有用與離子初學者

下面的方法，我們可以簡單地連接的HTML文件和js文件，並開始編碼像控制器和視圖例如，請在模型登錄屏幕下方找到。

Starter.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"> 

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
    <link href="css/ionic.app.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> 

    <!-- your app's js --> 
    <script src="../Controller/Starter.js"></script> 
    </head> 
    <body ng-app="starterApp" ng-controller="starterAppController" class="platform-ios platform-cordova platform-webview"> 

    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
     <h1 class="title">Login</h1> 
     </ion-header-bar> 
     <ion-content> 


       <form ng-submit="doLogin(loginData.username)"> 
        <div class="list"> 
         <label class="item item-input"> 
          <span class="input-label">Username</span> 
          <input type="text" ng-model="loginData.username"> 
           </label> 
         <label class="item item-input"> 
          <span class="input-label">Password</span> 
          <input type="password" ng-model="loginData.password"> 
           </label> 
         <label class="item"> 
          <button class="button button-block button-positive" type="submit">Log in</button> 
         </label> 
        </div> 
       </form> 


     </ion-content> 
    </ion-pane> 
    </body> 
</html>

Starter.js

var starterApp = angular.module('starterApp', ['ionic']) 


starterApp.run(function($ionicPlatform) { 
       $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.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
            } 
            if(window.StatusBar) { 
            StatusBar.styleDefault(); 
            } 
            }); 

       }) 

starterApp.controller('starterAppController', ['$scope','$ionicPlatform', function($scope,$ionicPlatform) { 


               $scope.doLogin = function(uName) { 


               alert(uName); 

               }; 

               }]);

上述方案幫助您創建的登錄界面和連接登錄HTML登錄JS和獲取用戶名使用ng-model從html文件到js文件的值（可分配的角度表達式與數據綁定。）

來源

2015-08-21 14:48:02

AngularJs --Ionic初學者類

回答

相關問題