Similarities between Angular 2+ objects and Angular 1 objects



This article will attempt to draw similarities between the various Angular scaffold types in regards to Angular 1 and Angular 2+ (known as AngularJS). The sections will be separated by Angular 2+ scaffold types, while the similar Angular 1 types will be described within each section.

Scaffold types are taken from the angular-cli documentation.
https://github.com/angular/angular-cli

Component

A component is the lowest level object type in AngularJS. It’s similar to a controller from Angular 1. AngularJS removes controllers and $scopes and adds the idea of Components.

https://angular.io/docs/ts/latest/api/core/index/Component-decorator.html
http://learnangular2.com/components/

Directive

There are two types of directives in AngularJS: Structural Directives and Attributes Directives.

Structural Directives change the structure of the view. Two examples are NgFor and NgIf. Learn about them in the Structural Directives guide.

Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name as in this example.

<div *ngIf="hero">{{hero.name}}</div>

In simple terms, a structural directive is similar to the main directive usage in Angular 1 — one which replaces the DOM within the element. Many of us have built directives which include templates that replace the DOM element (replace: true).

https://angular.io/docs/ts/latest/guide/structural-directives.html#!#write-a-structural-directive

Attribute directives are used as attributes of elements. The built-in NgStyle directive in the Template Syntax guide, for example, can change several element styles at the same time.

An attribute directive provides a way to modify the element directly, such as modifying the styles, or other element properties. With these directives you wouldn’t necessarily replace the HTML or perform other lower-level functions. For example, ng-class is an attribute directive.

https://angular.io/docs/ts/latest/guide/attribute-directives.html#!#directive-overview

Pipe

A pipe is equivalent to a filter in Angular 1.

https://angular.io/docs/ts/latest/guide/pipes.html

Service

A service in AngularJS is the same as a service in Angular 1. It’s a way to retrieve data from an API or provide shared data to multiple views. Services shouldn’t have knowledge of the view state, only the data present in the system or the API to retrieve that data.

https://angular.io/docs/ts/latest/tutorial/toh-pt4.html

Class

Class refers to a helper method called ng.Class. It provides a way in ES5 to create classes like you would in ES6. In most cases you wouldn’t need to use this structure because systems such as WebPack abstract this away so you can use ES6 or ES2015+.

https://angular.io/docs/ts/latest/api/core/index/Class-function.html

Guard

A guard is a way to protect the route configuration from certain use cases, such as a user is not logged in and shouldn’t gain access to a particular route.

https://angular.io/docs/ts/latest/guide/router.html#!#guards

Interface

An interface is a Typescipt object type. It has no similar item in Angular 1.

An Interface is “a way to define a contract on a function with respect to the arguments and their type.” Interfaces help to define rules regarding how to call your function, and if you attempt to break those rules then you will be provided with a Typescript exception.

https://angular-2-training-book.rangle.io/handout/features/interfaces.html

Enum

An Enum is another Typescript component which can be used in AngularJS. It has no similar object in Angular 1.

http://stackoverflow.com/questions/35835984/how-to-use-a-typescript-enum-value-in-an-angular2-ngswitch-statement

Module

Module references an AngularJS component called @NgModule. This component allows you to group your directive injection into one file so that you don’t have to add directive declarations, imports, and providers to every directive. It helps to organize your imports into one main file.

In Angular 1 this is similar to the normal angular.module('MyApp', ['various', 'dependencies']) code, where MyApp imports all of the directive and service modules that will be used throughout the app.

https://angular.io/docs/ts/latest/guide/ngmodule.html
https://scotch.io/bar-talk/getting-to-know-angular-2s-module-ngmodule

Futher Reading

More information can be found in the AngularJS style guide.

https://angular.io/docs/ts/latest/guide/style-guide.html#!#01-01

Leave a Reply

Your email address will not be published. Required fields are marked *