Difference between revisions of "AngularJS"

Revision as of 12:38, 31 December 2016

In software development, AngularJS (commonly referred to as "Angular") is an open source web application JavaScript framework for developing single-page applications.

This article focuses on Angular 2.

Description

AngularJS simplifies both the development and the testing of web applications by providing a framework for client-side Model–view–controller (MVC) architecture, along with components commonly used in rich Internet applications.

AngularJS works by first reading the HTML page, which has embedded into it additional custom tag attributes.

Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables.

The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

Why Angular 2

• Keep and enhance best practices from Angular 2
• Standards: new syntax for templates binding to native DOM
• Improved change detection for speed/performance
• Reactive mechanism handling
• Immutable data objects

Directive

A directive is a class decorated with @Directive.

Built-in directives include structural directives and attribute directives.

A directive combined with a template is a component.

Component

A component is a directive with added template features.

A component is a class that controls a view template.

A component manages a view: a piece of the web page which displays information for the user, and responds to user feedback.

Providers (Services) are injected in constructor.

Need to explicitly define providers and directives within component decoration.

Hook into component life cycle with hooks.

Properties and methods of component class are available to template.

Component configuration

The Component method takes a configuration object with three properties.

• The Class method is where you implement the component itself, giving it properties and methods that bind to the view and whatever behavior is appropriate for this part of the UI.

Metadata

Metadata allows Angular to process (decorate) a class.

Attach metadata with Typescript using decorations.

Decorators are functions.

Most common is the @Component() decorator.

Takes a config option with selector, template (Url), providers, directives, pipes and styles.

Templates

Template is HTML which tells Angular how to render a component.

Templates include data bindings as well as other components and directives.

Angular 2 leverages native DOM events and properties.

Angular 2 leverages shadow DOM, helps with view encapsulation (e.g. styles applied to component).

Best practice: put template in component metadata.

Data binding

Enables data to flow from component to template and vice-versa.

Includes interpolation, property binding, event binding, and two-way binding.

// string interpolation of property value
{{value}}

// bind to property from template
[property]="value"

// attach event listened to component
(event)="handler"

// two-way data binding "hot dog in a box" syntax
[(ngModel)] = "property"

Services

A service is a class.

Handles business logic (so components don't have to).

Decorate with @Injectable to inject dependencies into service.

Modules

See AngularJS module.

Angular apps are modular. They consist of many files each dedicated to a purpose.

ES5 JavaScript doesn't have a native module system. There are several popular 3rd party module systems available.

Module interaction

In Angular apps, modules reference other modules using the app object.

When another module needs to refer to AppComponent, it gets it from app.AppComponent.

Angular modularity

Angular is also modular. It is a collection of library modules. Each library is itself a module made up of several, related feature modules.

When we need something from Angular, we use the ng object.

Dependency injection

See AngularJS dependency injection.

Class defintions

.Class({
      constructor: function() {}
});

Component definition object

ng.core.Component() tells Angular that this class definition object is an Angular component. The configuration object passed to the ng.core.Component() method has two fields, a selector and a template.

ng.core.Component({
  selector: 'my-app',
  template: '<h1>Hello Angular</h1>'
})

The selector specifies a simple CSS selector for a host HTML element named my-app. Angular creates and displays an instance of our AppComponent wherever it encounters a my-app element in the host HTML.

The template property holds the component's companion template. A template is a form of HTML that tells Angular how to render a view. In this example, the template is a single line of HTML announcing "Hello Angular".

Bootstrap

Use the bootstrapModule() function to run a module:

(function(app) {
  document.addEventListener('DOMContentLoaded', function() {
    ng.platformBrowserDynamic
      .platformBrowserDynamic()
      .bootstrapModule(app.AppModule);
  });
})(window.app || (window.app = {}));

Promises

Promises in AngularJS are provided by the built-in $q service. They provide a way to execute asynchronous functions in series by registering them with a promise object.

Promises have made their way into native JavaScript as part of the ES6 specification. The angular $q service provides an interface that closely resembles this new API so porting code to ES6 should be easy.

See Promise object (JavaScript).

TreeView

See:

• Angular Treeview @ ngmodules.org
• AngularJS UI Tree @ github.io
• Is it possible to make a Tree View with Angular?

See also

• Client-side
• Framework (computing)
• JavaScript library
• Web application

External links

• Official website
• Quickstart
• Developer guide
• Introduction
• Conceptual overview
• Tutorial
• Angular code examples @ code.karljones.com
• AngularJS @ Wikipedia