Skypoint Logo - AI platform for industries
Search
Close this search box.

The Best Way to Setup AngularJS Controllers: The Basics

Stay up to date with the latest customer data news, expert guidance, and resources.

Most AngularJS tutorials lead new developers down a dark and narrow path. Once your app has more than a few controllers and templates, things start to break down and you’ll end up refactoring the entire application.

To get started, we’ll create our html file (index.html). There’s nothing special about this file except you’ll notice the ng-app attribute on the html element which tells Angular we want to use the entire document as our application, and the ng-controller attribute on the div element which tells Angular that we want to use a controller for the contents of that element.

<!doctype html>
<html ng-app="app">
    <head>
        <meta charset="utf-8">
        <title>Angular Controller Demo</title>
    </head>
    <body>

        <div ng-controller="MyController">
            <span></span>
        </div>

        <script src="angular.js"></script>
        <script src="app.js"></script>
    </body>
</html>

Now we’ll create our angular application (app.js).

(function () {
    'use strict';

    angular.module('app', []);
})();

AngularJS Controllers: The Controller

Now that we have the basic application configured, let’s walk through setting up a controller.

In the app.js file, let’s create our controller.

(function () {
    'use strict';

    angular.module('app', [])
        .controller('MyController', My Controller);

    function MyController () {

    }

})();

Notice that we’re hanging the controller directly off the instantiation of the app module. But, what if we want to inject a service into our controller? We have two options if we want to use dependency injection.

AngularJS Controllers DI Option #1: In-line Injection

We’ll want to avoid this type of dependency injection as it’s not very clear what is happening to someone less familiar with Angular. Notice the array that starts with a collection of strings referring to our injected services and ending with our controller. Example:

(function () {
    'use strict';

    angular.module('app', [])
        .controller('MyController', ['myService', My Controller]);

    function MyController (myService) {

    }

})();

AngularJS Controllers DI Option #2: Manual Injection

Using Angular’s $inject method, we can explicitly declare our dependencies. We’ll want to detach our controller from the main app so we can move it to it’s own file or another closure.

(function () {
    'use strict';

    angular.module('app', []);

    // Set up the controller
    angular.module('app')
        .controller('MyController', MyController)

    // Inject dependencies
    MyController.$inject = ['myService'];

    // Controller
    function MyController (myService) {

    }

})();

If you are wondering why we would write more code than necessary and separating our controller from our injections and from our app, we’re doing this so our code can be more maintainable and intentional. We avoid being clever in favor of making our code readable and digestible for the next developer, or our future selves.

This article was originally posted at http://kenhowardpdx.com/blog/2015/01/the-best-way-to-setup-angularjs-controllers-the-basics/

Share This:
Twitter
Facebook
LinkedIn

More Resources

Search

Your Unified Data, Analytics & AI Partner

Industry leaders choose Skypoint as their comprehensive and compliant Modern Data Stack Platform. A Certified Microsoft Solutions Partner, Skypoint Cloud turns siloed data into connected experiences.