Getting started with Angular

1. Angular

2. Introduction
Angular is open-source and front-end based web development platform, which
performs best when used for building dynamic, SPA (Single Page Application),
developed and maintained by GOOGLE.

3. First pointTraditional Web Application vs.
SPA
Traditional Web Application runs from the server’s end. We have a User of the system, who
requests Client (let us say our browser), which in turn requests Server. The server simply holds our
business logic, data and renders our website.
When the user clicks on our link, Client will send a request to the server. The server will handle this
request and will send back a response which contains HTML code which browser will render and
final response is shown to the user.
The problem with this approach is that we spend a lot of time sending the request to the server and
getting the response.

4. SPA
In SPA, the user still clicks on the link and requests the client but, the request is handled by the client
on its own and, renders the HTML page through JavaScript. So, naturally, it raises one more question
that, now where is the role of the server?
Server will play its role when the user needs some data that must be processed by the server (say,
for example, database operations) or some business logic that must be stored at server side, and of
course, at the time of initial loading. In only these cases, we will send the request and wait for the
response. In short, much of data will not traverse through the internet, which will make application to
run faster.

5. Angular Version History
Angular is in the market for almost 8 years. The version which you are using
currently is not the first version launched. Then which one was the first one?
Let’s quickly move to the Version History for Angular.
Initially, the Angular team came up with one single name “Angular2” for two
different approaches. But this bottleneck had put developers in dilemma. So
team bifurcated this name into two. “AngularJS” refers to the version 1.x and
“Angular” refers to the version 2 and above.

6. AngularJS
Firstly, it was released in October 2010 on GitHub. Version 1.0 was launched in June 2012. It is referred to as
“AngularJS” or “Angular 1.x”. It is based on javascript. It uses the client-side Model-View-Controller(MVC) and
Model-View-ViewModel(MVVM) to make development and testing much easier.
Angular 2.x.x
Angular 2 is the complete rewrite of Angular 1.x. It was announced in September 2014. Angular2 is Typescript
based framework. Typescript is a superset of JavaScript, Microsoft planted seeds and Angular team adopted it
for development purpose. It is based on service and component concept.
Angular 4.x.x
After skipping the version 3, yes, to avoid confusion with the Angular’s router version (3.0.0), the team came up
with one higher version in March 2017. Angular 4 is compatible with Angular 2 because the team did not want to
break the whole ecosystem. Angular 4.3 was the minor release, which means it does not contain any drastic
changes.
Angular 5.x.x
Angular 5 was released in November 2017 to support Progressive Web Apps and material design.
Angular Version History

7. Angular 6.x.x
Angular 6 was the major release in May 2018. It focused less on the framework but more on making it easier to
move ahead with Angular in future.
Major difference in Angular 1.x (AngularJS) and Angular (version 2+)?
- The major difference between these two frameworks is that AngularJS is a popular JavaScript Framework and
Angular is TypeScript Framework.
- Whereas, AngularJS was not mobile-oriented, but Angular was developed keeping mobile phase in mind.
- Angular has more language choice than AngularJS.
- With AngularJS does not support SPAs whereas, Angular does incorporate this phenomenon.
- The controller concept of AngularJS was replaced by component in Angular v2.
Angular Version History

8. Advantages of Angular
Component Based
The whole architecture of Angular is component based, which allows reusability and modularity.
Cross Platform
Ionic, React native and Nativescript are such examples of mobile application support given by Angular.
TypeScript writes JavaScript
TypeScript plays a vital role in the place where you don’t know javascript. Here you write a simple program in typescript and it
automatically gets converted to JavaScript i.e. (.ts) file is converted to (.js).
Services
They are sets of code which can be shared by different Components of an Angular 2 application. So if we have data component
which gets data from a database this can be shared so that it could be used by other components when required. Which brings
consistency.
Productivity
With greater consistency, you get the added benefit of productivity. When you learn how to write one component you can write code
in all other components with the same guidelines keeping in mind.
Debugging Easy
Typescript code can be debugged easily in the browser as long as proper file binding is done at the compile time. But still, we are not
satisfied with this. Right!? Let us take a tour to its real-life feasibility.

9. Who are using Angular?
Google, Paypal, Tata Consultancy Service careers are some of the well-known
companies who have used AngularJS as a development platform, CVS shop,
Onefootball, Microsoft customers, Citibank Customer Service have used
Angular as their development platform.

10. Getting Started with Angular?
1 IDE : You can use any editor of your choice Like Sublime Text, Visual Studio Code etc. But I prefer using Visual Studio Code
developing the app because it is free, it has various extension availability, moreover, typescript snippets are there which will add
frequently used code snippets. Once the choice regarding IDE is done.
2. Next step is Node and NPM. If Node.js is not there on your machine, Install Node.js Version >= 5.0. You can get Node from
following site https://nodejs.org/en/
NPM comes along with Node, so installing node will install Node and NPM at once. After performing this step just check the version
of Node and Npm to ensure proper installation by firing following command :
node –v
npm –v
If your command prompt answers the versions for npm and node. Then you are good to go to the next step which is to Install
angular CLI(Command Line Interface)
Angular-cli command line utility responsible for quick project generation and setting up required components and much more. Type
following command at your command prompt to install angular CLI.
npm install –g @angular/cli (-g stands for Global).
Once you are done with this step, angular-cli is installed at your machine. Now you can create a new project for angular by firing:
ng new (yourAppName)
After this, go to the working directory and issue the following commands one by one run your application.
cd (yourAppNameFolder)
ng serve –o

11. Understanding
Angular App Folder
Structure
e2e. stands for end to end testing. It is
the way to ensure correct working of
components together to provide
desired functionality.
node_modules is the place where our
all third party library resides, which can
be used for development purpose.

12. Understanding
Angular App Folder
Structure
Src folder contains the actual source
code for development. As you can see
in the picture, src folder has 3
subfolders: App, Assets, Environment.
App folder is the prominent part of
Angular. It has all the components and
modules of the application.
Assets folder is the place where we
can store our images and icons.

13. Understanding
Angular App Folder
Structure
Environment folder has two files:
environment.prod.ts stores configuration
for production environment and
environment.ts stores configuration for
development environment.
favicon.ico. is the icon file which is
displayed on the browser when you run
the application.
index.html is the first html file that is
loaded when your application is run on
browser.
Main.ts is doorway for our application. It
is the typescript file. Here we can
bootstrap(load) our main module using
methods.

14. Understanding
Angular App Folder
Structure
Pollyfills.ts is the scripts which
eliminates the need to set up
everything. In the other words, it
makes our application compatible with
different browsers. It bridges the gap
between our Angular app and browser.
style.css is the file where global styles
for our application resides.
test.ts is used for testing purpose.
tsconfig.app.json has the root files
and the compiler options.
angular-cli-json is standard
configuration file.

15. Understanding
Angular App Folder
Structure
.editorconfig is used to define standard and
consistence coding patterns for team
development purpose.
.gitignore is used when exporting your files and
folders to github.
karma.conf.js is the file which is used for unit
test.
package.json is the file which holds metadata
for projects such as project name, version and
handle dependencies of the project.
tsonfig.json file has setting to convert your
typescript code into javascript code to make the
browser understand our code.
tslint.json file checks your code for errors. It
can be customised according to your own rules.

16. Thanks