The Best Way to Setup AngularJS Controllers: The Basics
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.
This article focuses on the basics of setting up an angular application and a controller with dependency injection.
Bookmark John Papa's AngularJS Style Guide Now!
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.
Now we’ll create our angular application (app.js).
###The Controller Now that we have the basic application configured, let’s walk through setting up a controller.
app.js file, let’s create our controller.
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.
####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:
####DI Option #2: Manual Injection
$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.
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 digestable for the next developer, or our future selves.