Angular JS series – a conceptual introduction

Angular JS series – a conceptual introduction

Angular JS – a brief conceptual introduction

 

What is AngularJS?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. Angular’s data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Basically, AngularJS teaches the browser new syntax through a construct we call directives. The strength of AngularJS is embraced by:

  • Data binding, as in {{}}.
  • DOM control structures for repeating, showing and hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching new behavior to DOM elements, such as DOM event handling.
  • Grouping of HTML into reusable components.

 

Data-binding (2-way)

Data-binding in AngularJS apps implies on the automatic synchronization of data between the model and view. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well. This happens immediately and automatically, which makes sure that the model and the view is updated at all times.

Think of your model as the single-source-of-truth for your application.

Your model is where you read or write ‘anything’ needed in your application.

Because of the immediate synchronization of the model and the view, the controller can be completely separated from the view, and simply concentrate on the model data. Thanks to the data binding in AngularJS, the view will reflect any changes made in the controller. There is no need in providing observable functions (as common in jQuery projects).

 

Templates

In Angular, templates are written in plain-old-know HTML. These templates contain extra Angular-specific elements and attributes (directives, curly brackets, filters and form control). Angular will combine Model and Controller data into the view. The view will be updated when changes are detected through the data binding principle.

 

Dependency injection (DI)

Dependency Injection is a software design pattern in which components are given their dependencies instead of hard coding them within the component. This relieves a component from locating the dependency and makes dependencies configurable. This helps in making components reusable, maintainable and testable.

Dependency injection (DI) in AngularJS is supremely useful, and the key to making easily testable components.

Gaining access to core AngularJS services is simply a matter of adding that specific service as a parameter; AngularJS will detect that you need that service and provide an instance for you.

 

 

Directives

Directives can be used to create custom HTML tags that serve as new custom widgets. They can also be used to “decorate” elements with behavior and manipulate DOM attributes in interesting ways. (See more below)

 

Deep-linking / Routing & resolvement

Deep-link URLs to controllers and views (HTML partials) and optional wait for dependencies to resolve before the targeted route change is triggered.

 

AngularJS = Model View Whatever ≈ MVC

MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). See it as a separate model layer that can be managed in only way whatsoever (completely independent from the view). Therefor AngularJS is also referred to as Model View Whatever.

 

!jQuery

Don’t use jQuery inside AngularJS projects. Don’t even include it. It will hold you back. And when you come to a problem that you think you know how to solve in jQuery already, before you reach for the $, try to think about how to do it within the confines the AngularJS.

jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. https://docs.angularjs.org/api/ng/function/angular.element

 

Conceptual nutshell

The view acts as the official record of what is supposed to happen.

Manipulate DOM and augment views with directives.

The (view) model represents your data.

Usage of a service layer to perform reusable tasks.

Controllers are the glue to put it all together.

 

Points of awareness

  • Angular does not unify to only one approach (as many other scripting languages), with multiple ways to do the same thing it’s hard to tell which way is better for particular tasks. Good practices (see later explanation) will try to align to 1 direction.
  • Angular applications with more than 2000 watchers can severely lag the User Interface (UI).
  • The lifecycle of Angular applications is rather complex. Reading the core Angular code is a must to have an absolute perfect understanding.
  • The $scope is inherited by default. (see later explanation)
  • Error reporting is not always that clear within AngularJS itself, after some time though you’ll start to recognize specific patterns.

 

 

Summary

All the above items are summarized as a small introduction. As we’ll try to determine some good practices to align some good principles as a uniform way of working in the next sections.

More about AngularJS conceptshttps://docs.angularjs.org/guide/concepts

AngularJS API docshttps://docs.angularjs.org/api

Stack Overflow http://stackoverflow.com/questions/tagged/angularjs


About the Author

Daan is a Creative-Geek who loves learning and sharing new techniques! Follow him on Twitter to keep up to date with the Creative-Geeks blog and other subjects. Contact him on e-mail : info[at]creative-geeks.com.