Angular from an Architect’s point of view
I’m someone who never worked on a UI framework,but has good experience in REST API development and architecture. So before I give Angular a try, I had some questions in my mind.
How do I create a web application that runs in different deployment environments like dev,staging or prod etc?
How can I distribute the components to my team so that they can work on it individually? Just like we work on REST APIs individually.
How I will use a component created by someone else?
How do I ensure that I always test my application with the latest version of a library?
Can I add a new feature without disturbing other features?
How can I divide a web application into different parts and only load those parts that user wants?
How can I prevent XSS(Cross site script attack) and which libraries I must use?
How do I unit test a UI ?
Can I use same code base for Mobile UI development?
How do I manage events in Browser? How data can be transferred from one component to another? In REST, I define contracts. How things work in UI frameworks?
The answers were hidden in Angular framework. More you understand it’s design methodology, more you get attracted and you start feeling more comfortable.
- High level Architecture of an Angular App
Component comprises of functionality, HTML template and the CSS styles that are used in its template.
Module is used to group a set of related components or services. A module can import other modules and can expose its functionality to other modules.
Service is typically a class with a narrow, well-defined purpose. It should do something specific and do it well.
Just like main() function in C and C++, here also there is an entry point module. In that module, an entry component will be specified. Angular starts it’s framework cycle using this entry point component and displays whatever is specified in the HTML template of this entry point component. That’s it.This process is called as Bootstrapping.
Angular is neither MVC(Model View Controller) nor MVVM(Model View ViewModel). It is component oriented.
2. High priority ‘lities’ which are taken care by Angular.
Maintainability — Written in Typescript,so all the latest updates of ECMA will be taken care.Component oriented architecture helps in maintaining big applications. Nodejs makes it easy to upgrade a particular library or dependency.
Re-usability — Because of Component oriented architecture,component can be published as node module.
Testability — Because of Dependency Injection using Decorators.
Extensibility — Because of Component oriented architecture and Routing Outlet.
Configurability — Because of Angular CLI
Internationalizability — Provided by Angular
Customizability — Components can be customized based on attribute values.
Usability — Angular CLI,Directives,Expressions,Data binding,Observables(framework features)
Debugability — Tools available
Deployability — Using Angular CLI and Nodejs
Installability — Using Nodejs
Learnability — Good tutorials and sample apps
3. Other areas of architecture
Seamlessness — Consistent and well-put-together
Code quality — Because of Typescript and Unit testing
Early Bug Detection — Because of Typescript and Unit testing
Responsiveness — Developer’s responsibility
4. Framework features
4.1 Dynamic Html Templates
How to achieve this using Angular? Any new syntax available?Any global objects or contextual objects provided by Angular to help?
First we must understand what is meant by a Context in Angular?
Expression context
To understand expression context, one must know what is called as Expression.
4.1.1 Interpolation {{ }}
Ex: <h3>Current customer: {{ currentCustomer }}</h3>
<div><img src=”{{itemImageUrl}}”></div>
The text between the braces is a template expression that Angular first evaluates and then converts to a string.
Interpolation is a special syntax that Angular converts into a property binding.
4.1.2 Property Binding
<img [src]=”itemImageUrl2">
<li *ngFor=”let customer of customers”>{{customer.name}}</li>
The brackets, [], tell Angular to evaluate the template expression. If you omit the brackets, Angular treats the string as a constant and initializes the target property with that string:
Property binding vs Interpolation
You often have a choice between interpolation and property binding. The following binding pairs do the same thing:
<p><img src=”{{itemImageUrl}}”> </p>
<p><img [src]=”itemImageUrl”> </p>
Note: When setting an element property to a non-string data value, you must use property binding.Apart from that there is no difference.
4.1.3 Template variables
<label>Type something: <input #customerInput>{{customerInput.value}} </label>
customerInput is a template variable that is referring to the input element.
4.1.4 Binding to user input events
<button (click)=”onClickMe()”>Click me!</button>
Get user input from the $event object
<input (keyup)=”onKey($event)”>
When a user presses and releases a key, the keyup event occurs, and Angular provides a corresponding DOM event object in the $event variable which this code passes as a parameter to the component's onKey() method.
Now it’s time to talk about Expression Context.
Context refers to identification of a variable name being used in template.
The expression context is typically the component instance. In the following snippets, the recommended within double curly braces and the itemImageUrl2 in quotes refer to properties of the AppComponent.
File - src/app/app.component.html<h4>{{recommended}}</h4>
<img [src]="itemImageUrl2">
An expression may also refer to properties of the template’s context such as a template input variable.
let customer where customer is a directive’s context object,
customerInput (#customerInput) is a template reference variable.
File - src/app/app.component.html<ul>
<li *ngFor="let customer of customers">{{customer.name}}</li>
</ul><label>Type something:
<input #customerInput>{{customerInput.value}}
</label>
The context for terms in an expression is a blend of the template variables, the directive’s context object (if it has one), and the component’s members.
Note: If you reference a name that belongs to more than one of these namespaces, the template variable name takes precedence, followed by a name in the directive’s context, and, lastly, the component’s member names.
Statement context
Statements can refer only to an event handling method of the component instance. It means that the AppComponent will ahve method called deleteHero().
File - src/app/app.component.html<button (click)=”deleteHero()”>Delete hero</button>
The statement context may also refer to properties of the template’s own context.
File - src/app/app.component.html<button (click)=”onSave($event)”>Save</button>
<button *ngFor=”let hero of heroes” (click)=”deleteHero(hero)”>{{hero.name}}</button>
<form #heroForm (ngSubmit)=”onSubmit(heroForm)”> … </form>
