Que 1> What are the new features of Angular2 ?
Angular 2 is not a simple upgrade from angular 1. Angular 2 is completely rewritten,
so it has lot of improvements when compared with Angular 1. Let's look at a few of these improvements.
Performance : -
From a performance standpoint, Angular 2 has faster initial loads, change detection, and improved rendering time. not just performance, we also have improved modularity, Dependency injection and test ability.
According to angular conference meetup, Angular 2 is 5 times faster compared to AngularJS 1.
Mobile Support : -
Angular 1 was not built for mobile devices.
It is possible to run Angular 1 on mobile but we will have to use other frameworks.
Angular 2 on the other hand is designed from the ground up with mobile support.
Component Based Development : -
Component based web development is the future of web development.
In Angular 2, "everything is a component". Components are the building blocks of an Angular application.
The advantage of the component-based approach is that, it facilitates greater code reuse.
From unit testing standpoint, the use of components make Angular2 more testable
More language choices :
There are several languages that we can use to develop Angular applications. To name a few, we have
1. ECMAScript 5
2. ECMAScript 6 (also called ES 2015)
3. TypeScript etc.
Besides these 3 languages we can also use Dart, PureScript, Elm, etc, but among all these, TypeScript is the most popular language.
Que 2> What is ECMAScript
The JavaScript language standard is officially called ECMAScript.
Over the past several years many versions of ECMAScript were released starting with ECMAScript version 1 all the way till ECMAScript version 7.
Most of the modern browsers available today support ECMAScript 5.
The browser support for ECMAScript 6 is still incomplete. However, using a process called Transpilation,
ECMAScript 6 can be converted to ECMAScript 5 which is supported by all the modern browsers. ECMAScript 6 is officially known as ECMAScript 2015.
ECMAScript 2015 introduced several new features like classes, modules, arrow functions etc.
Que 3> What is Type Script
TypeScript is a free and open-source programming language developed by Microsoft.
It is a superset of JavaScript and compiles to JavaScript through a process called transpilation.
Using TypeScript to build angular applications provides several benefits.
1. Intellisense
2. Autocompletion
3. Code navigation
4. Advanced refactoring
5. Strong Typing
6. Supports ES 2015 (also called ES 6) features like classes, interfaces and inheritance.
If you have any experience with object oriented programming languages like C# and Java, learning TypeScript is easy.
Because of all these benefits writing, maintaining and refactoring applications can be an enjoyable experience.
So obviously TypeScript has become the number one choice of many developers for developing Angular applications.
Que 4> What is a component in Angular 2 ?
A component in Angular is a class with a template and a decorator.
So in simple terms a component in Angular is composed of these 3 things
Template - Defines the user interface. Contains the HTML, directives and bindings.
Class - Contains the code required for template. Just like a class in any object oriented programming language
like C# or Java, a class in angular can contain methods and properties.
Properties contain the data that we want to display in the view template and
methods contain the logic for the view. We use TypeScript to create the class.
Decorator - We use the Component decorator provided by Angular to add metadata to the class.
A class becomes an Angular component, when it is decorated with the Component decorator.
Que 5> What are the differences between template and templateUrl properties and when to use one over the other ?
Angular2 recommends to extract templates into a separate file, if the view template is longer than 3 lines.
Let's understand why is it better to extract a view template into a seprate file, if it is longer than 3 lines.
With an inline template
We loose Visual Studio editor intellisense, code-completion and formatting features.
TypeScript code is not easier to read and understand when it is mixed with the inline template HTML.
With an external view template
We have Visual Studio editor intellisense, code-completion and formatting features and
Not only the code in "app.component.ts" is clean, it is also easier to read and understand
Que 6> what is nested components ?
As we already know Angular 2 is all about components.
A component in Angular allows us to create a reusable UI widget.
A component can be used by any other component.
nested component is defined as (parent component and child component) relation
Que 7> What is AppModule ?
AppModule is the root module which bootstraps and launches the angular application.
You can name it anything you want, but by convention it is named AppModule.
It imports 2 system modules - BrowserModule and NgModule
BrowserModule - Every application that runs in a browser needs this module.
NgModule - @component decorator adds metadata to an angular component class,
similarly @NgModule decorator adds metadata to the angular module class.
Que 8> What is @NgModule?
@NgModule is a decorator function. A decorator function allows users to mark something as Angular 2 thing
(could be a module or component or something else) and it enables you to provide additional data that determines
how this Angular 2 thing will be processed, instantiated and used at the runtime.
So, whenever user writes @NgModule, it tells the Angular 2 module, what is going to be included and used in and using this module.
Properties of the @NgModule decorator
imports - Imports the BrowserModule required for an angular application to run in a web browser
declarations - Contains the components registered with this module. In our case we have two - AppComponent and EmployeeComponent
bootstrap - Contains the root component that Angular creates and inserts into the index.html host web page.
Que 9 > What is Angular interpolation ?
Interpolation is all about data binding. In Angular data-binding can be broadly classified into 3 categories
An example of interpolation is shown below:
<a ng-href="img/{{username}}.jpg">Hello {{username}}!</a>| Data Binding | Description |
| One way data-binding | From Component to View Template |
| One way data-binding | From View Template to Component |
| Two way data-binding | From Component to View Template & From View template to Component |
One way data-binding - From Component to View Template : To display read-only data on a view template we use one-way data binding technique interpolation.
With interpolation, we place the component property name in the view template, enclosed in double curly braces: {{propertyName}}.
3 comments
comments
ReplyWonderful blog & good post.Its really helpful for me, awaiting for more new post. Keep Blogging!
Hire Angularjs 2 Team in India
Thank you for writing this quality informational content. Your writing technique is impressive and enjoyable to read. If you want about custom packaging boxes.
ReplyAngularJS Institute in Gurgaon
Reply