Post
Ask Question

Quick Start Of AngularJS

About

Angular JS is the one of the finest JavaScript frameworks to create dynamic web applications by writing less code with an easy syntax in HTML files.

RoadMap

In this article you will get an idea of the following concepts.

  1. Introduction

  2. Prerequisites

  3. Download Angular Js

  4. Angular Js Editors

  5. Angular Js Architecture

  6. About ng-app and Binding Expressions

  7. ng-controller

  8. ng-model

  9. ng-show and ng-hide 

Introduction

Angular JS is the one of the best frontend frameworks for implementing any kind of dynamic web application using JavaScript and HTML for the following reasons.

  1. It helps you to organize your JavaScript code by creating controllers, modules and so on.

  2. The website creation is very fast, as fast as adding attributes to the controls.

  3. It is compatible with jQuery as well.

  4. It's suitable for testing the application since the way of writing JavaScript is organized.

Angular JS started as a Google project but now it is an open-source project. So it's available in GitHub and anyone can contribute to it.

The official site for Angular JS.

Until now, there are many applications developed using Angular JS. You can get a list of all those applications from the URL BuiltWith AngularJS.

In Angular JS web applications, using Directives you can tell HTML to trigger your JavaScript functions.

Angular JS provides many directives, even though most of the directives are understandable by the name itself. The directives start with “ng-”. Here ng refers to and is pronounced as Angular.

Angular JS has no other dependencies. So you just need to include the JavaScript file whereever required.

Prerequisites

To implement web applications using the frontend application framework, you just need to have some idea of the following concepts:

  1. HTML

  2. CSS

  3. JavaScript

Download AngularJS

The Angular js files you can download from AngularJS. You can even use the CDN URL to access the JavaScript file.

The CDN URL is: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js

AngularJS Editors

There are many suitable editors available (online/offline) to implement or practice Angular JS applications. They are the following:

  1. Plunker.

  2. WebStorm.

  3. JS Fiddler (JSFiddle ) and so on.

AngularJS Architecture

AngualrJS should be categorized as pinny needed MV* framework and it also supports Unit tests and both integrated end to end tests.

Model: the Model is used to restore the data and state of your application.

View: Where you actually render to the user the information they want.

It stands like any other Controller / Presenter / ViewModel and so on. Even though in most of the cases we will use the controller.

So, Controllers are the main components in Angular applications, Angular JS supports two-way binding. That means that whenever the user enters into the form fields they are instantly updated in Angular models.

So, let's start a sample application using Angular JS to get a brief idea of it.

Note: in these examples, I am using Angular Js 1.3.8, the latest version, since this version contains many features and at the same time, some of the features that are supported in 1.2.x would not be supported in the 1.3.8 version (for example, Global controller functions are not supported in 1.3.x by default).

ng-app and Binding Expressions

In this example, you will implement a basic application using Angular JS.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.   <!-- 1. Angular JS Script CDN reference added  -->  
  6.   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">  
  7.   </script>  
  8. </head>  
  9.   
  10. <body>  
  11.   <h1>Welcome to Angular Application</h1>  
  12.   <!-- 2. ng-app directive added as attribute to the div  -->  
  13.   <div id="AngularDiv" ng-app>  
  14.     <!--3. {{ }} Data binding Expressions -->  
  15.     This div is controlled by Angular JS: {{ 1 + 2 }}  
  16.     <br/>  
  17.     <!--4. {{ }} Data binding Expressions with in a single   
  18.     quote treated as constant string -->  
  19.     To Display Constants / Static ones in Angular JS: {{ '1 + 2' }}  
  20.   </div>  
  21.   <!-- 5.This is not in the part of Angular JS -->  
  22.   <div id="NormalDiv">  
  23.     Normal div doesn't handled by Angular JS: {{ 1 + 2 }}  
  24.   </div>  
  25. </body>  
  26.   
  27. </html> 

The previously described HTML file contains five notified points as specified in the comments section of HTML.

The Angular JS script CDN reference added at the head of HTML file.

ng-app: The directive ng-app is added as an attribute to one of the div with an Id of AngularDiv. It is a special directive since whenever it is found inside a HTML page it starts the action of managing the page.

{{ }}: This format or notation is called Binding Expressions in Angular JS.

So, whenever you have defined some expression inside the Binding Expressions ({{ }}) that is controlled by AngularJS directive (ng-app) automatically it evaluates and displays the results in an HTML page.

If you want to display an expression within binding expressions ( {{ }} ) without evaluation then you need to enclose it with single quotes as described in the 4th point of the HTML file.
The other div with the Id NormalDiv does not have an assigned attribute (ng-app). So it displays data normally without evaluating the data within the binding expressions.
 
Now, you can save the HTML file and run it in a browser and the output will be displayed as follows.
 
 
 
You can run the sample application using the Plnkr tool at AngularJs Starter .

Until now, you got an idea of the special directive named “ng-app” and how you can use the binding expressions to evaluate the data. Now, you can move to the next step of writing JavaScript code and trigger that code in the HTML file using Angular JS directives.

ng-controller

The primary responsibility of the controller is to create the scope object and that scope can communicate with the view in both directions. You can bind the properties and functions to the scope object.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.   <!-- 1. Angular JS Script CDN reference added  -->  
  6.   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">  
  7.   </script>  
  8.   <!-- 2. Script JS Reference -->  
  9.   <script src="Demo.js"></script>  
  10. </head>  
  11. <!--3. ng-app is DemoApp and controller is DemoController -->  
  12. <body ng-app='DemoApp'>  
  13.   <h1 ng-controller='DemoController'>{{ angularjs }}</h1>  
  14. </body>  
  15.   
  16. </html> 

The HTML file contains mainly the following 3 points:

  1. Angular Js script file CDN path reference.

  2. Demo.js file reference containing a few lines of JavaScript code.

  3. ng-app refers to the module name (DemoApp), it refers to any controllers created under it that is part of that module. Ng-controller refers to the controller name (DemoController). 

The Demo.js file contains the following lines of JavaScript code.

  1. var WelcomeAngular = function($scope) {  
  2.   $scope.angularjs = "Welcome to Angular Js";  
  3. };  
  4.   
  5. var app = angular.module("DemoApp", [])  
  6. app.controller('DemoController', WelcomeAngular); 

The first step of JavaScript file contains one variable named WelcomeAngular. It refers to one function with the scope object. The scope object contains one property named angualrjs.

In the second step you are creating an Angular module named “DemoApp” to the variable “app” and then assigning a controller named “DemoController” to that app.

You can now run the HTML file and then you will see the output as “Welcome to Angular Js” that was specified in the JavaScript file to the property named angularjs in the scope object. 

 
You can run the sample application using the Plnkr tool at  AngularJs Controller.

ng-model

ng-model is also one of the directives, it can bind to the input, select or custom form controls using the property named ng-model.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.   <!-- 1. Angular JS Script CDN reference added  -->  
  6.   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">  
  7.   </script>  
  8. </head>  
  9. <!-- 2. ng-app directive included -->  
  10. <body ng-app>  
  11.   <h1>Employee Search</h1>  
  12.   <form>  
  13.     <label>Employee Name:</label>  
  14.     <!--3. ng-model directive added to the input field with the value empname  -->  
  15.     <input type="text" placeholder="Employee name to find" ng-model="empname" />  
  16.     <br/><pre>You entered employee name is: {{empname}} </pre>  
  17.   </form>  
  18. </body>  
  19.   
  20. </html>  

  1. Added the Angular JS CDN path.

  2. ng-app directive was included in the body field. So the HTML body is under Angular JS.

  3. ng-model is added to the input field with the value empname.

In this example, as you notified the only new one is ng-model with the value in the input field. So, whenever you have added the ng-model property with the value (empname) and where you are using that value (empname) automatically it populates by entering the text into the respective input field.

 
Initially, when you run the HTML file, it is displayed like the following.
 
 
Now, whenever you have entered some value into the TextBox those values are automatically shown in the screen as output asynchronously.
 
 

You can run the sample application using the Plnkr tool at AngularJs Model.

 
ng-show and ng-hide

ng-show and ng-hide are also directives. These are very helpful when you want to hide or show something based on a property or object that either contains a value or does not.

 
As you seen in the aforesaid model example, the string is always displaying like "you entered employee name is:". You can change it so it will only display whenever the user has entered a value into a text box field.

For example, when you search for employee details, you need to display some message when the user begins searching by entering some employee name.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.   <!-- 1. Angular JS Script CDN reference added  -->  
  6.   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js">  
  7.   </script>  
  8. </head>  
  9. <!-- 2. ng-app directive included -->  
  10. <body ng-app>  
  11.   <h1>Employee Search</h1>  
  12.   <form>  
  13.     <label>Employee Name:</label>  
  14.     <!--3. ng-model directive added to the input field with the value empname  -->  
  15.     <input type="text" placeholder="Employee name to find" ng-model="empname" />  
  16.     <br/>  
  17.     <!--4. ng-show and ng-hide directives will display only empname is not empty -->  
  18.     <pre ng-show="empname">Employee Search Started..!!!</pre>  
  19.     <pre ng-hide="!empname">You enetered employee name is: {{empname}}</pre>   
  20.   </form>  
  21. </body>  
  22.   
  23. </html> 

The previously described HTML file contains the following two pre tags:

  1. The first one contains the ng-show directive with the value empname. So, The pre tag will be displayed whenever you have entered some text into the input filed that has applied the ng-mode is empname.

  2. The second one contains the ng-hide directive with the value !empname (here ! Indicates not). So, The pre tag will be hidden when the empname is empty.

Note: in both of the preceding cases you can use any one of the directives (ng-show or ng-hide) for simplicity. But for the purpose of understanding, I have used both directives.

Now, you can run the HTML file and by default it displays like the following.

 
 
Now, you can enter any of the text in that text box field and then the screen will have the results shown as follows.
 
 You can run the sample application using the Plnkr tool at AngularJS Show Hide.
 
Conclusion

I hope this article provides you an idea of the history and architecture of AngularJS, Binding Expressions and some of the directives like ng-app, ng-controller, ng-model, ng-show and ng-hide.


Similar Articles