Unable to Keep my config and controller in different files in angularJs

Question

I have a config for my RouteProvider and a controller in a single Js file as shown below

    var empApp = angular.module('employee', ['ngRoute']);
empApp.config(function ($routeProvider) {
    debugger;
    $routeProvider.when('/', {
        templateUrl: '/ShowAll.html',
        controller: 'mainCtrlr1'
    }).when('/AddEmployee', {
        templateUrl: '/AddEmployee.html',

    }).when('/EditEmployee', {
        templateUrl: '/EditEmployee.html',

    }).when('/deleteEmployee', {
        templateUrl: '/deleteEmployee.html',

    });
})
.controller('mainCtrlr1', ['$scope', '$location', function ($scope, $location) {
    $location.path('/');
    alert('Hi');
}]);

I want keep my config and Controller in two different files 1. Configs.js

var empApp = angular.module('employee', ['ngRoute']);
empApp.config(function ($routeProvider) {
    debugger;
    $routeProvider.when('/', {
        templateUrl: '/ShowAll.html',
        controller: 'mainCtrlr1'
    }).when('/AddEmployee', {
        templateUrl: '/AddEmployee.html',

    }).when('/EditEmployee', {
        templateUrl: '/EditEmployee.html',

    }).when('/deleteEmployee', {
        templateUrl: '/deleteEmployee.html',

    });
});

And my controller in Controller1.js as given below.

var empApp=angular.module('employee', ['ngRoute']);
empApp.controller('mainCtrlr1', ['$scope', '$location', function ($scope, $location) {
    //$location.path('/');
    alert('Hi');
}]);

Now i have given reference of these two files in my html as given below

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="Lib/angular.js"></script>
    <!--<script src="Scripts/Services.js"></script>-->

    <script src="Scripts/Controller1.js"></script>
    <script src="Scripts/conifgs.js"></script>
    <script src="Lib/angular-route.js"></script>


</head>
<body ng-app="employee">

    <div ng-view></div>

</body>
</html>

And my ShowAll.html code is as shown below

<div ng-controller="mainCtrlr1">
    <table>
        <thead>
            <th>Employee ID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
            <th>Age</th>
            <th>Telephone</th>
        </thead>
        <tbody ng-repeat="emp in GetAllEmployees()">
            <tr>
                <td>{{emp.EmployeeID}}</td>
                <td>{{emp.FirstName}}</td>
                <td>{{emp.LastName}}</td>
                <td>{{emp.Email}}</td>
                <td>{{emp.Age}}</td>
                <td>{{emp.telephone}}</td>
            </tr>
        </tbody>
    </table>
</div>

now when i execute with above changes, my controller is failing to register. However when my controller and config is in same js file, my application works fine.

Any suggestions are much appreciated :)

CodeWarrior · Accepted Answer · 2017-06-06 15:29:00Z

2

This code snippet angular.module('employee', ['ngRoute']) creates a new angular module.

Since you have this snippet twice (one in each new file), you will create two different angular modules.

Solution:

Keep the var empApp = angular.module('employee', ['ngRoute']); in the first js file that is imported in your html file.

In the second js file, replace the first line with var empApp = angular.module('employee');

To further clarify, angular.module('employee', ['ngRoute']) will create a new module and therefore needs to be executed first. angular.module('employee') will get a reference to the module that was already created and hence should be used in all subsequent js files that need a reference to the module.

answered Jun 6, 2017 at 15:29

CodeWarrior

2,8713 gold badges20 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

Unable to Keep my config and controller in different files in angularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related