如何在 Angular Js 中将一个页面导航到另一个页面答案

【问题标题】：How to navigate one page to another in Angular Js如何在 Angular Js 中将一个页面导航到另一个页面
【发布时间】：2020-01-21 12:10:17
【问题描述】：

嗨，我是 AngularJs 的新手，我正在尝试借助 Angular Routing 概念进行页面导航，为此我在 google 中搜索了很多，但我找不到满足我要求的解决方案

我需要带有 Angular 标签的登录页面以及如何从一个页面导航到另一个页面，就像我的结构一样

case1:--当登录成功时，它从登录页面导航到主页 case2:--当登录失败时，它从登录页面导航到失败页面 case3:-点击注册按钮时需要直接注册页面，就像忘记密码一样

app.js:

  'use strict';
    //Define Routing for app
    angular.module('myApp', []).config(['$routeProvider', '$locationProvider',
      function($routeProvider,$locationProvider) {
        $routeProvider
        .when('/login', {
            templateUrl: 'login.html',
            controller: 'LoginController'
        })
        .when('/register', {
            templateUrl: 'register.html',
            controller: 'RegisterController'
          })
        .when('/forgotPassword', {
            templateUrl: 'forgotpassword.html',
            controller: 'forgotController'
          })
       .when('/home', {
           templateUrl: 'views/home.html',
           controller: 'homeController'
        })
        .otherwise({
           redirectTo: '/login'
        });

    }]);
});

【问题讨论】：

那么这里有什么问题？这看起来很标准angularjs（不是angular）路由代码.....
这甚至没有意义。 “我想要带有角度标签的登录页面”甚至是什么意思？你去yoursite.com/login的时候，是不是没有显示登录页面？

标签： html angularjs

【解决方案1】：

我知道这是非常古老的，但没有答案，在 StackOverflow.com 上的搜索中排名第二，“angularjs 如何使用路线导航”

使用 angularjs 1.7.8，https://plnkr.co/edit/3bSYIp5Lzsf34ejh91xs?p=preview

您正在寻找的基础知识

angular.module("app", ["ngRoute"]).config(function($routeProvider) {
  $routeProvider
    .when("/about", {
      templateUrl: "about.html",
      controller: "aboutController"
    })
    .when("/", {
      templateUrl: "mainController.html",
      controller: "mainController"
    })
    .otherwise({
      redirectTo: "/"
    });
});

angular.module("app").controller('mainController', ['$scope', '$location', function($scope, $location) {
  $scope.goToAbout = function() {
      $location.path("about");
  }
}]);

angular.module("app").controller('aboutController', ['$scope', function($scope) {
  console.log("main controller loaded");
}]);

即使在 2020 年初，我的公司也在使用 angularjs。当我在 Angular 2....n 和 AngularJS 之间来回切换时，这真的是为了未来的我。

【讨论】：