Angular is the new Black - Chapter I
June 23, 2014Aurelie Violette4 min read
Server-side web application are disappearing
The web is historically dominated by servers. The client only calls an URL, then all the magic happens in the server: it resolves routes, picks values in databases, applies some treatment to it, renders them in a template and finally returns a fully prepared page. If you want other infos, use a link, then you will navigate to another page and all this process recurs.
AngularJS, an organized client-side solution
AngularJS introduces new concepts to frontend development, that seem disturbing at first. Don't panic: the learning curve is no cliff. We are here to guide you smoothly through all these new concepts. And if you are familiar with server-side frameworks, you'll recognize some of the architecture.
As AngularJS is quite recent, many aspects of its development are not really standardized yet. We'll humbly present you our choices regarding practices and organization. Don't take it as holy words: we encourage you to experiment and make your own opinion about best practices to follow.
We obviously won't be covering everything about AngularJS in this first chapter, so let's focus on the very beginning: a short introduction of the different notions you'll meet when exploring AngularJS.
MVVM: wait what?
AngularJS is a MVVM framework. Sorry… what? MVVM stands for Model View ViewModel framework. It means it uses an architecture divided in three parts:
- The view: it describes what users will see. It's basically HTML and CSS, with some Angular-flavored markup.
- The view-model: it's the link between the previous two, it exposes model data to the view.
Decoupling all of these leads to separating the business logic from the presentation logic. You'll discover that it makes your code more reusable and more testable, and you'll learn soon enough why it's important. Moreover, AngularJS takes care of keeping all the data updated and synchronized. When the view is modified, the model automatically reflects these changes using the ViewModel. You change the model, the view is also automatically updated the same way. Awe-so-me.
Time for action!
First, take a look at
app.js. We just set a module named "app". For now, just see it as a wrapper for our application, we will talk about modules longer in the next chapter.
Now get to
Let's go to
deckController.js. We add to our application a controller, which is the view-model part of Angular's MVVM. A controller defines a scope, which is a bag of variables accessible to the view. For the moment, our controller just adds our model to the scope. Later it could offer some extra functions to manipulate it.
Last but not least, the view:
index.html. As you can see, it's a simple HTML page except for the attributes
ng-app="app" telling AngularJS it should use our module named "app" to process the part of the page the attribute is on.
ng-controller="deckController" tells Angular to instantiate this controller and its scope to render the content of the tag, which is a
div here. This part of the DOM and the controller scope data are now bound. Surrounding a scope variable like
deck in double curly braces will make its value appear in the view.
This JSON data is not very user-friendly. We can use another attribute:
ng-repeat (which is a built-in function of Angular) to iterate through the
deck array. The
<li> block will be repeated for each card in
ng-repeat syntax is very similar to
Now that we've seen the binding from the model to the view, let's demonstrate the other way, and how magically Angular updates all theses bindings. Let's add a comment field: an input area bound (with
ng-model) to the model
card.comment, and display its value above it. And now, if you type text into the input, the data is magically updated in the model, leading the view to be updated just above.
In the next chapter, we will talk more about these magic attributes, and how you can build your own. These are named directives, and this is one of the most important concept of AngularJS.
We hope you enjoyed reading this post. See you soon!