AngularJS routing not working, but no errors are thrown

Question

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

index.html

<!DOCTYPE html>
<html ng-app="githubViewer">

  <head>
    <script data-require="[email protected]" 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>

Any help would be appreciated

Carlos Mayo · Accepted Answer · 2015-12-15 21:08:53Z

2

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.

answered Dec 15, 2015 at 21:08

Carlos Mayo

2,1241 gold badge20 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Norfeldt Over a year ago

Thank you and a very useful link!

Carlos Mayo Over a year ago

Here you can get another useful Angular style guide

Kostya Shkryob · Accepted Answer · 2015-12-15 21:00:30Z

2

Basically you all js file has wrong IIFE pattern.wrong

It should be

})();

instead of

}());

Also there are typos. In index.html:

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

Must be:

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

And in MainController.js. This code:

app.controller("MainControler", MainController);

Must be changed to:

app.controller("MainController", MainController);

edited Dec 15, 2015 at 21:00

Kostya Shkryob

2,36918 silver badges24 bronze badges

answered Dec 15, 2015 at 20:49

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

7 Comments

Norfeldt Over a year ago

Updated the code plnkr.co/edit/KyMnxW?p=preview but it doesn't seem to be it. Still not working

Pankaj Parkar Over a year ago

@Norfeldt check the edit which has been done by Kostya Shkryob Thanks man for edit

Norfeldt Over a year ago

Thx a lot for finding all these typos. Updated the code. But still not working or throwing any errors. plnkr.co/edit/KyMnxW?p=preview

Kostya Shkryob Over a year ago

I have made working version of plunker plnkr.co/edit/UV4Wzqx4vEsRdWAAMslE?p=preview

Pankaj Parkar Over a year ago

@KostyaShkryob Thanks for finding and appreciate your contribution to this answer.. :)

|

Andrew Shepherd · Accepted Answer · 2015-12-15 21:03:18Z

0

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

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.

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:

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

answered Dec 15, 2015 at 21:03

Andrew Shepherd

45.5k33 gold badges148 silver badges212 bronze badges

1 Comment

Pankaj Parkar Over a year ago

No..its not what you are saying..OP has declared module only once & then he is utilizing it using angular.module('githubViewer')

Collectives™ on Stack Overflow

AngularJS routing not working, but no errors are thrown

3 Answers 3

2 Comments

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related