使用带有AngularJS错误的ngRoute

Using ngRoute with AngularJS Errors

本文关键字：错误 ngRoute AngularJS      更新时间：2023-10-18

我正在创建一个应用程序，使用Meteor作为我的框架，并在前端使用AngularJS。我一直在想如何浏览我的网站。我计划做的是将我的HTML分解成单独的文件，这样在将来更容易进行更改，而且它也很有组织。

这是我的JS文件：

var myApp = angular.module('CalorieCounter',['angular-meteor']);
angular.module('myApp', ['ngRoute']);
myApp.config(['$routeProvider',function($routeProvider) {
   $routeProvider
   .when('/', {
     templateUrl : 'main.html',
     controller : 'formCtrl'
   });
});

我收到的错误如下：

angular_angular.js?hash=08f63d2…:83 Uncaught Error: [$injector:modulerr] 
Failed to instantiate module CalorieCounter due to:
Error: [$injector:unpr] Unknown provider: $routeProvider

不确定我为什么会收到这个错误。。。我真的遵循了我在网上找到的一个教程。请告知。任何人在过去的4个小时里一直被困在这个问题上：（

更新#1

之后，按照每个人的建议，现在我得到了以下错误：

angular_angular.js?hash=08f63d2…:83 Uncaught Error: [$injector:modulerr]    
Failed to instantiate module CalorieCounter due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' is not available! You either    
misspelled the module name or forgot to load it. If registering a module   
ensure that you specify the dependencies as the second argument

当我刚刚查看AngularJS文档时，我不明白为什么会出现这个错误：https://docs.angularjs.org/api/ngRoute

更新#2

我发现了问题所在，没有在更新#1中报告错误。我现在困惑的是以下内容：

myApp.config(function($routeProvider) {
$routeProvider
 .when('/', {
  templateUrl : 'main.html',
  controller : 'formCtrl'
 })
 .when('/register', {
  templateUrl : 'public/register.html'
 });
});

当我尝试转到：localhost:3000/register时，它只是刷新主页并停留在那里。另一个问题是，在我的HTML文件中，如何将按钮重定向到指定的HTML文件？这只是常规的HTML约定吗？或者在AngularJS方面有特定的方法吗？

您正在创建两个角度模块。这很令人困惑，因为CalorieCounter模块被称为"myApp"，而"myApp"模块没有被分配给任何变量。要在myApp模块中使用CalorieCounter模块，请将其作为依赖项添加：

var calorieCounterApp = angular.module('CalorieCounter',['angular-meteor']);
var myApp = angular.module('myApp', ['ngRoute', 'calorieCounterApp']);
myApp.config(['$routeProvider',function($routeProvider) {
   $routeProvider
   .when('/', {
     templateUrl : 'main.html',
     controller : 'formCtrl'
   });
});

问题是您在模块myApp上声明ngRoute，但您通过myApp变量引用的模块是CalorieCounter

如果你把它改成这样，它应该可以工作：

var myApp = angular.module('CalorieCounter',['angular-meteor', 'ngRoute']);

我不知道ngRoute，但您可以使用angularui:angular-ui-router（github）包来路由您的网站，如下所示（文档中示例中的代码），

var myApp = angular.module('myApp', [
    'angular-meteor',
    'ui.router'
]);
myApp.config(function($stateProvider, $urlRouterProvider) {
    // For any unmatched url, redirect to /state1
    $urlRouterProvider.otherwise("/state1");
    // Now set up the states
    $stateProvider
    .state('state1', {
        url: "/state1",
        templateUrl: "partials/state1.html"
    })
    .state('state1.list', {
        url: "/list",
        templateUrl: "partials/state1.list.html",
        controller: function($scope) {
            $scope.items = ["A", "List", "Of", "Items"];
        }
    })
    .state('state2', {
        url: "/state2",
        templateUrl: "partials/state2.html"
    })
    .state('state2.list', {
        url: "/list",
        templateUrl: "partials/state2.list.html",
        controller: function($scope) {
            $scope.things = ["A", "Set", "Of", "Things"];
        }
    });
});

更改为：

var myApp = angular.module('CalorieCounter',['angular-meteor','ngRoute']);
相关文章：