Angular2 Overview
Angular2 Introduction
Angular2’s major advantage – One of the most confusing things for a UI developer who is from a JAVA background would be all about type in JavaScript. We know that, JS is not a strictly typed language. To avoid those kinds of confusions, Angular 2 is here with TypeScript.
TypeScript can be considered as a superset of JavaScript, it’s a typed JavaScript J To know more about TypeScript, please refer – http://www.typescriptlang.org/. We will not cover more on this here as we concentrate on AJS and will throw light on TS whenever required in between!
Architecture Overview:
Good news is – we have class, encapsulation, import, export and everything now! 🙂
Let’s review the overall architectural components in AJS2 one by one. TypeScript is actually a modular programming language. So, it’s always the best practice to keep our Angular2 apps modular. So, we can consider that Angular is a collection of multiple modules. We can import and export one another as in Java. AJS has its own library modules in its core component/library.
Next, coming to major building blocks of AJS2 architecture, the following are very important components/building blocks/features:
- Component
- Template
- Directive
- Metadata / Decorators
- Services
Also, as in earlier versions of Angular, we have Dependency Injection and Data Binding concepts too
Component: Angular Components are nothing but, the basic building block, where all our application business logic resides. It’s similar to the controllers we had in our AJS 1.x. It can be considered as a function or a kind of class as in Java. It has properties and methods and also, scope that we had in AJS 1.x is combined here in component.
Template: Angular templates are nothing but our application views. It’s more like a regular HTML which renders the DOM as per the instructions it receives from component or the directive.
Observe closely that, we have {{myName}}, which later evaluates to the actual name value that’s bound to the property myName during run time. So, we have {{…}} symbol to render the values.
Similarly, we also can have – event binding or can attach event handlers in our template using the syntax as below in the examples.
Earlier, to achieve the same goal, we had ng-click, ng-“event” specific handlers. Now, we have to attach handlers to the events by assigning them with a pair of parenthesis.
We can have two-way data binding using “ngModel”, where it’s a combination of handling events along with binding the properties as below, this can also be considered as one of the attribute directives.
Directives: We have two types of directives in Angular2, the structural and the attribute. Structural directives alter the DOM, whereas the attribute directives alter the behavior of an existing element on DOM, may be based on certain events as we have seen above in ngModel.
Note: We do not have ng-repeat. We use ngFor, ngIf etc with an asterisk symbol for structural directives. A component is also a directive, where it does have a template bound to it. We use something called as decorators – @ to write custom directives whenever necessary.
Metadata: Metadata tells angular how to utilize and compile the component. It briefs what to do with that particular component. In the example we can see that ‘selector’ and ‘template’ are the two metadata fields, which tells angular to compile “my-app” to this class and insert the DOM with the template given. Selector actually represents the simple CSS selector for the component, like a class selector of CSS 🙂
Service: Service can be anything like a web service or a function that provides the necessary information or input that our app needs. It can have getters and setters!
Related example snippets:
This is all about the high-level overview of AJS 2. Will dive deeper in the next series 🙂