AngularJS路由无法正常工作，但不会抛出任何错误

I'm following this video tutorial and messed something up in the haste.. The problem is that I got rid of all the errors I made, but it still doesn't work as expected. The search form box doesn't display.

我正在关注这个视频教程，并在匆忙中弄乱了一些东西..问题是我摆脱了我所犯的所有错误，但它仍然没有按预期工作。搜索表单框不显示。

Full code can be found here: plnkr code

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

index.html

的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

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

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>

Any help would be appreciated

任何帮助，将不胜感激

3 个解决方案

#1

The problem is that you are redefinig the module in the controller and factory code:

问题是您要重新配置控制器和工厂代码中的模块：

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

Instead of gettingthe created module:

而不是获得创建的模块：

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

A module should be created once, then retrieve and add the controller, config, factory, etc...

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

Here some help.

这里有一些帮助。

#2

Basically you all js file has wrong IIFE pattern.wrong

基本上你所有的js文件都有错误的IIFE pattern.wrong

It should be

它应该是

})();

instead of

代替

}());

Also there are typos. In index.html:

还有拼写错误。在index.html中：

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

Must be:

一定是：

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

And in MainController.js. This code:

在MainController.js中。这段代码：

app.controller("MainControler", MainController);

Must be changed to:

必须更改为：

app.controller("MainController", MainController);

#3

You are misunderstanding how to implement a module and a controller. In both MainController.js and app.js, you have the line:

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

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

var app = angular.module（“githubViewer”，[“ngRoute”]）;

angular.module actually creates a new module. You are effectively trying to create two modules with the same name, which isn't allowed.

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

The pattern to follow is

要遵循的模式是

var app = angular.module(...)

app.config(...)

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

If you really want the MainController code to be in a separate file, create a function:

如果您确实希望MainController代码位于单独的文件中，请创建一个函数：

 function createMainController(app) {
      app.contoller("MainController", ...)
 }

#1