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

时间:2018-02-23 11:15:45

标签: html angularjs

嗨,我是AngularJs的新手,我正试图在Angular Routing概念的帮助下进行页面导航,为此我在google搜索了很多但我无法找到解决方案来满足我的要求

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

case1:--登录成功后,从登录页面导航到主页 case2:--登录失败时,从登录页面导航到“故障”页面 case3:-当点击注册按钮时,需要像Forgot-password一样直接注册页面

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'
        });

    }]);
});

1 个答案:

答案 0 :(得分:0)

我知道这太老了,但是没有答案,在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之间来回跳动时,这确实是为了将来我。