AngularJS路由不工作，但没有抛出任何错误

AngularJS routing not working, but no errors are thrown

本文关键字：任何 错误 路由 工作 AngularJS      更新时间：2023-09-26

我正在学习这个视频教程，在匆忙中搞砸了一些东西。。问题是，我消除了所有我犯的错误，但它仍然没有按预期工作。不显示搜索表单框。

完整代码可以在这里找到：plnkr代码

index.html

<!DOCTYPE html>
<html ng-app="githubViewer">
  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script scr="app.js"></script>
    <script src="MainController.js"></script>
    <script src="github.js"></script>
  </head>
  <body >
    <h1>Gihub Viewer</h1>
    <div ng-view></div>
  </body>
</html>

app.js

(function(){
  var app = angular.module("githubViewer", ["ngRoute"]);
  app.config(function($routeProvider){
    $routeProvider
      .when("/main", {
        templateUrl: "main.html",
        controller: "MainController"
        })
      .otherwise({redirectTo:"/main"});
  });
}());

main.html

<div>
  {{ countdown }}
  <form name="searchUser" ng-submit="search(username)">
    <input type="search" required="" placeholder="Username to find" 
      ng-model="username" />
    <input type="submit" value="Search" />
  </form>
</div>

如有任何帮助，将不胜感激

问题是您正在重新定义控制器中的模块和工厂代码：

var app = angular.module("githubViewer",[]);

创建的模块不是getting：

var app = angular.module("githubViewer");

一个模块应该创建一次，然后检索并添加控制器、配置、工厂等

这里有一些帮助。

基本上所有js文件都有错误的IIFE模式

应该是

})();

而不是

}());

还有打字错误。在index.html中：

<script scr="app.js"></script>

必须是：

<script src="app.js"></script>

在MainController.js中。此代码：

app.controller("MainControler", MainController);

必须更改为：

app.controller("MainController", MainController);

您误解了如何实现模块和控制器。在MainController.js和app.js中，都有一行：

var app=angular.module（"githubViewer"，["ngRoute"]）；

CCD_ 2实际上创建了一个新模块。实际上，您正在尝试创建两个具有相同名称的模块，这是不允许的。

遵循的模式是

var app = angular.module(...)
app.config(...)
var controller = app.controller("MainController", ["$scope", function() {
 ]]);

如果您真的希望MainController代码在一个单独的文件中，请创建一个函数：

 function createMainController(app) {
      app.contoller("MainController", ...)
 }
相关文章：