Question

我使用Ionic-AngularJS创建了iOS应用程序，我是这个框架的新手，在这里我提出了一些关于框架的问题，让我们解释一下我的样本。

已创建应用程序 - 现在我已经将starter.html和starter.js视为一个视图和一个控制器以及一个名为starterObj.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发布到一个服务器怎么做？

Answer 1

根据我的理解，我得到了一个答案可能是对离心初学者的角度有用

以下方式我们可以简单地连接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文件中的userName值到js文件。 p>

AngularJs - 离子初级班

1 个答案: