What is Angular? Angular is a JavaScript Framework that helps you to build reactive Single Page Applications. In other words, a single page application gives the appearance of visiting and navigating an online web application that is served over the web. The URL in the browser window will change as you visit various links in the single page application, but all of this happens in the browser itself. what you are really interacting with is just one single HTML file along with some JavaScript code that was loaded from the server during the initial page load. This gives the user a very nice experience because JavaScript can render changes on the page faster than a web browser can fulfill an HTTP Request to a web server for every page change. The result is a look and feel that can closely resemble mobile applications in their speed and simplicity.
The Many Versions Of Angular
Angular of course started as version 1 and was revolutionary when it was introduced. It’s approach has led to the creation of other popular JavaScript frameworks for this type of development such as React and Vue. To be fair since version one, Angular versioning has been a bit confusing. You have Angular 1, 2, 6, and 7 as of this writing. After Angular 1 set the front end world ablaze with it’s popularity, Angular 2 was next and brought an entire re-write of the code base. Angular 2 came out in 2016, and in addition to the new code base, was an entirely new way of writing Angular code. Unfortunately, Angular 1 is not compatible with Angular 2. So how did we get to 6 and 7? Well, in reality if you’re on Angular version 2 or higher simply referring to it as “Angular” or “AngularJS” will suffice. The nice thing is that now that we have made it over the rewrite hump of Angular 2, it seems that each iteration now is simply incremental improvements and bug fixes. Your sanity will remain in tact.
The Angular Command Line Interface
Getting started with AngularJs is made a little easier by making use of the Angular CLI or Command Line Interface. Let’s take it for a test run now.
First, we can install the Angular CLI with the following command: npm install -g @angular/cli Make sure you already have NodeJs and NPM installed on your machine. Installation will show something similar to this output at the terminal.
angularjs $npm install -g @angular/cli + @angular/cli@7.0.4 added 268 packages from 205 contributors in 64.825s angularjs $
Now that the Angular CLI tool is installed, you can use it to scaffold an application with the ng new command. You’ll need to provide a name for the application as well. Here we create a new application called hello-angular. Note that the angular cli asks us a couple of questions. Would you like to add Angular routing, and which stylesheet format would you like to use. For our purposes, we’ll go with no routing for now and standard CSS for our stylesheets.
If this step seems to hang on you taking a long time, go ahead and try again making sure you run your command line tool as administrator. Be aware this step can take several minutes. Finally, you should have a folder like so. Once it finishes, we can change into that directory and have a look at what was created for us.
Neat! It looks like we have a README.md, package.json, tslint.json, angular,json, tsconfig.json, package-lock.json along with the e2e, src, and node_modules directories. Now, let’s run the command of ng serve.
We can see that the live development server has booted up and is running on localhost port 4200. We can visit that URL and find that we have the beginnings of a working AngularJS application!
We can open up our new Angular application in a nice editor like Visual Studio Code, and here is what we are starting with.
Hot Reloading Is On By Default
A nice feature of having the Angular CLI set everything up for us is that hot reloading is automatically on by default. If we open up the app.component.html file contained in the src/app folder, we can make a change to the file like we see highlighted here.
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Check out this new {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener noreferrer" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener noreferrer" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener noreferrer" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>If we have a look at our command line, notice that the tool automatically re compiles everything.
Visiting the site on our localhost shows the updated content right away. Very slick!
Now you might be wondering how the output is showing “Check out this new hello-angular!” when the code we just edited is written as “Check out this new {{ title }}!” Well, what is happening here is that inside of the double {{ }} curly braces we have dynamic data. This is part of the purpose of Angular, as we want to be able to have dynamic data in our application. To see where this is coming from we can open the app.component.ts typescript file which is in itself part of an angular component and have a look.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'hello-angular';
}Ah ha. It looks like that title is a variable and it is set to a string of ‘hello-angular’. How about we change that string?
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Super Mario';
}Automatically our application re compiles and browser is updated right away.
Inspecting The <app-root/>
With single page applications, if you look at the source of the page it will look pretty empty. There are just a handful of html tags, and some included JavaScript. Like we discussed, this is because everything is rendered using JavaScript in an SPA. But how does the application “attach” itself to the browser. It does so by using he root element, which in our case is the <app-root/> tag. This is the source of our page so far. Note that our application attaches to the page at that highlighted app root tag.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HelloAngular</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>If we look at the index.html file in our project root, we can see where this is defined.
Introducing [(ngModel)]
Now we get to take a look at one of the ways to bind data in Angular. To do this, first we will open up the app.modules.ts file and add the highlighted lines below.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Now, we can update the app.component.html file to make use of [(ngModel)].
<input type="text" [(ngModel)]="game">
<p>{{ game }}</p>Lastly, we need to update the variable name in our app.component.ts file like so.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
game = 'Super Mario';
}With that, we now have some data binding in AngularJS working!
Introduction To AngularJS Summary
In this basic tutorial about AngularJS, we learned a little bit about the history of Angular, it’s version 2 rewrite, and where it is today. Angular has a powerful command line interface tool to scaffold out an application for you. In addition, by using the ng serve command, you’ll get a great development server up and running with automatic hot reload for any changes you make to the source files. Finally, we looked at the most basic introduction to data binding in AngularJS by using the [(ngModel)] directive.
