AngularJS (nonfiction)

From Gnomon Chronicles
Jump to navigation Jump to search

AngularJS (also Angular.js) is a JavaScript-based open-source front-end web application framework.

It addresses challenges encountered in developing single-page applications.

AngularJS provides a framework for model-view-controller (MVC) and model-view-model (MVVM) architectures.

AngularJS works by first reading the HTML page, which has additional custom tag attributes embedded. AngularJS interprets these attributes as directives to bind input or output parts of the page that is representing by JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

AngularJS is the frontend part of the MEAN stack, consisting of:

  • MongoDB database
  • Express.js web app server framework
  • AngularJS front end
  • Node.js server

Programming paradigms

AngularJS is built on two programming paradigms:

  • Declarative programming model for user interfaces and connecting software components
  • Imperative programming for defining business logic

The framework adapts and extends traditional HTML to present dynamic content through two-way data-binding that allows for automatic synchronization of models and views. As a result, AngularJS de-emphasizes the explicit Document Object Model manipulation with the goal of improving testability and performance.

Design goals

  • Decouple DOM manipulation from application logic.
  • Decouple client side from server side, allow development in parallel and reuse on both sides.
  • Provide structure for development process:
    • Designing UI
    • Writing business logic
    • Testing

MVC pattern

AngularJS implements the MVC pattern to separate presentation, data, and logic components. Using dependency injection, AngularJS brings traditionally server-side services, such as view-dependent controllers, to client side web applications.

Scope

AngularJS uses the term "scope" in a manner akin to the fundamental of computer science: in a computer program, when is a particular binding valid?

The ECMA-262 specification defines scope as: a lexical environment in which a function object is executed in client-side web scripts, akin to how scope is defined in lambda calculus.

In AngularJS, "scope" is an object that itself can be in scope or out of scope in any given part of the program, following the usual rules of variable scope in JavaScript like any other object.

Bootstrap

The task performed by the AngularJS bootstrapper occur in three phases after the DOM has been loaded:

  • Creation of a new Injector
  • Compilation of the directives that decorate the DOM
  • Link of all directives to scope

AngularJS directives

AngularJS directives allow the develop to specify custom and reusable HTML-like elements and attributes that define data bindings and the behavior of presentation elements. Commonly used directives include:

  • ng-animate
  • ng-app - define root element
  • ng-aria
  • ng-bind - sets text of DOM element to value of expression
  • ng-class - conditionally applies a class, depending on boolean
  • ng-controller - specifies a JavaScript controller class that evaluates HTML expressions
  • ng-if - conditional branching
  • ng-init - called once when element is initialized
  • ng-model - two-way data binding between view and scope, use with <input>
  • ng-model-options
  • ng-repeat - instantiate an element once per item from a collections
  • ng-show and ng-hide - conditionally show/hide elements
  • ng-switch - conditional instantiation of templates
  • ng-view - base directive responsible for handing routes that resolve JSON before rendering templates drive by specified controllers.

Two-way data binding

  • AngularJS has two-way data binding, rendering templates in plain HTML according to data contained in a scope defined in the model.

The $scope service in AngularJS detects changes to the model section and modifies HTML expressions in the view view the controller.

Likewise, alterations to the view are reflected in the model.

This circumvents the need to actively manipulate the DOM and encourages bootstrapping and rapid prototyping of web applications.

AngularJS detects changes in models by comparing the current values stored earlier in a process of dirty-checking (unlike Ember.js and Backbone.js, which triggers listeners when the model values are changes).

  • $watch - method for dirty checking
  • $digest - method invoked internally at intervals, iterating over all $watches
  • $apply - method internally invokes $digest; used to begin manual dirty checking (execute all $watches)
  • $destroy - method and event: remove a scope and all its children from dirty checking - called whenever a $scope or $controller is destroyed

Angular Universal

Angular Universal generates static application pages on the server through server-side rendering.

Performance

AngularJS uses the digest cycle paradigm. The cycle is a loop, during which AngularJS checks if there is any change to any of the variables watched by all the $scopes.

See also

  • MongoDB (nonfiction)
  • React.js (nonfiction) - React is a JavaScript library for building user interfaces. It can be used as a base in the development of single-page or mobile applications. Complex React applications usually require the used of additional libraries for state management, routing, and interaction with APIs.

External links

Retrieved from "https://gnomonchronicles.com/w/index.php?title=AngularJS_(nonfiction)&oldid=41855"