What are the advantages of using Angular 2 over Angular 1?

1. Angular 2 is a platform not only a language:
2. Better Speed and Performance: No $Scope in Angular 2, AOT
3. Simpler Dependency Injection
4. Modular, cross platform
5. Benefits of ES6 and Typescript.
6. Flexible Routing with Lazy Loading Features
7. Easier to Learn

How routing works in Angular 2.

Routing is a mechanism which enables user to navigate between views/components. Angular 2 simplifies the routing and provide flexibility to configure and define at module level (Lazy loading).

The angular application has single instance of the Router service and whenever URL changes, corresponding Route is matched from the routing configuration array. On successful match, it applies redirects and the router builds a tree of ActivatedRoute objects and contains the current state of the router. Before redirection, the router will check whether new state is permitted by running guards . Route Guards is simply an interface method that router runs to check the route authorization. After guard runs, it will resolve the route data and activate the router state by instantiation the required components into <router-outlet> </router-outlet>.

What is Angular 2?

AngularJS is a framework to build large scale and high performance web application while keeping them as easy-to-maintain. Following are the features of AngularJS framework.

• Components − The earlier version of Angular had a focus of Controllers but now has changed the focus to having components over controllers. Components help to build the applications into many modules. This helps in better maintaining the application over a period of time.
• TypeScript − The newer version of Angular is based on TypeScript. This is a superset of JavaScript and is maintained by Microsoft.
• Services − Services are a set of code that can be shared by different components of an application. So for example if you had a data component that picked data from a database, you could have it as a shared service that could be used across multiple applications.

What are the key components of Angular 2?

Angular 2 has the following components −

• Modules − This is used to break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.
• Component − This can be used to bring the modules together.
• Templates − This is used to define the views of an Angular JS application.
• Metadata − This can be used to add more data to an Angular JS class.
• Service − This is used to create components which can be shared across the entire application.

Explain Modules in Angular 2.

Modules are used in Angular JS to put logical boundaries in your application. Hence, instead of coding everything into one application, you can instead build everything into separate modules to separate the functionality of your application. A module is made up of the following parts −

• Bootstrap array − This is used to tell Angular JS which components need to be loaded so that its functionality can be accessed in the application. Once you include the component in the bootstrap array, you need to declare them so that they can be used across other components in the Angular JS application.
• Export array − This is used to export components, directives, and pipes which can then be used in other modules.
• Import array − Just like the export array, the import array can be used to import the functionality from other Angular JS modules.

Explain Components in Angular 2.

Each application consists of Components. Each component is a logical boundary of functionality for the application. You need to have layered services, which are used to share the functionality across components.Following is the anatomy of a Component. A component consists of −

• Class − This is like a C or Java class which consists of properties and methods.
• Metadata − This is used to decorate the class and extend the functionality of the class.
• Template − This is used to define the HTML view which is displayed in the application.

What are Angular 2 directives? Explain with examples.

A directive is a custom HTML element that is used to extend the power of HTML. Angular 2 has the following directives that get called as part of the BrowserModule module.

• ngIf −
  The ngif element is used to add elements to the HTML code if it evaluates to true, else it will not add the elements to the HTML code.
  

  Syntax

  *ngIf = 'expression' 
  

  If the expression evaluates to true then the corresponding gets added, else the elements are not added.
  
• ngFor −
  The ngFor element is used to elements based on the condition of the For loop.
  

  Syntax

  *ngFor = 'let variable of variablelist' 
  

  The variable is a temporary variable to display the values in the variablelist.

What is CLI?

Command Line Interface (CLI) can be used to create our Angular JS application. It also helps in creating a unit and end-to-end tests for the application.

Explain package.json file.

This file contains information about Angular 2 project. Following are the typical settings in the file.

{ 
   "name": "angular-quickstart", 
   "version": "1.0.0", 
   "description": "QuickStart package.json from the documentation, 
      supplemented with testing support", 
   
   "scripts": { 
      "build": "tsc -p src/", 
      "build:watch": "tsc -p src/ -w", 
      "build:e2e": "tsc -p e2e/", 
      "serve": "lite-server -c=bs-config.json", 
      "serve:e2e": "lite-server -c=bs-config.e2e.json", 
      "prestart": "npm run build", 
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"", 
      "pree2e": "npm run build:e2e", 
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --killothers --success first", 
      "preprotractor": "webdriver-manager update", 
      "protractor": "protractor protractor.config.js", 
      "pretest": "npm run build", 
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"", 
      "pretest:once": "npm run build", 
      "test:once": "karma start karma.conf.js --single-run", 
      "lint": "tslint ./src/**/*.ts -t verbose" 
   }, 
  
   "keywords": [], 
   "author": "", 
   "license": "MIT", 
   "dependencies": { 
      "@angular/common": "<2.4.0", 
      "@angular/compiler": "<2.4.0", 
      "@angular/core": "<2.4.0",
      "@angular/forms": "<2.4.0", 
      "@angular/http": "<2.4.0", 
      "@angular/platform-browser": "<2.4.0", 
      "@angular/platform-browser-dynamic": "<2.4.0", 
      "@angular/router": "<3.4.0",  
      "angular-in-memory-web-api": <0.2.4", 
      "systemjs": "0.19.40", 
      "core-js": "^2.4.1", 
      "rxjs": "5.0.1", 
      "zone.js": "^0.7.4" 
   }, 
  
   "devDependencies": { 
      "concurrently": "^3.2.0", 
      "lite-server": "^2.2.2", 
      "typescript": "<2.0.10",  
      "canonical-path": "0.0.2", 
      "tslint": "^3.15.1", 
      "lodash": "^4.16.4", 
      "jasmine-core": "<2.4.1", 
      "karma": "^1.3.0", 
      "karma-chrome-launcher": "^2.0.0", 
      "karma-cli": "^1.0.1", 
      "karma-jasmine": "^1.0.2", 
      "karma-jasmine-html-reporter": "^0.2.2", 
      "protractor": <4.0.14", 
      "rimraf": "^2.5.4",  
      "@types/node": "^6.0.46", 
      "@types/jasmine": "2.5.36" 
   }, 
   "repository": {} 
}

Some key points to note about the above code −

• There are two types of dependencies, first is the dependencies and then there are dev dependencies. The dev ones are required during the development process and the others are needed to run the application.
• The "build:watch": "tsc -p src/ -w" command is used to compile the typescript in the background by looking for changes in the typescript files.