Introduction to Angular2 to build client-side applications

Angular2 is a fast and reliable framework, based on Typescript. It is used to build client-side applications

Installing Angular

In order to start Angular you have to install NodeJs and npm in local machine. Next to install angular follow below command

npm install -g @angular/cli

To create your project use the following command, which create a project folder in the directory you are currently  

ng new first-angular-app

Your folder structure looks like

e2e
src
  app
    app.component.css
    app.component.html
    app.component.spec.ts
    app.component.ts
    app.module.ts
  assets
  environments
    environment.prod.ts
    environment.ts
  favicon.ico
  index.html
  karma.conf.js
  main.ts
  polyfills.ts
  styles.css
  test.ts
  tsconfig.app.json
  tsconfig.spec.json
  tslint.json
angular.json
package.json
package-lock.json
README.md
tsconfig.json
tslint.json

package.json -This includes all your application dependencies

app.component is your root component which holds all other components. It will be the parent component of all other components.

app.module is the brain of any angular app. It also contains declarations of all newly created components, included modules and declared routes. we can link different component services to app.module from this file.

Creating new components

In any angular application we can create different components which provides different functionalities, Below is the command used to create component

ng generate component <component_name>

Eg: ng generate component signup
ng generate component login

ng generate component creates a folder which contains below files for each component

• HTML Template of the component
• A Stylesheet for the template
• Typescript - This contains the constructor and default method which includes the template and stylesheet. 

ng generate will also include your newly created component in app.module file in the declarations array

To run your application use command, this will run on port 4200 by default localhost:4200

ng serve