Post
Ask Question

Learning AngularJS Simplified - Part One

Introduction

AngularJS is not new and there are so many articles available on the web to learn, implement, and use the technology for web development.

I am writing this learning series for the developers who are beginners in AngularJS but possess a little knowledge about JavaScript.

What is AngularJS?

It is a powerful, robust framework written on top of JavaScript. Using this, you can create very rich web apps and SPA single page applications. It is an open source project created and maintained by Google which is taking contribution from developers from all over the world.

SPA is nothing but Web apps that load a single HTML page and dynamically updates that page as the user interacts with the app.

https://angularjs.org/

There is an official website for AngularJS which has the latest version of Angular script needed for the application is available. Apart from that, many sample resources and learning materials for Angular are available.

Version

Two different versions are available to download- one is Stable 1.x version for production apps and another one is a Beta version which is not very stable for production applications. Information about the stable version, such as where to download offline and different online cached links are available such as CDN and Bower.

You can choose either way to go ahead for the app.

app

Question came to mind as a developer that ifthere are a lot of JavaScript frameworks available to create the web app, then why should I choose AngularJS?

Basically, I am asking the question in a simple manner: Why AngularJS?

AngularJS gives a way to write less code to achieve any functionality. Below is the list of features that makes the JavaScript framework very powerful.

Two way binding from HTML and CSS with Model

Two way binding is the core of AngularJS. It gives a way to HTML and CSS to state JavaScript variables on changes of the state AngularJS which takes control and updates all the HTML and CSS which has referenced that JavaScript variable. In the later part of the article, you will get more clarity on the binding feature of the framework.

  • Injectable (Dependency Injection)

    The Dependency Injection in AngularJS allows you to declaratively describe how your application is wired.

    Dependency Injection is nothing but a software design pattern that allows you to develop loosely coupled code by providing a way to inject dependency outside the class. Basically, this pattern helps to reduce the tight coupling between software components and make the software testing easy.

  • Testable

    AngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre-bundled with mocks, and takes full advantage of dependency injection. It also comes with end-to-end scenario runner which eliminates test flakiness by understanding the inner workings of AngularJS.

My First Angular App

Basically for creating and testingthe angular app, we basically require the Script file which is Angular.js, a browser and any Editor to write your code.

For this article, I am choosing Visual Studio 2015 as Editor as I am a .Net guy and want to put some flavor of .Net.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <meta charset="utf-8" />  
  7.     <script src="Scripts/angular.min.js"></script>  
Minified version of angular.js files reference to HTML
  1. </head>  
  2. <body >  
ng-app is angular directive

Expressions
  1. <div ng-app="">  
  2.     Sum Result: {{ 5 + 8 }}  
  3. </div>  
  4. <div>  
  5.     Multiply Result: {{ 5 * 8}}  
  6. </div>  
  7. </body>  
  8.   
  9. </html>  
Result in Browser

Result

What is Angular Directive?

Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tells AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners) or even to transform the DOM element and its children.

Reference: https://docs.angularjs.org/guide/directive

In simple words, AngularJS uses directive to extend HTML by adding some behavior using attributes and elements. Here is ng-app directive which helps to bootstrap the Angular for the angular behavior declaratively.

Types of Angular Directive

Primitive Directives - Provided by AngularJS framework.

Below is the list of some important Angular directive. 
  • ng-app
  • ng-contoller
  • ng-mode
  • ng-repeat
  • ng-app

Custom Directives - User defined custom directives.

Will be explaining the custom directive in deep later in the labs.

ng-app Directive

The ngApp is a directive in angular which bootstraps the application with Angular benefits. This basically designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags.

You can place the ng-app directive anywhere in the application basically entry point for the angular app. once found with ng-app directive angular will start taking care of the portion of html and its child elements also. In above example I have placed the ng-app directive at div level and trying to execute two mathematical calculation sum and multiplication in two different div using angular expression. I will explain deeply bout expression in later in the lab series.

In result section you can see some result is giving the correct one but multiple does not even recognize the expression; this is because the angular has execute the piece of code to directive ng-app with first div.

If I will move the directive to body or HTML level, result will be for both the expressions.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <meta charset="utf-8" />  
  7.     <script src="Scripts/angular.min.js"></script>  
  8. </head>  
  9.   
  10. <body ng-app="">  
  11.   
  12.     <div>  
  13.         Sum Result: {{ 5 + 8 }}  
  14.     </div>  
  15.     <div>  
  16.         Multiply Result: {{ 5 * 8}}  
  17.     </div>  
  18.   
  19. </body>  
  20.   
  21. </html>  
Result

Result

Only one AngularJS application can be auto-bootstrapped as per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document, you must manually bootstrap them using Angular.bootstrap instead.
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <title>Students</title>  
  6.     <meta charset="utf-8" />  
  7.     <script src="Scripts/angular.min.js"></script>  
  8. </head>  
  9.   
  10. <body ng-app="">  
  11.   
  12.     <div ng-init="StudentName='Abhishek Singh' ; Age=16 ; Standard='10th'">  
  13.         Student Name : {{StudentName}} <br /> Age : {{Age}} <br /> Stadard :{{Standard}}  
  14.     </div>  
  15.   
  16. </body>  
  17.   
  18. </html>  
ng-init is nothing but a directive which helps in initialization of an Application data for the current scope.
  1. <div ng-init="StudentName='Abhishek Singh'">  
  2.     <input ng-model="StudentName" /> {{StudentName}}  
  3. </div>  
Result
Input text box is bound. Using this ng-model, if the name is getting changed in the input, it will be updated in real-time to the element displaying the student name which is an angular way to achieve Two Way Data binding.

ng-model

It is the model whose values are bound to HTML elements.

Module in AngularJS

Module is nothing but an entry point of an Angular Application. It helps to specify how an application should be bootstrapped.
It will work as a module, as a container for the different parts of your app – controllers, services, filters, directives
  1. var studentsApp = angular.module("studentsModule", []);  
Above is the syntax to create the module.

Controller in AngularJS

Controller is nothing but a JavaScript function which builds model for the view by attaching the scope object which is $scope here.
  1. var studentController = function($scope)  
  2. {  
  3.     $scope.message = "Hello from Students Controller!!!!";  
  4. };  
This is Model for the view

Directive ng-controller helps in determining JavaScript controller and the view attachment.

Students.js
  1. //step 1  
  2. //Reference the angular Script  
  3. /// <reference path="angular.min.js" />  
  4. //Step 2  
  5. // Name Your module and assign it to a avriable  
  6. var studentsApp = angular.module("studentsModule", []);  
  7.   
  8. //step 3  
  9. //Define a controller   
  10. var studentController = function($scope) {  
  11.     $scope.message = "Hello from Students Controller!!!!";  
  12.   
  13. };  
  14. //step 4  
  15. // wire up your controller to app with a name  
Result  
  1. studentsApp.controller("studentController", studentController);  
  2.   
  3. <!DOCTYPE html >  
  4.     <  
  5.     html >  
  6.     <  
  7.     head >  
  8.     <  
  9.     title > < /title> <  
  10.     h2 > Students Details < /h2> <  
  11.     meta charset = "utf-8" / >  
  12.     <  
  13.     script src = "Scripts/angular.min.js" > < /script> <  
  14.     script src = "Scripts/StudentsJS.js" > < /script>   
  15.   
  16. //Reference the Students.js file  
  17.   
  18. <  
  19. /head> <  
  20. body ng - app = "studentsModule" >  
Module Name
  1. <div ng-controller="studentController">  
Controller Name
  1. First Message:   
  2. {  
  3.         {  
  4.             message  
  5.         }  
  6.     } <  
  7.     /div>  
  8.   
  9. <  
  10. /body> <  
  11. /html>  
Result in Browser

Result

Here is the example where with scope object, some complex data with students detail can be attached and passed as model to the view.

Students.js
  1. /// <reference path="angular.min.js" />  
  2. var studentsApp = angular.  
  3. module("studentsModule", []).  
  4. controller("studentController", function($scope) {  
  5.   
  6.     var studentDetails =   
  7.         {  
  8.         studentName: "Abhishek Singh",  
  9.         Age: 16,  
  10.         Standard: "10th"  
  11.     };  
  12.     $scope.studentData = studentDetails;  
  13.     $scope.message = "Hello from Students Controller!!!!";  
  14. });  
View HTML page
  1. <!DOCTYPE html>  
  2. <html ng-app="studentsModule">  
  3.   
  4. <head>  
  5.     <title></title>  
  6.     <h2>Students Details</h2>  
  7.     <meta charset="utf-8" />  
  8.     <script src="Scripts/angular.min.js"></script>  
  9.     <script src="Scripts/StudentsJS.js"></script>  
  10. </head>  
  11.   
  12. <body ng-controller="studentController">  
  13.     <div>  
  14.         First Message: {{message}}  
  15.     </div>  
  16.     <br />  
  17.     <div>  
  18.         Student Name : {{studentData.studentName}}  
  19.         <br /> Age:{{ studentData.Age}}  
  20.         <br /> Standard:{{studentData.Standard}}  
  21.     </div>  
  22.   
  23. </body>  
  24.   
  25. </html>  
Result

Result

In the coming lab series, I am going deep to explain scope objects, two-way binding, and services with the project in action.

Resource References

You can read more for the directive using API reference of Angular website. 
  • https://angularjs.org/
  • https://docs.angularjs.org/api/ng/directive/ngApp


Similar Articles