What is Angular 2 or Angular 4? High level overview, feature and fundamentals.

In this article, we will see a high-level overview of Angular 2 or Angular 4.  Also, we will see some unique features of Angular 2 and Angular 4. These features make it more powerful and faster than others. For better understanding, will go with some coding examples and performance analysis of Angular 2 or Angular 4. So, if you were searching for “Angular 2 tutorial for beginners” or “Angular 4 tutorial for beginners”, you are in right place. let’s begin….

What is Angular 2 or Angular 4?

Angular 2 is a complete JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals. Angular 2 (with typeScript ) is true object oriented web development to the mainstream, that is strikingly close to other server side languages such as C# and Java 8. Unlike the previous version of AngularJs ( 1.x), Angular 2 and Angular 4 is not following MVC architecture. It’s component based framework ( a tree of loosely coupled components).

Angular-2-architecture-diagram-Technical-Diary

Above image shows the structure of component-based applications. In Angular 2, an application is a tree of loosely coupled components. Angular 2 (or 2.x) is not the update version of Angular 1.x, rather a rewrite of the entire framework and include many breaking changes that we will see later.

Read Also: Difference between AngularJs 1 vs AngularJs 2.x.

The concept behind Angular 2 and Angular 4

For better understanding about angular2 component based model let’s start with a live example. The below screenshot shows a web page which has Navbar, Search, Carousel, Product and Footer components.

Angular 2 -component-technical-diary

Above image has three Product components rendered. This automatic rendering is done by real-time binding the template to the array of components retrieved from the server. Each title of the product component has a hyperlink that associated to the product detail page. Since we want to design a SPA(single page application), we don’t want to refresh the entire page to display product details. We can reuse areas occupied by the carousel and products, so it can also render product details while keeping the rest of the page unchanged. This activity can be split into following easy steps:

  1. We use Angular’s router-outlet directive, which allows us to declare the area currently occupied by the carousel and products to be <router-outlet>. So that, it can change the content based on the user’s navigation.
  2. Encapsulate Carousel and Product inside the Home component.
  3. Create a new Product Details component.
  4. Configure the Angular’s Router to show either the Home or ProductDetail component in the designated <router-outlet> area.

what is the component?

We’ve talked a lot about components, but we have not defined them. In Typescript a component is simply a class annotated with @Component.

@Component({
       selector: 'technicaldiary-home',
       template: `HTML or other markup is in-lined here`
})
export default class HomeComponent {
       // Application logic goes here
}

The annotation @Component is used to define the component and associated metadata such as selector, template. In the above example, the value of the selector property identifies the name of the HTML tag representing this component. The template property is a placeholder for the HTML (or other) markup.

In our previous web page, the template of the top level Application Component might look like below image.

angular 2-component-html-tag-technical--tech-diary

This template consists of a mixture of standard and custom HTML tags which represent respective components. In the above example, we inlined the HTML. If we prefer to store the markup in a separate file (in this case application.html), we would use the property template-URL instead of template code. In this case: the code of the application component might look like this:

Component code

import {Component} from 'angular2/core';
import {Route, RouteConfig, RouterOutlet} from 'angular2/router';
import HomeComponent from '../home/home';
import NavbarComponent from '../navbar/navbar';
import FooterComponent from '../footer/footer';
import SearchComponent from '../search/search';
import ProductDetailComponent from "../product-detail/product-detail";

@Component({
  selector: 'technicaldiary-application',
  templateUrl: 'app/components/application/technicaldiary.html',
  directives: [
    RouterOutlet,
    NavbarComponent,
    FooterComponent,
    SearchComponent,
    HomeComponent
  ]
})
@RouteConfig([
  {path: '/', component: HomeComponent, as: 'Home'},
  {path: '/products/:id', component: ProductDetailComponent, as: 'ProductDetail'}
])
export default class AppComponent {}

The class AppComponent is annotated with @Component and @RouteConfig (for URL-dependent content). The value of the selector property will be used as a user-defined HTML tag <technicaldiary-application>. The templateUrl specifies the location of the markup. The section directives include the RouterOutlet and all child components.

Routing concept

The annotation @RouteConfig configures two routes for the client-side navigation:

  • The content of the route named Home will be rendered by HomeComponent and mapped to the URL fragment /.
  • The content of the route named ProductDetail will be rendered by ProductDetailComponent and mapped to the URL fragment /product: id.

When the user clicks on a particular product title, the content of the default Home route will be replaced with the content of the ProductDetail route. Also, it provides the value of the parameter id and displays the product details in the <router-outlet> area. For example, the ProductDetail route link, that takes product id 1234 as a parameter, can look as follows:

  <a [routerLink]="['/ProductDetail', {'prodId': 1234}]">
      {{ product.id }}
  </a>

Why typeScript?

TypeScript is a superset of JavaScript but like Java and C#, it allows you to define new types. Declaring variables with types rather than the generic ‘var’ opens the door to new tooling support, which you will find to be a great productivity enhancer. TypeScript comes with static code analyzer, and as you enter the code in TypeScript-aware IDE (WebStorm/IntelliJ Idea, Visual Studio Code, Sublime Text, etc). You’re guided by context sensitive help suggesting the available methods in the object or types of the function argument. If you accidentally use an incorrect type, the IDE will highlight the erroneous code. See how WebStorm supports TypeScript here.

Even if your TypeScript application uses third-party libraries written in JavaScript, you can install a type definition file(having the extension .d.ts) containing type declarations for this library. Type declarations for hundreds of popular JavaScript libraries are freely available, and you can easily install them with TypeScript Definition Manager. Imagine that you want to use jQuery(written in JavaScript) from your TypeScript code. The type definition files for jQuery will contain declarations(with types) of all jQuery APIs so your IDE can prompt you with which types to use, or highlight any erroneous code.

Dependency Injection in AngularJs 2 or Angular 4

Components use services for implementing business logic. Services are just classes that Angular instantiates and then injects into components. Let’s define a service,

export class ProductService {
  products: Product[] = [];
  getProducts(): Array<Product> {
    // The code to retrieve product into goes here
    return products;
  }
}

Now if you specify an argument of type ProductService in the HomeComponent constructor, Angular will automatically instantiate and inject that service into the component:

@Component{
 ...
}
export default class HomeComponent {
  products: Product[] = [];

  constructor(productService: ProductService) {
    this.products = productService.getProducts();
  }
}

Angular’s dependency injection module is flexible, and it is easy to use because the objects can be injected only via constructors. Injectors form a hierarchy (each component has an injector), and the injectable object doesn’t have to be an application-level singleton as it might by default in Spring.

Inter-component communications in Angular 2 or Angular 4.

A component can declare input and output properties. Inter-component communication can and should be implemented in a loosely coupled manner. To pass the data from a parent to a child component, the parent binds the values to the input properties of the child. The child has no need to know who provided the values, it just knows “what to do with them?”.

Sometimes component needs to pass the data to the outside world, in this case, it emits the events via the output property. Emits to whom? It’s none of the component’s business. Whoever is interested can create a listener to the custom component’s event.

Yeah, this mechanism allows us to treat components as black boxes, which can get values in or send data outside.

Performance and Rendering of Angular 2 and Angular 4

Rendering performance is improved in Angular 2 and Angular 4. Most importantly, the fact that the rendering module is located in separate module allows you to run the computation-heavy code in a working thread. Visit the Repaint Rate Challenge Web site to compare the rendering performance of various frameworks. Run the test titled “DBMON Angular 2.0 Beta – Web Workers”, a large data grid with constant data refreshes (in a separate thread) is repainted by the browser blazingly fast.

If you ask, what Angular 2 and Angular 4 features set it apart from other frameworks, first on my list would be this separate module for zones and template rendering:

  • Having the component’s UI declared in separate templates processed by an independent renderer opens up new opportunities in areas from optimization and precompilation of templates, to the ability to create templates for rendering on different devices.
  • The module zone.js monitors the changes in the application and makes decisions on when to update the UI of each component. Any async event triggers the revalidation of the UI in each component and it works amazingly fast.
Note: While for the majority of applications you won’t need to know the internals of zone.js, if your work on projects requiring fine tuning UI rendering in a complex application, you would be served well to allocate some time to learn more about the zone inner-workings.

Keeping the rendering engine in a separate module allows third-party vendors to replace the default DOM renderer with one that targets non-browser-based platforms. For example, this allows reusing the application code across devices, with the UI renderers for mobile devices that use native components. The code of the TypeScript class remains the same, but the content of the @Component annotation will contain XML or another language for rendering native components. A custom Angular 2 renderer is already implemented in the  NativeScript framework, which serves as a bridge between JavaScript and native iOS and Android UI components. With NativeScript you can reuse the component’s code by just replacing the HTML in the template with XML. Another custom UI renderer allows using Angular 2 with React Native, which is an alternative way of creating native (not hybrid) UI’s for iOS and Android.

Tooling in AngularJs 2 or Angular 4

While the syntax and architecture of Angular 2 applications are a lot easier to understand than AngularJS 1.X, tooling is a bit more complex. This is not surprising; after all, you are writing code in one language and deploying it in another because everything is compiled to JavaScript.

Angular CLI is a project currently in the works that promise to provide a command line interface that will substantially simplify various processes, from initial project generation to production deployment.

Application debugging can be done either in the IDE or in the browser. We use Chrome Developer Tools for debugging. The generated source maps allow you to debug the TypeScript code while the browser runs JavaScript. If you prefer to debug JavaScript, it’s also possible because the TypeScript transpiler generates JavaScript that can be read by humans.

Testing and Deployment of Angular 2 or Angular 4

Angular 2 comes with a testing library that allows you to write unit tests in the BDD format. Currently, it only supports the Jasmine framework, but additional framework support is on the way. We use Karma test runner, which allows tests to be run against various browsers.

The Protractor framework allows you to write end-to-end tests for your applications. If you monitor the network while loading a simple application in development mode you will see that the browser downloads more than 5Mb (half of that being the TypeScript compiler used by the module loader, SystemJS). But after running deployment and optimization scripts (we use the Webpack bundler), the size of a small app can be as little as 160K (including the Angular 2 framework). We’re looking forward to seeing how Angular CLI will implement production bundling. The Angular team works on offline template compilation, which will lower the framework’s overhead to 50Kb.

Conclusion

I hope you found Angular 2 or Angular 4 is much interesting as you were expected. Angular 2.1.0 released on 12th Oct 2016 at the ng-conference. As new updates will come from ng-conference, we will update on this site (Technical Diary) with new tutorials and examples. If you have questions or feel there is something we should expand, please contribute in comments.

S Sharif

Founder of Technical Diary. Software engineer and passionate about technologies to learn and share. Crazy about best practices and new technology. I have worked in C#,ASP.NET MVC, HTML5, AngularJs SharePoint and SQL Server. I always try to keep myself updated and learn and implement new technologies. You can connect me on Twitter Facebook LinkedIn.

You may also like...

2 Responses

  1. Divyanshu S says:

    Should I choose angular 2 over angular 1?

  2. xxxxx says:

    why angular 2 , We have angular 1.5 ?

Leave a Reply

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