8351. First Angular App
Angular4 and Angular CLI

Build web application with Angular4.

1. Angular and Angular CLI

Angular is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc. The code is written in TypeScript, which compiles to JavaScript and displays the same in the browser.

Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. Angular CLI makes it easy to start with any Angular project. Angular CLI comes with commands that help us create and start on our project very fast.

2. Installing Angular CLI

Install the Angular CLI globally.

$ npm install -g @angular/cli

Check CLI version.

$ ng --version

Update Angular CLI.

$ npm update -g @angular/cli

3. Creating New Project

Generate a new project and skeleton application named ‘helloworld’ by running the following commands:

$ ng new helloworld

Open this project in Visual Studio Code. image

4. Serving the Application

Start the app, server it in web server.

$ cd helloworld
$ ng serve

By default, angular app is served at port 4200. Open web browser access ‘http://localhost:4200/’. image

You can make it serve at different port. Open .angular-cli.json, add ‘serve’ underneath ‘defaults’ as follows. Set the port to ‘12080’.

"defaults": {
  "serve": {
    "port": 12080,
    "host": "localhost"
  },
  "styleExt": "css",
  "component": {}
}

Run ‘ng serve’ again. Now, this application is served at port ‘12080’. image

5. References