Splitting AngularJS Controllers Into Individual Files

Question

Splitting AngularJS Controllers Into Individual Files

I'm currently utilizing Ui-Router in my AngularJS project and I'm seeking a way to organize my angular controllers into separate files for better organization.

For instance:

var app = angular.module('myApp', ["xeditable", 'ngRoute','ngSanitize',
 'ngAnimate', 'ngAria', 'ngMaterial','ngFileUpload','ui.router']);

app.config(function($stateProvider, $urlRouterProvider){

// For any unmatched url, redirect to /route1
$urlRouterProvider.otherwise("/my_requisitions/list");

$stateProvider
    .state('my_requisitions', {
        url: "/my_requisitions",
        templateUrl: "../../../partials/requisitions/my_requisitions.ctp",
        //controller: 'my_controller'
    })
    .state('my_requisitions.list', {
        url: "/list",
        templateUrl: "../../../partials/requisitions/my_requisitions.list.ctp",
        //controller: 'my_controller'

    })
    .state('my_requisitions.add', {
        url: "/add/:type",
        templateUrl: "../../../partials/requisitions/my_requisitions.add.ctp",
        controller: 'my_controller'

    })
    .state('manage_requisitions', {
        url: "/manage_requisitions",
        templateUrl: "../../../partials/requisitions/manage_requisitions.ctp"
    })
    .state('manage_requisitions.list', {
        url: "/list",
        templateUrl: "../../../partials/requisitions/manage_requisitions.list.ctp",
        controller: 'manage_controller'
    })
})

Given this code snippet, how can I move the declaration of 'my_controller' to an external file instead of defining it at the end as seen here:

app.controller('my_controller', function($scope, $filter, $http, $timeout,$mdDialog, $stateParams) {
etc....

Simply referencing the JavaScript file in the main HTML file and then using app.controller() does not seem to be effective. Any suggestions are appreciated!

Thank you!

javascript angularjs angular-ui-router

Answer 1

Answer №1

To ensure proper loading sequence, make sure to include your controller files in the HTML document before declaring your application file.

<script src="/path/to/angular.js"></script>
<script src="/path/to/controller1.js"></script>
<script src="/path/to/controller2.js"></script>
<script src="/path/to/yourapp.js"></script>

Within each controller file, define a controller as follows:

var Controller = function ($scope) {

}

Controller.$inject = ['$scope'];

Once you have declared the app variable in your main file:

app.controller('Controller', Controller);

Answer 2

To ensure proper loading sequence, make sure to include your controller files in the HTML document before declaring your application file.

<script src="/path/to/angular.js"></script>
<script src="/path/to/controller1.js"></script>
<script src="/path/to/controller2.js"></script>
<script src="/path/to/yourapp.js"></script>

Within each controller file, define a controller as follows:

var Controller = function ($scope) {

}

Controller.$inject = ['$scope'];

Once you have declared the app variable in your main file:

app.controller('Controller', Controller);

Answer 3

Answer №2

Consider organizing your controller in a separate file and then including it in your HTML file after you have included your app file

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Demo.js"></script>
<script src="~/Scripts/DemoController.js"></script>
<title>Demo</title>
</head>
<body>
<div ng-app="demoApp">
    <div ng-controller="demoController">
        <span>{{dummyData}}</span>
    </div> 
</div>
</body>
</html>

Code snippet from Demo.js

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

Code snippet from DemoController.js

demoApp.controller('demoController', function($scope) {
     $scope.dummyData = "hello from demo app";
});

Answer 4

Consider organizing your controller in a separate file and then including it in your HTML file after you have included your app file

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Demo.js"></script>
<script src="~/Scripts/DemoController.js"></script>
<title>Demo</title>
</head>
<body>
<div ng-app="demoApp">
    <div ng-controller="demoController">
        <span>{{dummyData}}</span>
    </div> 
</div>
</body>
</html>

Code snippet from Demo.js

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

Code snippet from DemoController.js

demoApp.controller('demoController', function($scope) {
     $scope.dummyData = "hello from demo app";
});

Splitting AngularJS Controllers Into Individual Files

Answer №1

Answer №2

Similar questions

Eliminating unnecessary whitespace between the bottom of the document and an element

Having difficulty accessing the API response accurately

javascript pull data from an array

Change the spread operator in JavaScript to TypeScript functions

Creating dynamic height based on width using JavaScript

How can I confine a non-UMD module that has been imported in Webpack and Typescript to just one file?

What is the proper way to integrate three.js (a third-party library) into the view controller of an SAPUI5 application

Material UI DateTimePicker Displaying Incorrectly

Tips on displaying tooltips on multiple graphs in Highcharts using Vue 3

Change the timestamp 2017-09-12 00:00:00 to just 2017-09-12 with the help of Angularjs

Passing the results of sequelize through express after the completion of a forEach iteration

How can I navigate through a webpage using Selenium WebDriver and JavaScript?

When a user inputs in the field, it automatically loses focus

Exploring the execution of asynchronous scripts in Selenium

The absence of multiple lines on the x-axis in the linear chart was noticeable

incorporating a dynamic parameter into the payload of an AJAX post request

Access your Facebook account securely with Single Sign-On integration in Angular

Can anyone provide guidance on uploading data to a mongodb database? I've attempted a few methods but keep encountering errors

What is the process for saving information to a database with JavaScript?

What is the ideal destination for my Ajax request to be sent?