Introduction
Create a simple Angular application in 10 minutes.
Angular
Before we start, let’s understand the common terminologies used in a typical Angular application (https://angular.io/).
Disclaimer:
The Angular version that is referenced in this article is Angular 7.
This was originally written by me in DZone.
Pre-Requisites:
| S.No | Name | Remarks |
| 1 | Node.js | Compilation/transformation is done by Node.js and npm during the development phase. Hence, Node.js and npm are pre-requisites for the development environment |
| 2 | NPM | Compilation/transformation is done by Node.js and npm during the development phase. Hence, Node.js and npm are pre-requisite for the development environment |
| 3 | Typescript | Coding in Angularis based on TypeScript. Hence, knowing TypeScript is mandatory. |
| 4 | ECMA Script | Ecma script is a scripting language specification that is standardized by ECMA international. |
| 5 | Karma.js | Karma is essentially a tool that spawns a web server that executes source code against test code for each of the browsers connected. It is ideal for writing and running unit tests while developing the application. |
| 6 | Jasmine | Simple JavaScript testing framework for browsers and node.js. |
| 7 | Protractor | Protractor is an end-to-end test framework for Angular. |
| 8 | package.json | Mainly describes the dependent node modules that is required for the application. |
| 9 | Webpack | Webpack is a tool for bundling application source code. Webpack takes modules with dependencies and generates static assets representing those modules. |
| 10 | angular.json | Configuration file for Angular CLI. Specifies the dependent scripts, style sheet location and many other options. |
Command Line Interface Commands
npm -v
node -v
ng -v
ng new <<app-name>>
ng build --configuration --prod
ng serve --configuration --prodAfter ng serve, open your browser and type http://localhost:4200. That’s it. You have created a simple single page application.
This is the creenshot captured after the creation of the new project using Angular CLI with a split window.
Common Terminologies Used in Angular App
- Component ====> ng g c <<name of the component>>.
- Module ====> ng g m <<name of the module>>.
- Service ====> ng g s <<name of the service>>.
- Routing ====> Routing components within the app.
This is all that is needed to kick start a simple Angular app in 10 minutes.
Let’s learn about individual terminologies deeper in upcoming articles.