AngularJS is one of the earliest JavaScript frameworks that quickly gained popularity as an MVC framework. Soon after its release, Google started to support AngularJS, and so many things have been changed since then. I would say the only common thing between the first and latest AngularJS versions is the name.
How AngularJS became so popular?
AngularJS provides modularity for single web applications. This was an immense privilege over the rest of the JS frameworks. With multiple modules, it also has a secure way to bind the data to the HTML elements. In addition, bi-directional data binding provides to reflect the changes in real-time.
How to start coding in AngularJS?
Set up your local machine for development
Make sure you have a recent version of node.js installed. Once installation is done, you can continue to develop;
Angular applications use npm packages for many features and functions. Please check the npm client guide to learn how to use the npm package manager command-line interface, installed with Node.js by default.
How to Install the Angular CLI?
Angular CLI allows you to create projects and generate the application code with an initial setup that comes with deployment, testing, and some other features.
npm install -g @angular/cli
How to create a project with AngularJS?
Run the below CLI command to generate a new application; now, accept the default values.
ng new my-first-angular-app
How to run an AngularJS application?
The Angular CLI comes with a server by default which gives you the ability to build and run your application locally.
Run the below command in your application root folder to start the application.
cd my-first-angular-app
ng serve --open (or -o)
Congratulations! You can check the default user interface you just generated from http://localhost:4200 in the browser.
The default UI provides you with some base documents along with learning tutorials.
AngularJS Data Binding Example
In the below example, you will see how to bind a pre-defined dataset in the template.
Let’s create static data with the file name job.ts, which contains a list of open jobs from exceptionly.com.
export class Job {
static jobs: Job[] = [
new Job('Node.js + React.js Full Stack Software Engineer (Remote, Global)', 'https://talent.exceptionly.com/jobs/Careers/618225000003951125/Node-js-React-js-Full-Stack-Software-Engineer-Remote-Global-?source=Website'),
new Job('Android Architect (Remote, Global)', 'https://talent.exceptionly.com/jobs/Careers/618225000003951125/Node-js-React-js-Full-Stack-Software-Engineer-Remote-Global-?source=Website'),
new Job('Kubernetes and Terraform Experienced Senior DevOps Engineer (Global, Remote)', 'https://talent.exceptionly.com/jobs/Careers/618225000003872417/Kubernetes-and-Terraform-Experienced-Senior-DevOps-Engineer-Global-Remote-?source=Website')
];
constructor(
public title?: string,
public link?: string) {}
}
Update app.component.ts to get the list of jobs on initialization.
import {Component, OnInit} from '@angular/core';
import { Job } from './job';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'my-first-angular-app';
jobs: Job[] = [];
ngOnInit() {
this.fetchJobs();
}
fetchJobs() {
this.jobs = Job.jobs;
}
}
And finally loop the jobs in app.component.html
<div *ngFor="let job of jobs">
<a href="{{ job.link }}">{{ job.title }}</a>
</div>
Output
Node.js + React.js Full Stack Software Engineer (Remote, Global)
Android Architect (Remote, Global)
Kubernetes and Terraform Experienced Senior DevOps Engineer (Global, Remote)
Conclusion
Today around ~7000 companies still have AngularJS in their tech stacks, including Google, Amazon, and Udemy. So it is sad to hear that Google will stop supporting AngularJS by the 31st of December, 2021.
It feels like the right time to try something new. Feel free to challenge other libraries & frameworks I posted about previously.
English 
Arabic
3 Responses