Angular 1 was based on MVC framework which has a View/Template which can have one or more controller, which expose modal.
In Angular 2, you have a component which has associated template and as with angular 1 you have model which represent data. Component and template has 1-1 relation. Any angular 2 application has root application component that is loaded first and then the angular router load the appropriate component by looking at the url. The component template is then displayed in the browser and the component may then load some data from the server and give it to the template to display. Component can be composed of other components which is the typical case in any complex page. This can be considered as a tree like structure, when you load to a new page your root app component remains same and below that, router loads the corresponding component and its sub component, by looking at the new route. As your application gets bigger, this can become a lot of stuff to load into memory. This is where angular module (ngModule) comes in picture, which are the container that groups all these routes and component trees. Modules can be loaded independent of each other. Browser will load only the module which is being accessed.
Angular Module (ngModule) file has following main pieces.
The imports array
The module's imports array appears exclusively in the @NgModule metadata object. It tells Angular about specific other Angular modules — all of them classes decorated with @NgModule — that the application needs to function properly.
The JavaScript import statements give you access to symbols exported by other files so you can reference them within this file.
The declarations array
This tells which component belongs in this module
Bootstrap array
The bootstrapping process creates the component listed in the bootstrap array and insert each one on the browser DOM.
Refer this for good high level overview of angular2.
Refer this for quick start project. Also you can use angular cli tool to get started with the angular project.
In Angular 2, you have a component which has associated template and as with angular 1 you have model which represent data. Component and template has 1-1 relation. Any angular 2 application has root application component that is loaded first and then the angular router load the appropriate component by looking at the url. The component template is then displayed in the browser and the component may then load some data from the server and give it to the template to display. Component can be composed of other components which is the typical case in any complex page. This can be considered as a tree like structure, when you load to a new page your root app component remains same and below that, router loads the corresponding component and its sub component, by looking at the new route. As your application gets bigger, this can become a lot of stuff to load into memory. This is where angular module (ngModule) comes in picture, which are the container that groups all these routes and component trees. Modules can be loaded independent of each other. Browser will load only the module which is being accessed.
Angular Module (ngModule) file has following main pieces.
The imports array
The module's imports array appears exclusively in the @NgModule metadata object. It tells Angular about specific other Angular modules — all of them classes decorated with @NgModule — that the application needs to function properly.
The JavaScript import statements give you access to symbols exported by other files so you can reference them within this file.
The declarations array
This tells which component belongs in this module
Bootstrap array
The bootstrapping process creates the component listed in the bootstrap array and insert each one on the browser DOM.
Refer this for good high level overview of angular2.
Refer this for quick start project. Also you can use angular cli tool to get started with the angular project.
No comments:
Post a Comment