1. Angular 4 vs. Angular 2
There is no path breaking difference between angular 2 and angular 4. Angular 4 is simply the next version of Angular 2. The underlying concepts are same. If you know Angular 2, you can easily switch to Angular 4.
Angular 4 is
backward compatible with Angular 2 for most Applications.
There are some under the hood changes to reduce the
size of the AOT(Ahead-of-Time) compiler generated code. Migrating to Angular 4 may reduce production bundle.
Angular 4 is
faster than Angular 2. The apps developed in Angular 4 are five times faster and smaller as compared to Angular 2.
TypeScript 2.1 and 2.2 compatiblity. Before Angular 4, only TypeScript 1.8 was supported. So with Angular 4, we have all new features of Typescript available.
Unlike Angular 2, the
animations have been pulled out of @angular/core and are moved into their package in the Angular 4. If you don't use animations, this extra code will not end up in the production bundle.
We can now use new if/else style syntax with
*ngif structural directive. In Angular 2, it was not possible to use "else" statement with nglf, but now it has been made possible in Angular 4.
Angular 4 has introduced a new
titlecase pipe. It changes the first letter of each word into uppercase
"
As" keyword is the new addition to the template syntax to simplify the "let" syntax
Integration of
Angular Universal - The integration of Angular Universal permits developers to run Angular on a server.
The
template tag is now deprecated: you should use the "ng-template" tag instead as Angular has its own template tag: ng-template now.
2. Why Angular 4? What’s New in Angular 4?
Router ParamMap
Starting from version 4, it is possible to use
paramMap to get the route- and query-parameter from a related route. The use of
Map brings advantages in terms of type security.
The old had an unsecure type (type params = {[key: string]: any}) and the value could have all possible types.
The new way provides either a string, or an array of strings related to the used method (paramMap.get(): string and paramMap.getAll(): string[])
Animations
Earlier all the functions of animations were the part of @angular/core module, which means the code were always included in the bundle even if animations were not used.
In Angular 4, Animations are to be provided in the module BrowserAnimationsModule from @angular/platform-browser/animations. This avoids creating bundles with unnecessary large sizes.
ngif
We can now use new if/else style syntax with *ngif structural directive.
NgComponentOutlet
To build and produce components dynamically at runtime involved relatively much programming work. With the introduction of *ngComponentOutlet-Directive in Angular 4, it is possible to build dynamic components in a declarative way.
TypeScript 2.1/2.2
We have the support of most latest TypeScript versions in Angular 4 which helps in improving the speed of ngc-Compiler.
Angular Universal
With Angular Universal, it is possible to render Angular applications on the web server. With that, websites can be optimized better for search engines as JavaScript is no longer necessary for initially rendering the page content.
3. What is the use of Interceptors?
Interceptors are used to intercept and/or mutate outgoing requests or incoming responses. It can be really useful for features like caching and logging.
Interceptors can be used on multiple scenarios, i.e. setting the Origin for each outgoing request, adding authentication token to every request etc.
4. What is Angular?
Angular is a framework for building client applications in HTML, CSS and Javascript(or language like Typescript which compiles into Javascript).
5. Why do we need Angular?
We can develop application using Javascript and Jquery. But as the application become complex, code in Javascript and Jquery become difficult to maintain. We then require to structure the application code properly by incorporating object oriented features. That is why a framework like Angular has been evolved to make web application development and maintenance faster and easier. The application in Javascript is hard to test. Applications build in Angular are easily testable.
- Angular gives our application a clean object oriented structure that is easy to understand and easy to maintain.
- Angular come with a lot of utility code that can be reused in various applications.
- Applications build in Angular are easily testable.
6. What is Node js?
It is basically a runtime environment for executing Javascript code outside the browser.
7. Angular CLI
Angular CLI stands for Command-line Interface.
7. What is TypeScript?
TypeScript is a superset of Javascript. So any valid Javascript code is also a TypeScript code. TypeScript has many additional features that Javascript doesn't offer:
- Strong Type - You can specify variable type at the time of declaring a variable which makes code easier to maintain and catching errors become easier. Although this feature is optional.
- Object Oriented features - TypeScript brings many object oriented features which have been missing in Javascript like classes, interfaces, constructor, access modifier, properties etc.
- In TypeScript, We can catch error at compile time instead of runtime
- With TypeScript, We also get intellisense in the code editor.
Browser don't understand TypeScript code, TypeScript compiles into JavaScript at the time when we build the application.
8. Architecture of Angular Apps
Angular applications are designed by composing HTML templates with Angularized markup, writing component classes to manage those templates, adding application logic in services, and boxing components and services in modules.
9. Building blocks of Angular Apps
Components - Angular embraces component based architecture which allows us to work with smaller and maintainable piece of code that can be reused at several places. Each Angular App has one or more components. A component controls a patch of screen called a view. It encapsulates Data, HTML template and Logic for a view (area of the screen that the users see).
Every application has a root component that we call as App component.
Modules - It is container for group of related components, i.e. in an employee module, we can have components for displaying employees details. Every Angular app has at least one NgModule class, the root module, conventionally named AppModule.
Templates - You define a component's view with its companion template. A template is a form of HTML that tells Angular how to render the component.
Metadata - Metadata tells Angular how to process a class.
Example
In fact, CourseListComponent really is just a class. It's not a component until you tell Angular about it.
To tell Angular that CourseListComponent is a component, attach metadata to the class.
In TypeScript, you attach metadata by using a decorator. Here's some metadata for CourseListComponent:
@Component({
selector: 'app-course-list',
templateUrl: './course-list.component.html',
providers: [ courseService ]
})
export class CourseListComponent implements OnInit {
/* . . . */
}
- A directive is a class with a @Directive decorator. A component is a directive-with-a-template; a @Component decorator is actually a @Directive decorator extended with template-oriented features.
Directives either alter the layout structure (for example, ngSwitch) or modify aspects of DOM elements and components (for example, ngStyle and ngClass).
Of course, you can also write your own directives. Components such as HeroListComponent are one kind of custom directive.
Services - A service is typically a class with a narrow, well-defined purpose. Components are big consumers of services. Component classes should be lean. They don't fetch data from the server, validate user input, or log directly to the console. They delegate such tasks to services. A component's job is to enable the user experience and nothing more. It mediates between the view (rendered by the template) and the application logic.
Angular factor your application logic into services and make those services available to components through dependency injection.
Dependency injection is a way to supply a new instance of a class with the fully-formed dependencies it requires. Most dependencies are services. Angular uses dependency injection to provide new components with the services they need.
10. Steps to follow in order to use component.
- Create a Component
- Register it in a module
- Add an element in an HTML markup
