Angular - SPA in 10 Minutes
Create a beginning Angular application in 10 minutes.
Join the DZone community and get the full member experience.
Join For FreeAngular
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.
Pre-Requisites:
S.No |
Name |
Remarks |
1 |
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 |
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 |
Coding in Angular is based on TypeScript. Hence, knowing TypeScript is mandatory. |
|
4 |
Ecma script is a scripting language specification that is standardized by ECMA international. |
|
5 |
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 |
Simple JavaScript testing framework for browsers and node.js. |
|
7 |
Protractor is an end-to-end test framework for Angular. |
|
8 |
Mainly describes the dependent node modules that is required for the application. |
|
9 |
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.
Opinions expressed by DZone contributors are their own.
Comments