Organizing controllers in separate files within AngularJS

Question

Organizing controllers in separate files within AngularJS

I've been working on modularizing an AngularJS project by implementing different controllers in their own JS files. However, I'm facing issues with getting them to work properly.

Below is my config.js file where the primary module is defined:

(function() {
var app= angular.module("spa", [

    //oob angular modules


    //3rd party modules
    'ui.router',
    'ui.bootstrap'
]);

app.config(['$stateProvider', '$urlRouterProvider', configRoutes]);

//function to config the routes

function configRoutes($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('dashboard', {
        url: '/',
        templateUrl: '../App/Views/dashboard.html',
        controller: 'dashboardController',
        controllerAs: 'vm'
    })

    .state('supplier', {
        url: '/suppliers',
        templateUrl: '../App/Views/supplier.html',
        controller: 'supplierController',
        controllerAs: 'vm'
    })

    .state('event', {
        url: '/events',
        templateUrl: '../App/Views/event.html',
        controller: 'eventController',
        controllerAs: 'vm'
    })

    .state('partner', {
        url: '/partners',
        templateUrl: '../App/Views/partner.html',
        controller: 'partnerController',
        controllerAs: 'vm'
    })





    $urlRouterProvider.otherwise('/');

}

app.controller('dashboardController', dashboardController)

function dashboardController() {
    alert('dashboard-same function');
}
}());`

The dashboardController works fine, but other controllers in separate files do not trigger.

(function () {

'use strict';

var app = angular.module('spa');
app.controller('eventController', eventController);

function eventController() {
    alert('event');
}
});

This is the order of my script references:

<!--External Libs-->
<script src="../Scripts/jquery-1.9.1.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-animate.js"></script>
<script src="../Scripts/angular-sanitize.js"></script>
<script src="../Scripts/angular-cookies.js"></script>
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>   

<!--Jquery Plugins-->

<!--Custom Libs-->
<script src="../App/Common/config.js"></script> 

<!--Controllers-->
<script src="../App/Controllers/event.js"></script>
<script src="../App/Controllers/partner.js"></script>
<script src="../App/Controllers/dashboard.js"></script>
<script src="../App/Controllers/supplier.js"></script>

Thank you for your help.

javascript angularjs angular-ui-router

Answer 1

Answer №1

Regarding my previous comment, it seems like you may have overlooked executing the wrapping function in eventController.js. The correct code should look like this:

(function () {
  'use strict';

  var app = angular.module('spa');
  app.controller('eventController', eventController);

  function eventController() {
      alert('event');
  }
})();
//Don't forget these lines

If this adjustment doesn't solve the issue, I recommend creating a fiddle from your actual local code instead of the fiddle code to avoid any potential typos, and I can assist further.

Additionally, I noticed that there is no reference to routes.js in your HTML file. Did you mean config.html instead?

Answer 2

Regarding my previous comment, it seems like you may have overlooked executing the wrapping function in eventController.js. The correct code should look like this:

(function () {
  'use strict';

  var app = angular.module('spa');
  app.controller('eventController', eventController);

  function eventController() {
      alert('event');
  }
})();
//Don't forget these lines

If this adjustment doesn't solve the issue, I recommend creating a fiddle from your actual local code instead of the fiddle code to avoid any potential typos, and I can assist further.

Additionally, I noticed that there is no reference to routes.js in your HTML file. Did you mean config.html instead?

Answer 3

Answer №2

It seems like there might be some confusion on your end, but I can provide you with an example of how I approach it:

To illustrate, here is my approach to modularizing my AngularJS app (v1.3.6):

index.html:

<html>
<head>
    <title>Modularize</title>

    <!-- load module -->
    <script src="app/app.js"></script>
    <script src="app/app.constant.js"></script>
    <script src="app/app.config.js"></script>
    <script src="app/app.run.js"></script>

    <!-- load controllers/services/directives/factories -->
    <script src="app/controllers/MyController.js"></script>
</head>
<body>
    <!-- REST OF THE APP -->
</body>
</html>

app.js

var myapp = angular.module('spa', ['ui.router']);

app.constant.js

myapp.constant(function () {

});

app.config.js

myapp.config(function ($stateProvider) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'app/views/home.html',
            controller: 'MyController',
        });
});

app.run.js

myApp.run(function () {

});

MyController.js

myapp.controller('MyController', function ($scope) {

});

Answer 4

It seems like there might be some confusion on your end, but I can provide you with an example of how I approach it:

To illustrate, here is my approach to modularizing my AngularJS app (v1.3.6):

index.html:

<html>
<head>
    <title>Modularize</title>

    <!-- load module -->
    <script src="app/app.js"></script>
    <script src="app/app.constant.js"></script>
    <script src="app/app.config.js"></script>
    <script src="app/app.run.js"></script>

    <!-- load controllers/services/directives/factories -->
    <script src="app/controllers/MyController.js"></script>
</head>
<body>
    <!-- REST OF THE APP -->
</body>
</html>

app.js

var myapp = angular.module('spa', ['ui.router']);

app.constant.js

myapp.constant(function () {

});

app.config.js

myapp.config(function ($stateProvider) {
    $stateProvider
        .state('home', {
            url: '/home',
            templateUrl: 'app/views/home.html',
            controller: 'MyController',
        });
});

app.run.js

myApp.run(function () {

});

MyController.js

myapp.controller('MyController', function ($scope) {

});

Organizing controllers in separate files within AngularJS

Answer №1

Answer №2

Similar questions

Guide to accessing a nested and potentially optional object property with a default value and specifying its data type

Having trouble sending an array's JSON data to a web service using Angular

Running HTML code within a DIV using JavaScript

The Event of XMLHttpRequest State Transition Error

Troubleshooting Problems with Angular Directive Parameters

Exploring additional parameters within express.js

The Django POST request is rejecting due to a missing or incorrect CSRF token, despite having included the token in the form

Breaking down a multidimensional array into individual arrays using Javascript

Combining Context and MUI's theme provider for effective nesting: A step-by-step guide

Step-by-step guide on utilizing the vendor.ts file available at https://angular.io/docs/ts/latest/guide/webpack.html

Change Observable<String[]> into Observable<DataType[]>

What is the reason that this jQuery code is exclusive to Firefox?

Utilizing Ternary Operators with User Input

Can someone help me understand how to change the structure in order to identify which class has a body?

Hiding the y-axis on a msstackedcolumn2dlinedy Fusion Chart: A step-by-step guide

New and improved method for showcasing the switching of two PHP variables using jQuery Ajax

Load an XML file from the local server asynchronously on the Chrome web browser

Real-time updating fails to trigger the ng-change event in the text field

Which is the better option: utilizing the submit event of the form, or incorporating ajax functionality?

The CSS3 slideshow is displaying distorted and unfocused images