Question

我添加了angular.min.js，angular-route.min.js

问题是当点击登录按钮时，网址会更改为＆＃39; / home＆＃39;但是页面home.html没有显示。我尝试在templateUrl下添加控制器，但它无法正常工作

<main class="container" ng-app="Myapp">
<div class="row">
  <div class="login-page" ng-controller="loginCtrl">
    <div class="form">
      <form class="login-form">
        <input type="text" placeholder="username" ng-model="username"/>
        <input type="password" placeholder="password" ng-model="password"/>
        <button type="submit" ng-click="submit()">login</button>
        <p class="message">Not registered? <a href="#">Create an account</a></p>
      </form>
    </div>
  </div>
</div>

 var app = angular.module('Myapp', ['ngRoute']);

 app.config(function ($routeProvider, $locationProvider){
 $locationProvider.hashPrefix('');
 $routeProvider
 .when('/', {
    templateUrl: 'index.html'
 })

 .when('/home', {
    templateUrl: 'home.html'
 })
 .otherwise({
    redirectTo: '/'
 });
});


app.controller('loginCtrl', function($scope, $location){
$scope.submit = function(){
    var username = $scope.username;
    var password = $scope.password;

    if($scope.username =='admin' && $scope.password == 'pwd'){
        $location.path('/home');
    }
    else {
        alert("Invalid Credentials");
    }

});

Answer 1

您需要抽象应用程序并将其放在不同的文件中，并在index.html中包含对这些文件的引用

的index.html

 <main class="container" ng-app="Myapp">

        <div class="row" ng-controller="mainCtrl">
          <div ng-view></div>
        </div>
   </main>

的login.html

<div class="login-page">
    <div class="form">
      <form class="login-form">
        <input type="text" placeholder="username" ng-model="username"/>
        <input type="password" placeholder="password" ng-model="password"/>
        <button type="submit" ng-click="submit()">login</button>
        <p class="message">Not registered? <a href="#">Create an account</a></p>
      </form>
    </div>
  </div>

配置文件

 var app = angular.module('Myapp', ['ngRoute']);

 app.config(function ($routeProvider, $locationProvider){
 $locationProvider.hashPrefix('');
 $routeProvider
 .when('/', {
    templateUrl: 'login.html',
    controller:'loginCtrl'
 })

 .when('/home', {
    templateUrl: 'home.html',
    controller: 'homeCtrl'
 })
 .otherwise({
    redirectTo: '/'
 });
});

主控制器

app.controller('mainCtrl', function($scope, $location){

    });

家庭控制器

app.controller('homeCtrl', function($scope, $location){

    });

登录控制器

app.controller('loginCtrl', function($scope, $location){
$scope.submit = function(){
    var username = $scope.username;
    var password = $scope.password;

    if($scope.username =='admin' && $scope.password == 'pwd'){
        $location.path('/home');
    }
    else {
        alert("Invalid Credentials");
    }

});

Answer 2

你需要一个＆＃34; ui-view elment＆＃34;包装动态内容。然后home.html将在这个＆＃34; ui-view＆＃34;中加载/编译。元件。

Answer 3

如果index.html已将ng-app="Myapp"从home.html中删除，并将ng-view添加到index.html中的正确位置。所以有角度的路线会用你的home.html取代ng-view

角度路由不起作用，显示URL但页面未加载

3 个答案: