路由在 AngularJS 应用程序中不起作用答案

【问题标题】：Routing is not working in AngularJS app路由在 AngularJS 应用程序中不起作用
【发布时间】：2016-11-23 02:47:47
【问题描述】：

我正在制作一个 angularjs 应用程序，但我的路由部分不起作用。

一旦我使用 Login.html 登录到应用程序，它应该路由到 index.html 但它不起作用。

app.js

/**
 * Created by gupta_000 on 7/19/2016.
*/
'use strict';
var myApp = angular.module('myApp',[
'Controllers','ngRoute'
]);
myApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
    when('/main', {
        templateUrl: 'Login.html',
        controller: 'LoginCtrl'
    }).
    when('/home/student', {
        templateUrl: 'index.html',
        controller: 'DictionaryController'
    }).
    otherwise({
        redirectTo: '/main'
    });
}]);

我将所有自定义文件上传到以下位置。

http://plnkr.co/edit/mi2JS4y2FfMD9kIl58qk?p=catalogue

我已经包含了所有的依赖文件，比如 angular.js 和 angular-route.js 等等。

提前致谢。

【问题讨论】：

我希望这不是一个生产站点，而只是一个迷你项目，因为您正在客户端进行验证。 这是一种不好的做法。
嗨拉曼，我只是为我的实践制作一个示例项目。

标签： javascript angularjs

【解决方案1】：

您尚未在控制器中注入 $location。

app.controller('MainCtrl', function($scope, $http, $location) {
  $scope.name = 'World';
});

【讨论】：

【解决方案2】：

您需要在index.html 内的ng-app 中添加ng-view。

有点像.. <body ng-app="myApp"> <ng-view></ng-view> </body>

现在，Angular 应用程序将根据您的路由配置（在 ng-view 指令内）分配视图模板和控制器。

此外，应该有一个通用的index.html，其中包含所有依赖项，并根据路由配置呈现模板并为其分配控制器。无需像使用 index.html 和 login.html 那样重新创建包含依赖项的单独文件。

【讨论】：

嗨 Vishwajeet，非常感谢您的建议，这对我真的很有帮助！！！

【解决方案3】：

这是working plunker based on your code. 您缺少 ngRoute 将根据您的配置替换的 ng-view。所以，index.html 看起来像：

  <body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <ng-view></ng-view>
  </body>

ng-view 是一个 Angular 指令，它将在主布局文件中包含当前路由的模板（/main 或 /home/student）。简而言之，它根据路由获取文件并将其注入主布局（index.html）。

在配置中，ng-view 将替换为指向 Login.html 的“main”。我将“/home/student/”更改为指向新页面“dic.html”以避免无限循环，因为它曾经指向 index.html

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

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/main', {
      templateUrl: 'Login.html',
      controller: 'LoginCtrl'
    }).
    when('/home/student', {
      templateUrl: 'dic.html',
      controller: 'DictionaryController'
    }).
    otherwise({
      redirectTo: '/main'
    });
  }
]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

像您的示例一样，如果使用“harish”作为电子邮件登录并使用“harish”作为密码登录，则会调用 successCallback 并转到将 ng-view 替换为 dic.html 的“/home/student” ：

 $scope.validate = function() {
      $http.get('credentials.json').then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        console.log('Data: ' + JSON.stringify(response));
        $scope.users = response.data;

        var count = 0;
        for (var i = 0, len = $scope.users.length; i < len; i++) {
          if ($scope.username === $scope.users[i].username && $scope.password === $scope.users[i].password) {
            alert("login successful");
            count = count + 1;
            if ($scope.users[i].role === "student") {
              $location.path('/home/student');
              break;
            }
          }
        }

        if (count != 1) {
          alert("Please provide valid login credentials");
          $location.path("/main")
        }

      }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        console.log("Error: " + JSON.stringify(response));
        alert(JSON.stringify(response));
      });

    };

如果有帮助，请告诉我们。

【讨论】：

非常感谢 Gregori，这真的很有帮助！！