CODEWITHSUNDEEP
angularjsangularjs-routing
Luis Paulo Pinto
Luis Paulo Pinto

Reputation: 6036

Angular routing is not working if it is in a different file

I have the the following files:

index.html

<html ng-app="gitHubViewer">

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <script data-require="angular-route@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular-route.js"></script>

  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
  <script src="MainController.js"></script>
  <script src="gitHub.js"></script>
</head>

<body>
  <h1>GitHub Viewer</h1>
  <div ng-view>
  </div>
</body>

</html>

main.html

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

app.js

(function(angular) {
'use strict';

    angular.module('gitHubViewer', ['ngRoute'])
    .config(['$routeProvider',
      function($routeProvider) {
        $routeProvider
          .when("/main", {
            templateUrl: "main.html",
            controller: "MainController"
          })          
          .otherwise({
            redirectTo: "/main"
          });
       }
    ]);
})(window.angular);

MainController.js

(function(angular) {
  'use strict';

  angular.module('gitHubViewer', [])
    .controller('MainController', ['$scope', '$interval', '$location',
      function($scope, $interval, $location) {

        var decrementCountdown = function() {
          $scope.countdown -= 1;
          if ($scope.countdown < 1) {
            $scope.search($scope.username);
          }
        };

        var countdownInterval = null;
        var startCountdown = function() {
          countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
        };

        $scope.search = function(username) {
          if (countdownInterval) {
            $interval.cancel(countdownInterval);
            $scope.countdown = null;
          }              
        };

        $scope.username = 'angular';
        $scope.countdown = 5;
        startCountdown();
      }
    ]);
})(window.angular);

My problem is that the main.html file is not being loaded on ng-view when i have the routing on a separated file (app.js).

But if i remove the app.js file and add the .config on MainController.js,the main.html loads properly, here's the example:

(function(angular) {
  'use strict';

  angular.module('gitHubViewer', ['ngRoute'])
    .config(['$routeProvider',
      function($routeProvider) {
        $routeProvider
          .when("/main", {
            templateUrl: "main.html",
            controller: "MainController"
          })          
          .otherwise({
            redirectTo: "/main"
          });
       }
    ])
    .controller('MainController', ['$scope', '$interval', '$location',
      function($scope, $interval, $location) {

        var decrementCountdown = function() {
          $scope.countdown -= 1;
          if ($scope.countdown < 1) {
            $scope.search($scope.username);
          }
        };

        var countdownInterval = null;
        var startCountdown = function() {
          countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
        };

        $scope.search = function(username) {
          if (countdownInterval) {
            $interval.cancel(countdownInterval);
            $scope.countdown = null;
          }              
        };

        $scope.username = 'angular';
        $scope.countdown = 5;
        startCountdown();
      }
    ]);
})(window.angular);

Am i doing something wrong with the separated the files???

Upvotes: 1

Views: 1471

Answers (2)

trees_are_great
trees_are_great

Reputation: 3911

I think you are defining your module twice with the same name, instead add a handle to it and use that.

var app = angular.module('gitHubViewer', []);

app.controller(...
app.config(...

Here's your plunkr edited to work: plunkr

You need to declare the module that is shared between scripts outside the IIFE, so that it is a global variable to be shared. See: IIFE and scope

That is app.js now has the module defined at the top: 

var app = angular.module("gitHubViewer", ["ngRoute"]);    
(function() {

and this line was removed from MainController.js: 

 var app = angular.module("gitHubViewer", ["$scope", "$interval", "$location"]);

Note: You also don't need to inject scope or services like $location, that are included in the base angularJs package, into the module. These should be injected directly into controllers.

Note: after the countdown the plunkr now breaks, because you need to add your UserController in.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171669

When you create a new module you use the dependency array argument

angular.module('gitHubViewer', ['ngRoute']);

Then when you want to reference the existing module you leave out the second argument.

angular.module('gitHubViewer').run...
angular.module('gitHubViewer').controller....

Upvotes: 0

Related Questions