Angular is the new Black - Chapter I
Aurelie Violette5 min read
A few months ago when joining Theodo team, we discovered what JavaScript is really about, and we (Aurélie and David) decided to share on this blog our journey through AngularJS. This framework, developed and supported by no less than Google, is about to (or already has?) change the way we develop web applications today. This series of quick posts aims to guide newbies like we were not so long ago on the path to this really cool and promising technology.
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.
But this era is coming to an end. Users do not want to refresh a full page each time they trigger a filter or something similar, particularly in a mobile context. To ensure the best UX possible, some code has to be executed client-side. That’s where Javascript comes in. Just put this code in <script> tag, and, as long as the browser is compatible with the version of Javascript you are using, it will execute it.
As we always want more interactivity in our web apps, we find ourselves writing numerous lines of Javascript in our pages. And it starts to become like an horror story: no easy way to test this code, no organization, no reusability… It’s spaghetti code, and it tastes like evil, leading us to many bugs and reducing reliability and confidence in the app.
AngularJS, an organized client-side solution
That’s where AngularJS comes to rescue us, poor jQuery abusers. It introduces itself as a Javascript framework, even if some can argue it looks like a library. It brings server’s code organization to the client. It opens a broad way to tests and reusability. We see it as the best anti-stress for frontend developers.
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 model : it represents your data. It consists of JavaScript objects.
- 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 deck.js. This is our model. It’s a very simple one: just a simple JavaScript object (we’ll keep it dead simple for now). As Aurélie is an expert player of Magic The Gathering, we’ll use some of her cards for this example.
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 like 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 deck. ng-repeat syntax is very similar to for … in … block in JavaScript. Let’s simply display the card name and its cost.
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.
Previews
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!
