Categories
Javascript Web Development

AngularJS (My Reference)

AngularJS is what HTML would have been had it been designed for building web applications.

Features

  • Magical two-way data binding (HTML being the view simple JavaScript variables being the model)
  • Provides a solid structure for client side applications
  • Routing Support – AngularJS was built for single page web applications
  • Templating – AngularJS uses plain old HTML as the templating language.
  • Teach HTML new syntax with directives – create new elements and attributes bespoke to your needs
  • Embeddable, testable, and injectable – works well alongside other libraies and doesn’t need a full commitment to using it throughout a whole site.
    • Dependency Injection- dependencies are injected automatically by a dependency injection container.
    • Test Driven Development (TDD) is a must for any developer.
  • Powered by Google and an active community – I doubt it’s going to be made redundant anytime soon…

Anatomy

  • Model: The data shown to the users. The model data are simple POJOs (Plain Old JavaScript Objects).
  • View: This is what the users see when they visit your page, that is to say after the raw HTML template involving directives and expressions is compiled and linked with correct scope.
  • Controller: The business logic that drives your application.
  • Scope: A context that holds data models and functions. A controller usually sets these models and functions in the scope.
  • Directives: Something that teaches HTML new syntax. It extends HTML with custom elements and attributes.
  • Expressions: Expressions are represented by {{}} in the HTML. They are useful for accessing scope models and functions.
  • Template: HTML with additional markup in the form of directives (<drop-zone/>) and expressions {{}}.

Glossary

  • CRUD (Create, Read, Update, Delete) App
  • POJOs (Plain Old JavaScript Objects).
  • TDD (Test Driven Development)
  • MVC –  Model-View-Controller (MVC) is an architectural pattern that fosters improved code organization by promoting separation of concerns. The UI (View) is separated from business data (Model) of the app through a Controller which handles inputs, delegates the tasks to business logic and coordinates with the model and view.
  • MVVM – Model-View-ViewModel (MVVM) is a design pattern to build declarative UIs. In MVVM, a ViewModel exposes your application’s business data (the Model) to the View in a way the View can understand it. In other words the ViewModel is a pure code representation of your business data. For instance, if you are creating a notes editor, your ViewModel should hold a list of notes and expose methods to add/edit/delete them.