Angular 路由不工作，显示 url 但页面未加载

Question

我已经添加了angular.min.js,angular-route.min.js

问题是单击登录按钮时 url 更改为“/home”，但页面 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

您需要 "ui-view elment" 来包装动态内容。那么 home.html 将是 loaded/compiled 在此 "ui-view" 元素中。

Answer 2

您需要抽象您的应用程序并将其放在不同的文件中，并在您的 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 3

如果 index.html 有 ng-app="Myapp" 将其从 home.html 中删除并将 ng-view 添加到 index.html 中的正确位置。所以 angular 路由将用你的 home.html

替换 ng-view

Angular 路由不工作，显示 url 但页面未加载

Angular routing is not working, url is displayed but page is not loading

html

login

angularjs

angular-routing