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

Posted On 22 August 2018 By MicroPyramid


Need any Help in your Project?Let's Talk

Latest Comments
Related Articles
How to use Forms in Angular4

In this blog we'll see how to use forms of different types reactive and template driven in your angular application.

Continue Reading...
Angular 2 - Getting Started

Angular 2 - Getting Started
Angular 2 is an open source Javascript framework to build web applications or single page applications in HTML and Javascript. ...

Continue Reading...
Implementing Angular Permissions using Route AuthGuards

Implementing Angular's AuthGuards to protect access to the client side routes

Continue Reading...
open source packages

Subscribe To our news letter

Subscribe and Stay Updated about our Webinars, news and articles on Django, Python, Machine Learning, Amazon Web Services, DevOps, Salesforce, ReactJS, AngularJS, React Native.
* We don't provide your email contact details to any third parties