The short introduction to Angular 5

What is Angular?

Angularjs is javascript framework which allow your to create reactive single page application(SPAs)

and what reactive single page application mean? let compare with traditional web application we put 80% of code to server , server handle every thing

when we click to other page got blank white screen for waiting for reload all page

because in old days user device doesn’t have much more performance . In today thank for law of Moore .We can pull work on server to user device

that single application will born

Javascript Framework rise to conquer the frontend web , because user device is much more high performance , think about smartphone in some brand have ram more than notebook

if you need to see single page application by Angular example

https://medium.com/media/44e7e0d58f8ce6a96eff16d71eeb3ddf/href

this image is one of example we can goto other page or tab without reload page that’s look like native app and give the user a very reactive user experience

when we view page source

doesn’t see complicate . Why? because Angular handle all everything

see this in action click here

for more example by Angular project check out this

The evolution of Angular

now Angular is version 5 in thist past when upgrade to major version Angular alway breaking changes

Angular 2 completely rewrite that different from Angular 1

Angular 3 has skip

Angular 4 most breaking change from Angular 2

fortunately Angular 5 doesn’t breaking change

Install Angular 5 from Angular CLI

If you never nodejs don’t mind just install from this Before next step . Angular CLI is command line tools build for generate Angular project structure

let’s start goto Angular CLI

open terminal and copy and run this command

npm i -g @angular/cli

and generate new app with ng new myapp

then open folder cd myapp and ng serve

and wait for webpack successfully build asset

then goto localhost:4200

it’s work

however you can use Angular standalone with script tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

Discover project structure

open project folder with terminal shortcut code .

VScode window instant open currently folder

let’s explore e2e folder first

this folder contain test file

and node_module contain dependency library file

next this place we gonna work

src folder contain anything else we needs go here. Any files outside of this folder are meant to support building app.

app folder contain component file

• app/app.component.ts — this is where we define our root component
• app/app.module.ts — the entry Angular Module to be bootstrapped
• _app/app.component.spec.ts — _this test file for this component
• app/component.html — contain html that use for template in this component
• app/component.css — contain css for use in this component

environments folder contain configuration file separate by environment

• environment.prod.ts — contain environment variable for use in production
• environment.ts — contain environment variable for use in development

for more information check this

Hello Angular

let’s open app folder edit file app.component.htmlfor start Hello Angular 5

save and refresh

that’s change.

conclusion

this post I’ve intro to why javascript framework is born and install Angular CLI and final with Hello Angular

Sponsor

Devslopes All Access Membership 300+ hours of content. As low as $20 per month check out here