AngularDart is a client-side framework used to create structured decoupled web applications using the Model-View-Controller (MVC) design pattern. Angular currently exists in two languages, JavaScript and Dart. Both projects are developed by Google and share the same philosophy, although their implementation is fundamentally different.
In this chapter, we'll learn how to use AngularDart to create two applications, and you'll see that we are already familiar with many things from the previous chapter that covered polymer.dart:
- To-do list: With two-way data binding and a couple of Angular directives, we can create tedious tasks such as creating/removing DOM elements very easily
- Book component: We'll reuse the book template from Chapter 4, Developing a Mobile App with Dart, once more and compare polymer.dart and AngularDart implementations
At the end of this chapter, we'll make a few notes about performance bottlenecks when using AngularDart, and what you can do about them.
We won't be able to go through every single aspect of AngularDart. Just like AngularJS, it could easily fill an entire book, so we'll rather focus on the most interesting parts and how they relate to what we already know.
AngularDart encourages you to use MVC. In this case, the letter "C" is meant as a component instead of a controller, as you're probably more used to.
Note
Officially, Angular follows MVW, which means Model-View-Whatever. Seriously. Angular was closer to MVC in the past; now it's closer to MVVM. Igor Minar, an AngularJS developer at Google, stated this on G+ after being tired of never-ending and pointless discussions among developers as to what design pattern Angular follows. So, he called it MVW because it doesn't matter (https://plus.google.com/+AngularJS/posts/aZNVhj355G2).
To see all AngularDart features, refer to its documentation at https://docs.angulardart.org/.
Just like polymer.dart, the simplest way to install AngularDart is by adding it to your pubspec.yaml file:
name: todo_list version: 0.0.1 description: My first AngularDart app dependencies: angular: 1.1.0 browser: any web_components: any transformers: - angular
Note that we had to add angular to the transformers directive as well. This tells the pub tool that there are some extra tasks defined in AngularDart libraries. Even if you're used to adding dependencies in Dart Editor's GUI, you still have to add the transformer yourself.