Angular4 — an intro!
A guideline for creating an Angular app.
I Basic Introduction
What is AngularJS?
It is a leading JavaScript framework for building JS heavy Single-Page Applications(SPAs) like Gmail.
What is SPA?
SPAs are web applications that load as a single HTML page and dynamically update the contents of the page as the user interacts with the application with out refreshing the entire page.
AngularJS version details.
Angular1: Very popular JS framework. Current version is 1.6.6
Angular2: Complete re-write of Angular1
Angular4: Simply an update of Angular2
Angular5: Current version and it’s an up-graded version of Angular4
Advantages of Angular
1. Angular is developed using Typescript which enable us to optimize the code using OOPS concept.
2. Being a Google product, we have a live and active support community provided by Google.
3. Unit Testing Ready - this is one of its most compelling advantages.
Disadvantages of Angular
1. The web developer has to be familiar with TypeScript before he starts development with Angular.
2. Massive ‘node_modules’ size.
3. Confusion - There are multiple ways to do the same thing with Angular.
What is TypeScript?
TypeScript is nothing but a super script of JavaScript. Every single JS code will be a valid TS code. The only difference between these two is that TS provides more OOPS features.
II Before setting up a new Angular app, let me introduce some basic elements.
Angular Command Line Interface(CLI)
Angular CLI is a simple tool to create, manage and build Angular app.
CLI compiles the Typescript code to Javascript code.
CLI needs NodeJs to work.
NodeJS
Server side language for managing the project dependency.
It Provides the development server in the local machine itself(localhost:4200).
We can simply download and install NodeJs using this link.
node package manager(npm)
Simple tool used for communicating with the node.
Webpack
CLI uses webpack for building the JS & CSS files & add it to the index.html file.
III Installation Guidelines for Angluar
Step 1: Set up the Development Environment
Download and Install the latest version of Node.js & npm using this URL.
After installation, you can verify the version using node -v and npm -v commands in cmd.
These are the versions I’ve used. So, if you are following the story from the beginning, try to maintain these versions.
Step 2: Install Angular CLI globally
For installing: npm install -g @angular/cli
For uninstalling: npm uninstall -g @angular/cli
Step 3: Create a new project
Go to the project directory and execute the following command:
ng new ProjectName
Here, ‘ng’ will only be available after the installation of AngularCLI.
Step 4: Build and run the project
Go to the newly added project directory and execute the following command:
ng serve - -open
Make sure that the directory in which you are trying to execute this command have the package.json file.
After the installation and execution of all the commands, the command structure and the default folder structure should be exactly like below.
The continuation of this story can be expected in my next blog…
