在角度使用离子想要制作一个登录应用程序，其中我无法访问登录页面<ion-nav-view>的$stateprovider路由

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!");
  };
});

文件：https://docs.angularjs.org/guide/controller

此外，在app.js中，您已经指定了将与视图(login(关联的控制器(loginFormCtrl(，因此无需在html文件

中指定相同的内容

相关内容

最新更新

热门标签：