AngularJS Tutorial

AngularJS is quite new which was released in the year 2012 by a Google employee Miško Hevery who was working on AngularJS from the year 2009. I hope this AngularJS tutorial will help beginners to learn something.

I hope this AngularJS tutorial helps you to learn angularjs from the beginning, learn about AngularJS directives, expressions, and few angularjs examples.

  • AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, front-end applications.
  • AngularJS is a structural framework for dynamic web apps.
  • AngularJS extends HTML with new attributes and is perfect for SPAs (Single Page Applications).
  • AngularJS extends HTML by providing directives that add functionality to your markup and allow you to create powerful dynamic templates. It also implements two-way data binding, connecting your HTML (views) to your JavaScript objects (models) seamlessly. In simple terms, this means that any update on your model will be immediately reflected in your view.
  • Flexibility regarding server communication. Like most JavaScript MVC frameworks, it lets you work with any server-side technology as long as it can serve your app through a RESTful web API.

AngularJS provides the following facilities:

  • Data binding, as in {{}}.
  • DOM control structures for repeating/hiding DOM fragments.
  • Support for forms and form validation.
  • Attaching code-behind to DOM elements.
  • Grouping of HTML into reusable components.

AngularJS Expressions:

  • AngularJS expressions are written inside double braces: {{ expression }}.
  • AngularJS expressions bind data to HTML the same way as the ng-bind directive.

In AngularJS, expressions allow you to execute some computation in order to return the desired value.

{{ }}

you shouldn’t use expressions to implement any higher-level logic. For that, we use directives.

AngularJS Directives:

  • AngularJS directives are extended HTML attributes with the prefix ng-.
  • At a high level, directives are markers (such as attributes, tags, and class names) that tell AngularJS to attach a given behavior to a DOM element.
  • The ng-app directive initializes an AngularJS application.
  • The ng-init directive initialize application data.
  • The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
  • The ng-controller directive defines which controller will be in charge of your view.
  • The ng-repeat directive is one of the most commonly used and serves to define your template scope when looping through collections.
  • The ng-repeat directive repeats an HTML element:


<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<li ng-repeat="x in names">
{{ x }}

AngularJS Example:

Below is an AngularJS example to show data using ng-repeat.

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<li ng-repeat="x in names">
{{ x }}

AngularJS Example:

Here is an AngulatJS example which binds textbox data through expression.

<div ng-app="" ng-init="firstName='Raj'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>


AngularJS Data Binding:

The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.

Data binding in AngularJS, synchronizes AngularJS expressions with AngularJS data.

{{ firstName }} is synchronized with ng-model=”firstName”.

<div ng-app="" ng-init="quantity=1;price=5″>

Quantity: <input type="number" ng-model="quantity">
Costs:    <input type="number" ng-model="price">

Total in dollar: {{ quantity * price }}


You may like following angularjs & SharePoint 2013 tutorials:

I hope this AngularJS tutorial helps to learn AngularJS from the beginning. Also, I have shown how to use AngularJS directives, AngularJS expressions and also we have shown some AngularJS examples.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.