AngularJS was among the first JavaScript frameworks with tons of functionality. Google developed this framework and open-sourced it in 2012. Since then, a team of google developers and open-source contributors have worked together in maintaining and updating this framework.
Whether you believe it or not, AngularJS is easy to learn, and by the end of this article, you’ll believe in this line.
The best way to learn is by doing things as they come, and if you are looking to build your first AngularJS app, what’s better than following along with the tutorial!
Let’s start by understanding the basics of AngularJS.
Understanding Basics
AngularJS is an MVC-based JavaScript framework used to create a dynamic front end for web applications. In the MVC architecture, M stands for models, which are object-oriented representations of database tables.
They map to database tables and allow for better communication between databases and code.
The V stands for views which are HTML templates and other code which create dynamic content based on the data. Lastly, C stands for controllers, and you’ve guessed it right, it is the part that controls everything in the app.
A controller performs database operations through the models and gives data to the view templates so that they can be rendered to the client and successfully serve the request.
Any AngularJS app is based on three important directives, and it is important to understand them before moving ahead.
Ng-app
An AngularJS app needs a root element in the HTML template where the scripts are loaded. This is where ng-app helps you. When you define ng-app directive on any HTML div tag, that tag acts as the root tag for the AngularJS app.
Ng-model
Almost all times when you are creating apps that take user input, you’ll need to store them in a variable. ng-model helps you to bind values of HTML input tags to a variable so you can use them whenever you need.
Ng-bind
A saved variable always needs to be used somewhere in the app. This is where ng-bind steps in. It is a directive that lets you use the value of a variable inside any HTML element.
A good thing about ng-bind is that it will automatically listen for the variable’s changes and render them as and when there is a change.
If you’ve got these three directives well, working with AngularJS will be easy. So let’s get our hands dirty. We’ll start off with a walkthrough of what we are building.
Walkthrough of What We Are Building
In this tutorial, you’ll build your first AngularJS app, which will be a table of top footballers. Though this might look simple, it’s good to start with as you’ll get an understanding of loop directives, controllers, and templates all in one project only.
So let’s begin.
Loading the Framework and Primary Setup
First off, to create any AngularJS app, you need to provide a script tag that refers to AngularJS core libraries.
Here is the sample code for this step.
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script>
Once you’ve added the script tag, it is time to create the root element for your AngularJS application. To do this, inside the body tag, define a div tag in your index.html file where you just placed the script tag, and mark it with ng-app.
Below is the sample code for this step.
<div ng-app = "footballersApp"> ... </div>
Now anything you do on the template side should be inside the ng-app marked div tag only. This div tag will serve as the root element for your app, and you can use AngularJS functionality inside this app only.
After this initial setup, let’s move to create a controller.
Creating a Controller
The controller is the brain of any AngularJS application. Hence let’s define the controller so that we have something to show in our views.
We will define the controller for this app as footballersController.
angular.module('footballersApp.controllers', []).
controller('footballersController', function($scope) {
$scope.footballersList = [
{
name: “Cristiano Ronaldo”,
age: 37,
country: “Portugal",
club: “Manchester United”
},
{
name: “Lionel Messi”,
age: 35,
country: “Argentina",
club: “PSG”
},
{
name: “Neymar”,
age: 30,
country: “Brazil",
club: “PSG”
}
];
});
In the above code, the $scope variable is highly important. Anything you write inside that will be linked to views, and it can be used to store and access data in views.
Once that is done, we will open the app.js file and register our module. Add the below code in app.js to register the footballersControllers.
angular.module(‘footballersApp’, [ 'footballersApp.controllers' ]);
After this, all that remains is the design of the view of this app. So let’s move ahead and complete our first AngularJS app.
Creating the View
To work on the view, open index.html and type the below code there.
<!DOCTYPE html>
<html>
<head>
<title>Footballers App</title>
</head>
<body ng-app="footballersApp" ng-controller="footballersController">
<table>
<thead>
<tr><th colspan="4">Best Footballers</th></tr>
</thead>
<tbody>
<tr ng-repeat="footballer in footballersList">
<td>{{$index + 1}}</td>
<td>
<img src="img/flags/{{footballer.nationality}}.png" />
{{footballer.name}}
</td>
<td>{{footballer.club}}</td>
<td>{{footballer.age}}</td>
</tr>
</tbody>
</table>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
Let’s break down the above code one by one.
Here in the ng-app directive, we have defined the name for our app and also the root element for our application. The ng-controllers directive is used to link the view with the controller. As we had created the footballersController before, it was necessary to link it with the view to see results.
ng-repeat is AngularJS’ way of looping over items. In that, we have created an instance variable for the loop and named it footballer, while our list remains footballersList which is defined in the controller.
ng-repeat will loop over the entire footballersList, and add values of each JSON object to our view. In each run, it will take footballer.name, footballer.age, footballer.country, and footballer.club from the JSON object.
At the end, when the loop ends, you’ll see three different rows, each with details from different JSON objects.
That’s all, if you’ve followed closely, you should have your AngularJS app running with the desired output.
Conclusion
AngularJS might be old, but it is still used in many places. If you learn this framework, picking up on newer frameworks like Angular and React might be easier for you.
This was just a basic app, and there are endless possibilities with AngularJS, but we’ll leave it to your imagination to build more complex applications as you learn more about the framework. If you wish to create a more complex app, you can connect to Angular developers for hire from reputed Angular.js development companies.