Building Web Applications for the Future Browser with AngularJS — Learning AngularJS Notes

Choosing to use AngularJS for a new web application is not just as choosing another JavaScript framework. AngularJS is moving towards to a new browser standard. Angular embraces HTML, CSS, and JavaScript. Since most of these technologies are for static documents, Angular extends the vocabulary of these technologies for dynamic documents. It is what HTML would have been, had it been built for dynamic content.

There is a notion of Angular 3D: Directives, Data binding, and Dependency injection.

Directives

Through the concept of directive Angular turns HTML into DSL, Domain Specific Language. Directives are a way to teach HTML new tricks, make custom components, and simplify DOM manipulation. During DOM compilation directives are matched against the HTML and _executed_. This allows directives to register behavior, or transform the DOM. Directives are unique to Angular.

Figure 1 Ways to invoke directives

Figure 1 Ways to invoke directives

Figure 2 HTML could be verbose, web components are cleaner

Figure 2 HTML could be verbose, web components are cleaner

Figure 3 Reusable components will become the browser native implementation

Figure 3 Reusable components will become the browser native implementation

Data Binding

Data-binding in Angular web application is the automatic synchronization of data between the model and view components. Model binds to the view in single directional manor or form in bi-directional manor. Model is the single-source-of-truth in the application. You don’t query the DOM, you don’t update the DOM, you don’t talk to the DOM, DOM just happens to be the projection on the current model. The model is the truth. If you want to read the current state of the form, you go to the model, if you want to change the current state of the form, simply go to the model and update the model.

Figure 4 AngularJS Data Binding Structure

Figure 4 AngularJS Data Binding Structure

Figure 5 AngularJS Model, View, Controller

Figure 5 AngularJS Model, View, Controller

Figure 6 Model Driven View Will Become Future Browser Standard

Figure 6 Model Driven View Will Become Future Browser Standard

As Miško Hevery mentioned in “Re-Imagining the Browser with AngularJS”, the data binding should really be part of the browser and Angular team has been working on a spec called model driven view and a child spec called object observe. They are trying to bring the native implementation of data binding into the browser and browser should embrace data binding.

Dependency Injection

Dependency Injection is a core to Angular. DI allows less code and more extensibility. Angular DI is the key to making easily testable components.

Figure 7 $provider service is responsible for telling Angular how to create new injectable things

Figure 7 $provider service is responsible for telling Angular how to create new injectable things

Figure 8 $injector is responsible for actually creating instances of the services using the code provided via $provide

Figure 8 $injector is responsible for actually creating instances of the services using the code provided via $provide

Each AngularJS application has a single $injector that gets created when the application first starts; you can get a hold of it by injecting $injector into any injectable function. Any time you write a function that takes injected arguments, you’re seeing the injector at work.

There Are More Important Angular Concepts

Module, controller, scope, factory, filter, compile, link, route, promises, unit-testing, e2e=testing, watching on variables, notes on each individual concept are coming…

AngularJS is very comprehensive. Even though the team building it is small with only 6 people, the core people Miško Hevery (father of AngularJS), Vojta Jina (creator of Karma), and Igor Minar (team leader, Continuous Integration Testing or CI guy) are great visionaries. Choosing AngularJS to build the new web application = preparing for the future standards.

The web is moving towards a data driven architecture, where browsers are responsible for dynamic rending and two way data binding. This tweet from John Whish: “I’m pretty sure that HTML6 is going under the cod ename Angular JS” is not rootless.

Great Links to Get Started with AngularJS

Advertisements

One thought on “Building Web Applications for the Future Browser with AngularJS — Learning AngularJS Notes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s