AngularJsを使用して1ページを別のページに移動する方法

1ページから別のページに移動する方法。私はログインページを持っていると仮定し、ユーザー名とパスワードを入力した後、submitボタンをクリックして検証する必要があります。ユーザー名とパスワードの両方が正しい場合、ホームページに行く必要があります。ホームページのコンテンツを表示する必要があります。ここで私はコードを投稿しています。ブラウザのURLは変更されていますが、コンテンツは変更されていません。AngularJsを使用して1ページを別のページに移動する方法

index.htmlを

<html ng-app='myApp'> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script 
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
</head> 

<body > 
    <div id='content' ng-controller='LoginController'> 
     <div class="container"> 
      <form class="form-signin" role="form" ng-submit="login()"> 
       <h3 class="form-signin-heading">Login Form</h3> 
       <span><b>Username :</b>&nbsp; <input type="username" 
        class="form-control" ng-model="user.name" required> </span> </br> 
       </br> <span><b>Password :</b>&nbsp;&nbsp; <input type="password" 
        class="form-control" ng-model="user.password" required> </span> 
       <br><br>     
       <button class="btn btn-lg btn-primary btn-block" type="submit"> 
        <b>Sign in</b> 
       </button> 
      </form> 
     </div> 
     <!-- /container --> 
    </div> 
    <script src='test.js' type="text/javascript"></script> 
</body> 
</html>

home.html

Hello I am from Home page

test.js

var applog = angular.module('myApp',['ngRoute']); 

applog.config([ '$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider) { 
     $routeProvider.when('/home', { 
      templateUrl : 'home.html', 
      controller : 'HomeController' 
     }).otherwise({ 
      redirectTo : 'index.html' 
     }); 
     //$locationProvider.html5Mode(true); //Remove the '#' from URL. 
    } 
]); 

applog.controller("LoginController", function($scope, $location) { 
    $scope.login = function() { 
     var username = $scope.user.name; 
     var password = $scope.user.password; 
     if (username == "admin" && password == "admin") { 
      $location.path("/home"); 
     } else { 
      alert('invalid username and password'); 
     } 
    }; 
}); 

applog.controller("HomeController", function($scope, $location) { 

});

出典

2015-11-15 Ranga Reddy

どこがngViewですか？ – dfsq

私はどこに追加する必要があるか教えてくれますか？ –

index.htmlに

を追加するとindex.htmlのコンテンツと私のhome.htmlのコンテンツが表示されますが、home.htmlのコンテンツのみを表示したい場合 –

@dfsqは、あなたがそこにあなたの新しいビューを配置するためのNG-ビューを必要と言ったように。もちろん、インデックスにng-viewを追加すると、インデックスとホームの内容が表示されます。ここでの解決策は、ログイン認証とホーム認証の2つの部分ビューを作成することです。インデックスファイルは、ここで

は、私が言っている何のためのコードである（...メニュー、フッタ）のみNG-ビュー、あなたはあなたの全体のアプリで一定に保ちたいそれらの要素が含まれている必要があります index.htmlを

<html ng-app='myApp'> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script 
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
<script src='test.js' type="text/javascript"></script> 
</head> 

<body > 
    <div ng-view></div> 
    <script src='test.js' type="text/javascript"></script> 
</body> 
</html>

新しいルート設定

applog.config([ '$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider) { 
     $routeProvider.when('/home', { 
      templateUrl : 'home.html', 
      controller : 'HomeController' 
     }) 
     $routeProvider.when('/', { 
      templateUrl : 'auth.html', 
      controller : 'LoginController' 
     }).otherwise({ 
      redirectTo : 'index.html' 
     }); 
     //$locationProvider.html5Mode(true); //Remove the '#' from URL. 
    } 
]);

とauth.htmlファイル内のログインコードを入れ

<div id='content' ng-controller='LoginController'> 
     <div class="container"> 
      <form class="form-signin" role="form" ng-submit="login()"> 
       <h3 class="form-signin-heading">Login Form</h3> 
       <span><b>Username :</b>&nbsp; <input type="username" 
        class="form-control" ng-model="user.name" required> </span> </br> 
       </br> <span><b>Password :</b>&nbsp;&nbsp; <input type="password" 
        class="form-control" ng-model="user.password" required> </span> 
       <br><br>     
       <button class="btn btn-lg btn-primary btn-block" type="submit"> 
        <b>Sign in</b> 
       </button> 
      </form> 
     </div> 
     <!-- /container --> 
    </div>

test.jsスクリプトをインデックスに配置すると、アプリ全体に表示されることに注意してください。

希望します。

出典

2015-11-15 13:52:24 davidivad

Index.htmlと

<html ng-app='myApp'> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/> 
<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
<script 
    src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
</head> 

<body > 
    <div ng-view></div> 
    <script src='test.js' type="text/javascript"></script> 
</body> 
</html>

test.js

var applog = angular.module('myApp',['ngRoute']); 

applog.config([ '$routeProvider', '$locationProvider', 
    function($routeProvider, $locationProvider) { 
     $routeProvider.when('/home', { 
      templateUrl : 'home.html', 
      controller : 'HomeController' 
     }) 
     $routeProvider.when('/', { 
      templateUrl : 'login.html', 
      controller : 'LoginController' 
     }).otherwise({ 
      redirectTo : 'index.html' 
     }); 
     //$locationProvider.html5Mode(true); //Remove the '#' from URL. 
    } 
]); 

applog.controller("LoginController", function($scope, $location) { 
    $scope.login = function() { 
     var username = $scope.user.name; 
     var password = $scope.user.password; 
     if (username == "admin" && password == "admin") { 
      $location.path("/home"); 
     } else { 
      alert('invalid username and password'); 
     } 
    }; 
}); 

applog.controller("HomeController", function($scope, $location) { 

});

<div id='content' ng-controller='LoginController'> 
    <div class="container"> 
     <form class="form-signin" role="form" ng-submit="login()"> 
      <h3 class="form-signin-heading">Login Form</h3> 
      <span><b>Username :</b>&nbsp; <input type="username" 
       class="form-control" ng-model="user.name" required> </span> </br> 
      </br> <span><b>Password :</b>&nbsp;&nbsp; <input type="password" 
       class="form-control" ng-model="user.password" required> </span> 
      <br><br> 
      <button class="btn btn-lg btn-primary btn-block" type="submit"> 
       <b>Sign in</b> 
      </button> 
     </form> 
    </div> 
    <!-- /container --> 
</div>

出典

2015-11-15 13:47:28 ChE

ありがとうございました –

AngularJsを使用して1ページを別のページに移動する方法

答えて

関連する問題