Bootstrapping Angular Application

  1. Then entry point to every Angular application is the main.ts file which contains this last line:
  2. The platformBrowserDynamic() part of this line of code indicates that we are about to boot Angular in a browser environment. As Angular can be used in Javascript host environments asides the browser (e.g. on the server or in a web worker), its thus imperative that we specify the environment in which our App is to be booted.
  3. The bootstrapModule() function helps bootstrap our root module taking in the root module as its argument.
  4. AppModule is our root module which is the entry module for our application, this can actually be any of the modules in our application but by convention AppModule is used as the root module.
  5. In our AppModule, we then need to specify the component that will serve as the entry point component for our application. This happens in our app.module.ts file where we import the entry component (conventionally AppComponent) and supply it as the only item in our bootstrap array inside the NgModule configuration object.

To put it short

  1. platformBrowserDynamic() to determine the Broswer or platform in which your angular app is about to run
  2. bootstrapModule() function to boot your entry module(app.module.ts) by supplying the module as an argument.
  3. app.module.ts is the root module that would specify the entry point component in the module configuration object.

How angular Works Internally

1.What Is an Angular Component?
Components are like the basic building block in an Angular application. Components are defined using the @component decorator. A component has a selector, template, style and other properties, using which it specifies the metadata required to process the component.An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

2.Angularjs vs Angular
Angularjs and Angular should be treated as two different frameworks.Here are few comparisons as below

AngularJS Angular
Controllers WebComponents
AngularJS is written in JavaScript.

Angular uses Microsoft’s TypeScript language, which is a superset of ECMAScript 6 (ES6). This has the combined advantages of the TypeScript features, like type declarations, and the benefits of ES6, like iterators and lambdas.
Javascript Typescript
AngularJS is based on model-view-controller Design.The model is the central component that expresses the application’s behavior and manages its data, logic, and rules. The view generates an output based on the information in the model. The controller accepts input, converts it into commands and sends the commands to the model and the view Angular 2, controllers and $scope were replaced by components and directives. Components are directives with a template. They deal with a view of the application and logic on the page. There are two kinds of directives in Angular 2. These are structural directives that alter the layout of the DOM by removing and replacing its elements, and attributive directives that change the behavior or appearance of a DOM element.
To bind an image/property or an event with AngularJS, you have to remember the right ng directive. Angular focuses on “( )” for event binding and “[ ]” for property binding.

No Mobile Support Angular 2 and 4 both feature mobile support.
2-way binding, AngularJS reduced the development effort and time. However, by creating more processing on the client side, page load was taking considerable time. Angular implements unidirectional tree-based change detection and uses Hierarchical Dependency Injection system. This significantly boosts performance for the framework.

3.What are Directives
Directives are something that introduce new syntax / markup. They are markers on the DOM element which provides some special behavior to DOM elements and tells AngularJS’s HTML compiler to attach.

There are three kinds of directives in an Angular 2 application.
Angular Component also refers to a directive with a template which deals with View of the Application and also contains the business logic. It is very useful to divide your Application into smaller parts. In other words, we can say that Components are directives that are always associated with the template directly.

Structural directives
Structural directives are able to change the behavior of DOM by adding and removing DOM elements. The directive NgFor, NgSwitch, and NgIf is the best example of structural directives.

Attribute directives
Attribute directives are able to change the behavior of DOM. The directive NgStyle is an example of Attribute directives which are used to change styles elements at the same time.

4.Difference between Component and Directive

Directive Component
They are used to create behavior to an existing DOM element. It used to shadow DOM to create encapsulates visual behavior. It is used to create UI widgets.
They help us to create re-usable components It helps us to break up our application in smaller component
We cannot create pipes using Attribute / Structural directive Pipes can be defined by component
We can define many directive per DOM element We can present only one component per DOM element
@directive keyword is used to define metadata @component keyword is used to define metadata

5.Directive Lifecycle
For the Directives there are three hooks provided for different event based on which we can take actions upon
ngOnChanges – It occurs when Angular sets data bound property. Here, we can get current and previous value of changed object. It is raised before the initialization event for directive.

ngOnInit – It occurs after Angular initializes the data-bound input properties.

ngDoCheck – It is raised every time when Angular detects any change.

ngOnDestroy – It is used for cleanup purposes and it is raised just before Angular destroys the directive. It is very much important in memory leak issues by un-subscribing observables and detaching event handlers.

6.What is the Difference between One way Data Binding and Two Way Data Binding
In one-way data binding, the value of the Model is inserted into an HTML (DOM) element and there is no way to update the Model from the View. In two-way binding automatic synchronization of data happens between the Model and the View (whenever the Model changes it will be reflected in the View and vice-versa)

7.What is Interpolation?
Interpolation(one-way data binding) allows you to define properties in a component class, and communicate these properties to and from the template.

8.What is EventBinding?
EventBinding(one-way data binding)

9.What is PropertyBinding?
PropertyBinding(one-way data binding)

10.What is Two-Way Binding?
Two-Way Binding