Updated on March 28, 2017
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.
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
Recent Comments