AngularJs 使用 $routeProvider 的路由问题

Posted 2023-02-23

【中文标题】AngularJs 使用 $routeProvider 的路由问题

【英文标题】：AngularJs routing issue using $routeProvider

【发布时间】：2019-10-24 07:18:26

【问题描述】：

我的 AngularJs 路由总是重定向到主页并且总是调用HomeController而不是重定向到/VechileRegistration/Index、VechileRegistration/VechileInward

$routeProvider
  .when('/', 
    controller: 'HomeController',
    templateUrl: '/home/home.view.html',
    controllerAs: 'vm'
  )
  .when('/VechileRegistration/Index', 
    controller: 'HomeController2',
    templateUrl: '/home/home.view2.html',
    controllerAs: 'vm'
  )
  .when('/VechileRegistration/VechileInward', 
    controller: 'VehicleInwardController',
    templateUrl: '/home/VehicleInward.view.html',
    controllerAs: 'vm'
  )
  .otherwise(
    redirectTo: '/login'
  );

如何重定向到正确的位置并调用相应的控制器？

【问题讨论】：

表面上看起来不错。您在您的应用程序中注入 ngRoute 并且您已经引用了适当的 angular-route.js 文件？也就是说，它与您使用的主 angular.js 文件版本相同？

这可能只是拼写错误，但您的路径是“vechile”，而您和您的用户可能正在输入 URL“vehicle”（以匹配您的控制器名称）。只是想仔细检查一下显而易见的。

【参考方案1】：

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

    app.config(function ($routeProvider) 
         
        $routeProvider.when('/', 
            templateUrl: '/login.html',
            controller: 'loginController'
        ).when('/student/:username', 
            templateUrl: '/student.html',
            controller: 'studentController'
        ).otherwise(
            redirectTo: "/"
        );

    app.controller("loginController", function ($scope, $location) 
       
        $scope.authenticate = function (username) 
            // write authentication code here.. 

            $location.path('/student/' + username)
        ;

    );

    app.controller("studentController", function ($scope, $routeParams) 
        $scope.username = $routeParams.username;
    );

);

【讨论】：

值得添加关于为什么这回答了 OP 问题的信息。