Angular 2 Features –
Component Based- It is entirely component based. It is not used to scope and controllers and Angular 2 are fully replaced by components and directives.
Directives- The directive can be declared as @Directive annotation.
A component is a directive with a template and the @Component decorator is actually a @Directive decorator extended with template oriented features.
Dependency Injection- Dependency Injection is a powerful pattern for managing code dependencies. There are more opportunities for component and object based to improve the dependency injection.
Use of TypeScript- Type represents the different types of values which are using in the programming languages and it checks the validity of the supplied values before they are manipulated by your programs.
Generics- TypeScript has generics which can be used in the front-end development.
Lambdas and Arrow functions – In the TypeScript, lambdas/ arrow functions are available. The arrow function is additional feature in typescript and it is also known as a lambda function.
Forms and Validations- Angular 2 forms and validations are an important aspect of front-end development.
Advandates of Angular 2.
1. It is entirely component based.
2. Better change detection
3. Angular2 has better performance.
4. Angular2 has more powerful template system.
5. Angular2 provide simpler APIs, lazy loading and easier to application debugging.
6. Angular2 much more testable
7. Angular2 provides to nested level components.
8. Ahead of Time compilation (AOT) improves rendering speed
9. Angular2 execute run more than two programs at the same time.
10. Angular1 is controllers and $scope based but Angular2 is component based.
11. The Angular2 structural directives syntax is changed like ng-repeat is replaced with *ngFor etc.
12. In Angular2, local variables are defined using prefix (#) hash. You can see the below *ngFor loop Example.
13. TypeScript can be used for developing Angular 2 applications
14. Better syntax and application structure
Angular 2 is a re-written version of Angular1 and not an update.
1. Angular 2 is a mobile-oriented framework
2. Angular 2 is a versatile framework, i.e. we have more choices for languages. We can use ES5, ES6, Typescript or Dart to write an Angular 2 code Whereas an
3. In Angular 2 controllers are replaced by components and Angular 2 is completely component based.
1. Whereas Angular1 was not developed with mobile base in mind.
2. Angular1 code can written by using only ES5, ES6 and Dart. We don’t have many choices of language in Angular1.
3. Whereas Angular1 was based on controllers whose scope is now over.
Install the Angular CLI
npm install -g @angular/cli
Create a new application
Create a new project named angular-tour-of-heroes with this CLI command.
ng new angular-tour-of-heroes
Serve the application
Go to the project directory and launch the application.
ng serve --open
The ng serve command builds the app, starts the development server, watches the source files, and rebuilds the app as you make changes to those files.
The --open flag opens a browser to http://localhost:4200/.
Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.
AppComponent distributed over three files:
app.component.ts— the component class code, written in TypeScript.
app.component.html— the component template, written in HTML.
app.component.css— the component's private CSS styles.
Advantages of AOT -
1. Faster download: - The Angular 2 app is already compiled so it is faster.
2. Faster Rendering: - If the app is not AOT compiled and the compilation process happens in the browser once the application is fully loaded. This has a wait time for all necessary components to be downloaded and then the time taken by the compiler to compile the app. With AOT compilation, this is optimized.
3. Lesser Http Requests: - It is supporting to the lazy loading. Actually, lazy loading is great concepts for sending HTTP request to the server. It is minimise the multiple requests for each associated html and css, there is a separate request goes to the server.
4. Detect error at build time: - In Angular 2, the compilation happens beforehand and most of the errors can be detected at the compile time and this process providing us a better application’s stability.
Disadvantages of AOT -
1. AOT only works only with HTML and CSS and not for other file types. If required other file types that time we will need to follow the previous build step.
2. We need to maintain AOT version of bootstrap file.
3. We need to clean-up step before compiling.
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.
Modules are a great way to organize an application and extend it with capabilities from external libraries.
Every Angular app has at least one module, the root module. You bootstrap that module to launch the application.
Angular libraries are NgModules, such as FormsModule, HttpClientModule, and RouterModule. Many third-party libraries are available as NgModules such as Material Design, Ionic, and AngularFire2.
NgModules consolidate components, directives, and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.
Modules can also add services to the application. Such services might be internally developed, like something you'd develop yourself or come from outside sources, such as the Angular router and HTTP client.
Modules can be loaded eagerly when the application starts or lazy loaded asynchronously by the router.
NgModule metadata does the following:
Declares which components, directives, and pipes belong to the module.
Makes some of those components, directives, and pipes public so that other module's component templates can use them.
Imports other modules with the components, directives, and pipes that components in the current module need.
Provides services that the other application components can use.