Getting started with AngularJS using a simple application
AngularJS is a structured, JavaScript open source front-end framework use to develop dynamic one-page applications. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly. AngularJS extends HTML attributes with Directives and binds data to HTML with Expressions.
Prerequisites
Anyone with a basic JavaScript, CSS, and HTML background can start working in AngularJS without any hassle.
AngularJS Architecture — MVC
Code for AngularJS applications is always organized into a model view controller (MVC).
- Models are JavaScript objects that represent the data your application can access. Models are also used to represent the application’s current state.
- Views are used to represent the presentation layer which is provided to the end user.
- Controllers define the actual behavior of your application. Controllers play a key role in connecting the right models to the right views.
Now you know a bit more about the theory. Without going through the other complex theory parts, let’s take a look at some actual code using AngularJS. That is the way to understand what’s happening, for a beginner to AngularJS.
In order to get started with AngularJS, we need to have an HTML page with 3 things.
1. Load angular.js framework
2. Add ng-app
3. Add expression
Now let’s go through these 3 facts…
1. Load angular.js framework
We need to load the angular.js file to the HTML code from Google CDN or from the local disk. It can be added using <script> tag. You can do it as shown below.
- If you’d like to load it from Google CDN then put this in your HTML:
- You can also download the angular.min.js file, put it on your server and serve it from there:
In this blog, I’m going to use Google CDN to load the AngularJS framework.
2. Add ng-app
Next step is to indicate the active portion of angular application by adding ng-app. The directive ng-app tells the Angular which part of our document belongs to the angular application. You can only have one ng-app directive in your HTML document. We can add ng-app directive to the <html> element, to the <body>, or even a <div> as shown below.
<html ng-app>…</html>
<body ng-app>…</body>
<div ng-app>…</div>
3.Add expression
An expression is a code snipped wrapped in {{ }}. It can contain a limited set of JavaScript expressions. These expressions are much like JavaScript expressions. They can contain literals, operators, and variables. If you remove the ng-app directive, HTML will display the expression as it is, without solving it.
In this way, we can integrate AngularJS with HTML.
Let’s move to a very simple HTML code to use the above-mentioned facts. I used Visual Studio Code to code this one and I have saved my code as “angularex.html”.
Output :
Open the file angularex.html in a web browser and see the result.
I’ll take you through the code lines by line numbers of the code and verified the above-mentioned 3 facts.
- Line 2 indicates the start of the AngularJS application by adding the ng-app directive to the HTML tag.
- Line 5 has given the angular.js framework to the code by using Google CDN.
- Line 10 and Line 11 contain expressions.
So, we have done a very simple AngularJS application.
There are many directives use in AngularJS other than ng-app. We can develop our AngularJS application by adding those directives. In my blog, I just needed to cover a very simple application. Because of that, I show you how to use ng-app briefly.
I would like to add details in brief about some other directives.
As you can see, AngularJS directives are extended HTML attributes with the prefix “ng-”.
- ng-bind directive — It tells AngularJS to replace the content of an HTML element with the value of a given variable, or expression.
- ng-init directive — initializes application data.
- ng-model directive — binds the value of HTML controls to application data.
- ng-controller directive — attach the controller to the View.
Rather than that there are many directives in AngularJS and also we can create our own directives. And also there are many features of AngularJS. But here I’m not going to describe those because I just wanted to give you a brief introduction about AngularJS.
So these are the basic points you must be considered before starting AngularJS.
AngularJS is not difficult to learn. I think you were able to gain some basic knowledge about AngularJS from my blog and I hope it’ll be easy for you to get started AngularJS and continue learning.
Have a good day 😃
