8351. First Angular AppAngular4 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.
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/’.
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’.