ionicを使用したAngularで、<ion-nav-view>を使用してログインページの$ stateproviderルーティングにアクセスできないloginappを作成したい

プラチヴァライヤ

index.htmlファイル

これは、すべてのビューページのメインファイルを含むファイルです。

<!DOCTYPE html>
<html ng-app="loginApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, 
  maximum-scale=1,user-scalable=no, width=device-width">
     <title></title>


    <!-- compiled css output -->
    <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="js/app.js"></script>
    <script src="js/controller.js"></script>
  </head>
  <body>
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>

      </ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view></ion-nav-view>
  </body>
</html>

login.html

このファイルは、login.htmlファイルを含むテンプレートディレクトリファイルの下にあります

<ion-view ng-controller="loginFormCtrl"    title="LoginPage">
        <ion-content>
            <div class="list">
              <form name="loginForm">
                <label class="item item-input item-stacked-label">
                  <span class="input-label">Email</span>
                  <input type="text" ng-model="data.email" placeholder="Email">
                </label>
                <label class="item item-input item-stacked-label">
                  <span class="input-label">Password</span>
                  <input type="text" ng-model="data.password" placeholder="Password">
                </label>
                <button class="button button-full button-positive"
                 ng-click="login(data)">
                  Sign In
                </button>
              </form>
                Email:{{data.email}}<br>
                password:{{data.password}}
            </div>
       </ion-content>
    </ion-view>

app.js

これはjsフォルダに含まれているjsファイルです

  var app =angular.module('loginApp', ['ionic']);

  app.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();
      }
    });
  });

  app.config(function($stateProvider,$urlRouterProvider){
  //login page
    $stateProvider.state('login',{
        url: '/',
        templateUrl:'templates/login.html',
        controller:'loginFormCtrl'
    });
     $urlRouterProvider.otherwise('/');
  });

controller.js

これはlogin.htmlの私のコントローラーファイルです

     var app =angular.module('loginApp', ['ionic']);
    app.controller('loginFormCtrl',function($scope){
      $scope.login=function(data){
        //alert("Successfully login!");
      };
    });

このコードを使用してlogin.htmlファイルをフェッチできません。必要な解決策を教えてください。

バラース

var app =angular.module('loginApp', ['ionic']);コントローラから削除し、次のように書き換えます

app.controller('loginFormCtrl',function($scope){
  $scope.login=function(data){
    //alert("Successfully login!");
  };
});

DOC:https//docs.angularjs.org/guide/controller

また、view()に関連付けられるapp.jscontroller(loginFormCtrl)をすでに指定しているloginので、同じ内部htmlファイルを指定する必要はありません。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ