CODEWITHSUNDEEP
angularjs
ak2020
ak2020

Reputation: 95

controller is not working with route functionality

I am new in angularjs tech. I have implemented one registration function in my project.

I have created one js file for routing and controller functionality in my project and its working fine, If i will do separate router and controller file then I am application is failing.

I need to do separate file for the router and controller.

Below is my code in one file.

app.js file 

var app = angular.module('crasApp', [ 'ngRoute' ]);
app.config(function($routeProvider) {
    $routeProvider.when("/", {
        templateUrl : "./views/xyz.html",
        controller : "searchCtrl"
    }).when("/registration", {
        templateUrl : "./views/abc.html",
        controller : "MainCtrl"
    }).when("/view", {
        templateUrl : "./views/viewsdata.html",
        controller : "overViewCtrl"
    });
});
app
        .controller(
                "MainCtrl",
                function($scope, $http) {       
         console.log("Hi");
});

index.html

<!DOCTYPE html>
<html ng-app="crasApp">
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<head>
<!-- Use Bootstrap -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/abn-stylesheet.css">
<link rel="stylesheet" href="./css/style.css">
<script src="./javascripts/jquery/jquery-1.12.4.js"></script>
<script src="./javascripts/jquery/jquery.min-1.12.4.js"></script>
<script src="./javascripts/angular/bootstrap.min.js"></script>
<!-- <script src="./javascripts/angular/angular.min.js"></script> -->
    <script src="./javascripts/controllers/app.js"></script>
<!-- <script src="./javascripts/angular/angular-route.js"></script> -->
<script src="./javascripts/router/router.js"></script>

<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

</head>
<div ng-view></div>

</html>

xyz.html

<!DOCTYPE html>
<html ng-app="crasApp">
<head>
<!-- Use Bootstrap -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/abn-stylesheet.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/ngDatepicker.css">
<script src="./javascripts/jquery/jquery-1.12.4.js"></script>
<script src="./javascripts/jquery/jquery.min-1.12.4.js"></script>
<script src="./javascripts/angular/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> -->
<script src="./javascripts/controllers/app.js"></script>
</head>
<body ng-controller="MainCtrl">
 Hi
</body>
<html>

So, Its working file if I am using one app.js file

I want to do seprate router and controller file.

router functionality i moved into different file and its working router functionality but not working controller functionality..

Separate router file as below.

router.js

var app = angular.module('crasApp', [ 'ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.when("/", {
        templateUrl : "./views/retrieveTerminationReason.html",
        /*controller : "searchCtrl"*/
    }).when("/registration", {
        templateUrl : "./views/registration.html",
        /*controller : "MainCtrl"*/
    }).when("/view", {
        templateUrl : "./views/forbearanceRegistartionOverview.html",
        /*controller : "overViewCtrl"*/
    });
});

app.js as a controller 

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

app
        .controller(
                'MainCtrl',
                function($scope, $http) {
                    console.log("Hi");
});

Please any one can help on this part.

Upvotes: 2

Views: 507

Answers (2)

Peter Wilson
Peter Wilson

Reputation: 4319

the issue when you're using var app = angular.module('crasApp', [ 'ngRoute']); in your route.js file you are initializing new module NOT adding config to existing module!

the best approach for structuring an Angular App is NOT using variable you can call your module in a different way like:

app.js

var MODULE_NAME = 'crasApp'
angular.module(MODULE_NAME, ['ngRoute']);

to create controller controllers.js

angular.module(MODULE_NAME).controller('MainCtrl',function($scope, $http) {  //Note removing the dependencies array
       console.log("Hi");
 });

to create config routes.js

angular.module(MODULE_NAME).config(function($routeProvider) { //Note removing the dependencies array
$routeProvider.when("/", {
    templateUrl : "./views/retrieveTerminationReason.html",
    /*controller : "searchCtrl"*/
})

in your index.html

 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/routes.js"></script>
    <script src="js/controllers.js"></script>
 </head>

Note you don't need ng-controller directive in your HTML because defining it in routes is enough

separating services

create services.js for example

angular.module(MODULE_NAME).factory('Users',function($http,$q) {
  return {
    getUsers:function(){
      var def = $q.defer();
      $http({url:'URL_HERE',method:'GET'}).then(function(res){
        def.resolve(res)
      },function(err){
        def.reject(err);
      })
    }
  }
})

using in controller

angular.module(MODULE_NAME).controller('MainCtrl',function($scope, Users) {  //Note Users is the name of the factory created above
   Users.getUsers().then(function(res){
     $scope.users=res;
   },function(err){
     $scope.error = err;
   })
});

Upvotes: 0

Brian
Brian

Reputation: 5049

In router.js, change var app = angular.module('crasApp', [ 'ngRoute']) to var app = angular.module('crasApp').

Also, in app.js, your declaration should be: var app = angular.module('crasApp', ['ngRoute']);. Since you have a single module, 'crasApp', you must declare it's dependencies when you declare the module itself.

What you have currently is re-creating the module vs. appending functionality.

Also, be sure to include your router.js as well in your HTML .

Upvotes: 2

Related Questions