AngularJs

AngularJS

Introduction to AngularJS tutorial.

What is AngularJS?

AngularJS is a JavaScript Framework. It is used in Single Page Application (SPA) projects. AngularJS is open source, completely free, and used by thousands of developers around the world.

It can be added to an HTML page with a <script> tag.

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

 

 AngularJs Main features

  • Data-binding − It is the automatic synchronization of data between model and view components.
  • Scope − These are objects that refer to the model. They act as a glue between controller and view.
  • Controller − These are JavaScript functions that are bound to a particular scope.
  • Services − AngularJS come with several built-in services for example $http to make a XMLHttpRequests. These are singleton objects which are instantiated only once in app.
  • Filters − These select a subset of items from an array and returns a new array.
  • Directives − Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel...)
  • Templates − These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using "partials".
  • Routing − It is concept of switching views.
  • Model View  Controller − MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever.
  • Deep Linking − Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.
  • Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.


Model-View-Controller (MVC)

Model: Database communication (Properties of scope) . Scope ties the controller and views together i.e Properties and Functions.
View: Enables content to be displayed on the screen (i.e HTML template).
Controller: Ties the model and view together(Contains business logic).

 

Here are Some commonly used angularjs 'ng-' directives.

  • ng-class – the ngClass allows you to set CSS classes on an HTML element dynamically by databinding an expression that represents all classes to be added.
  • ng-click – the ngClick allows you to specify custom behavior when element is clicked.
  • ng-hide – the ngHide directive shows and hides the given HTML element conditionally based on the expression provided to the ngHide attribute.
  • ng-include – fetches, compiles, and includes an external HTML fragment.
  • ng-model – is a directive that tells Angular to do two-way data binding.
  • ng-show – the ngShow directive shows and hides the given HTML element conditionally based on the expression provided to the ngShow attribute.
  • ng-submit – enables binding angular expressions to onsubmit events.

We will make an Hello World Example.

Step 1.

Create an angular module and define a Controller.

var myApp = angular.module("myModule", []);
myApp.controller("myController", function($scope){


$scope.message = "Hello World";

});

Explanation:

As you can see in about code snippet, I called module() function of angular global variable and pass the module name myModule. The function controller() is named myController.

As you can see in above code snippet, controllers are just functions. We don’t invoke this functions but angular will call this controller function when it need to manage the section of HTML page which has ng-controller directive. When Angular create controller, it pass the parameter to function called $scope. We can attached our models or data to this$scope variable.

Step 2:

Include angularjs javascript file into your HTML document. You can download the complete AngularJS from https://angularjs.org site.  But for this tutorial, I will use CDN url as shown below.

<!doctype html>
<html ng-app ="myModule">
<head>
<meta charset="utf-8">
<title>Eloneth</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<script src="script.js"></script>

</head>
<body>
<div ng-controller="myController">

<h3>{{message}}</h3>

</div>
</body>
</html>


Explanation:

Remember, $scope is not the model but the things that we attached to it is the model. In the above code snippet we only attached a single property to the $scope called message which points to a string value. This one will makemessage available to us inside HTML so we can data bind into display.

OUTCOME:

                                     Hello World

 

View more AngularJS Tutorials

AngularJS Tutorial for Beginners #1. Introduction to AngularJS

How to create a Simple Employee's App in AngularJS

How to use angularJS directives to load image

How to use ng-repeat to create details of employees in AngularJS

How to create a simple like and dislike sport app in AngularJS

How to use AngularJS filter to increase and decrease table row

Two way data binding using ng-model in AngularJS

How to use AngularJS filters to increase and decrease table rows

Sorting data

How to search data data in AngularJS

 How to use ng-hide and ng-show properties

AngularJS AnchorScroll to scroll a web page