Angular 2 Hello World
Welcome back guys.Hope your journey will be fantastic with Angular 2 Learning.
What is Angular 2
Before running Angular2 Hello World application, we should have following installed
- NodeJS v6.2+ with 64 bit
- cmd / Terminal with root/Administrator login
Run your First Angular2 Application
Open your terminal/CMD, and execute following command one after another. Please make sure after installing NodeJS in previous step, you should close and reopen your cmd/terminal other wise “npm” command will not work. Sometimes restarting system will work.
npm install –g @angular/cli ng new my-app cd my–app ng serve —open
Lets discuss more about Hello World Application
The beauty of src folder
- “src” folder contain all application codes (Custom Modules). You should not keep your custom code out side of “src” folder. Anything outside of “src” folder treated as settings/configuration file for application compile/build.
- src/main.ts (Entry point of the Application)
How Application started
- In main.ts we need to bootstrap one AngularJS module. Like “AppModule” is the main module name which will be loaded during application run
- In your code you must declare a module name as “AppModule“.
- src/app/app.module.ts is the “AppModule” in hello world Application
- app.module.ts (AppModule) loads the first component.
How Application first view is getting displayed
- In app.module.ts we have bootstrapped first component as “AppComponent“. So AppModule will load the fist view (Component).
Component is Angular2
- Component dependency (Import the Required things)
- Component decorator (Selector and Template) Ex. @Component is one decorator
- Component Class (Properties and Methods Required for the View)
- Component Class be written as “Export” so that it can accessible in other component
Angular 2 Architecture
- Angular 2 Application is based on N number of Modules (1 Root module and Other nested module)
- Each Module can contain one or more component
- 1 Component can de dependent another component (If that component has export class)
In-case you can learn more about Angular 2 Hello World Application from here