AngularJS Tutorial

InfoPath alternatives for form designing SharePoint
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. Hope this AngularJS tutorial will help beginners to learn something.
– 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.hhh
It is providing 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 binds data to HTML the same way as the ng-bind directive.
In AngularJS, expressions allow you to execute some computation in order to return a desired value.
Ex:
{{ user.name }}
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 behaviour 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:
Ex:
<div ng-app=”” ng-init=”names=[‘Jani’,’Hege’,’Kai’]”>
  <ul>
    <li ng-repeat=”x in names”>
      {{ x }}
    </li>
  </ul>
<div>
AngularJS Example:
<div ng-app=”” ng-init=”names=[‘Jani’,’Hege’,’Kai’]”>
  <ul>
    <li ng-repeat=”x in names”>
      {{ x }}
    </li>
  </ul>
<div>
AngularJS Example:
<div ng-app=”” ng-init=”firstName=’Raj'”>
<p>Name: <input type=”text” ng-model=”firstName”></p>
<p>You wrote: {{ firstName }}</p>
</div>
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”.
Ex:
<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 }}
</div>

You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →

Leave a Reply