Angular 2 Hello World

Welcome back guys.Hope your journey will be fantastic with Angular 2 Learning.

Angular is no more as AngularJS. Initially it was targeting JavaScript as its Language, but now it can handle different languages like TypeScript, Dart and JavaScript.

What is Angular 2
Angular2 is a framework to develop client application (HTML/CSS). We can not call Angular 2 as a JavaScript Framework, but it is a framework. It can handle multiple languages.

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 myapp 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

angular2-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)

So hopefully we have covered a very basic level of Angular 2 Application. To end out Hello World discussion, we can talk a bit about TypeScript. TypeScript is a programming language based on JavaScript. Sometimes it can be treated as JavaScript preprocessor or compiler. TypeScript is a programming language from Microsoft.

In-case you can learn more about Angular 2 Hello World Application from here

https://angular.io/docs/ts/latest/cli-quickstart.html

Happy Coding :)