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 :)
