About Angular.JS

How to Start Angular.js & How to Extend html in Angular.js?

AngularJS is a JavaScript framework. It can be added to an HTML page with a tag.

AngularJS is a JavaScript framework. It is a library written in JavaScript.

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

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

How to Start Angular.js?

When writing an AngularJS app, we write the behavior and interaction together alongside the presentation.

Writing this way can be confusing at first, especially if you have experience with other frameworks where the two are generally separate. Once you get the hang of it, it’ll become second nature.

Let’s look at the simplest app you can build with AngularJS:

Simple Example For Angular.JS

<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </head>
  <body>
    <div>
      <input type="text" ng-model="yourName" placeholder="Enter a name here">
      <h1>Hello, {{ yourName }}!</h1>
    </div>
  </body>
</html>

Output For The Above Code

In above text box what ever you type it will bind automatically in the header tag <h1></h1>

As you can see, you get bi-directional data binding without any work.

Bi-directional data binding means that if you change data on the back end, your changes will show up in your view automagically (actually, there’s no magic involved; we’ll get into how this works soon).

Similarly, if you change data in your view (e.g., by typing into a text box), it will automagically update your model.

So what did we do in our app?

ng-app
ng-model = yourName
{{ yourName }}

First, we used our most important (and most easily forgotten) term: the ng-app attribute on the tag. Without this tag, the AngularJS process does not start.

Second, we told AngularJS that we want to set up bi-directional data binding on the yourName model on the page.

Third, we told AngularJS to display the data yourName in the directive template called {{ yourName }}.

How AngularJS Extends HTML ?

AngularJS extends HTML with ng-directives.

The ng-app directive defines an AngularJS application.

The ng-model directive binds element values (like the value of an input field) to the application.

The ng-bind directive binds application data to the HTML view.

Example Code:

<!DOCTYPE html>
<html>
<body>

<!-- Angular Directive Starts -->
<div ng-app="">

<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p> <!-- Here ng-model binds the value of Input Filed -->
<p ng-bind="name"></p> <!-- Here binds application variable name to the innerHTML of a paragraph. -->

</div>

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

</body>
</html>

Above Code Explanation

AngularJS starts automatically when the web page has loaded.

The ng-app directive tells AngularJS that the

element is the "owner" of an AngularJS application.

The ng-model directive binds the value of the input field to the application variable name.

The ng-bind directive binds application variable name to the innerHTML of a paragraph.

Note:

Suppose,If you remove the ng-app directive, HTML will display the expression as it is, without solving it.

About Angular Js

What is Angular.js?

AngularJS is an open-source web application framework. It is a structural framework for dynamic web apps.

It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.

Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

AngularJS is a MVC framework that defines numerous concepts to properly organize your web application.

Your application is defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML.

It also encapsulates the behavior of your application in controllers which are instanciated thanks to dependency injection.

AngularJS helps you structure and test your Javascript code very easily.

Finally, utility code can easily be factorized into services that can be injected in your controllers.

Some Main reasons for using Angular.js
1. MVC done right
2. A declarative user interface.
3.Write less code
4.DOM manipulations where they belong
5.Service providers where they belong
6.Context aware communication
7.Unit testing ready

Video Tutorial for What is Angular.js

https://www.youtube.com/watch?v=j1UmYUeqWuY

About Angular.js - Part 3

How to use Angular.js Expressions,Numbers,Strings,Objects and Arrays

In Angular.js all Numbers,Strings,Object and Arrays are exactly similar to java script.

Angular.js Expressions

AngularJS expressions are written inside double braces: {{ expression }}.

AngularJS expressions binds data to HTML the same way as the ng-bind directive.

AngularJS will "output" data exactly where the expression is written.

AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

In each section i entered examples for both {{ expression }} and ng-bing.

AngularJS Numbers

AngularJS numbers are like JavaScript numbers:

Example Using expression:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>

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

</body>
</html>

Output:

Total in dollar : 5

Same example using ng-bind:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>

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

</body>
</html>

OutPut:

Total in dollar:5

AngularJS Strings

AngularJS strings are like JavaScript strings:

Example Using expression:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="firstName='manish';lastName='tiwari'">

<p>The full name is: {{ firstName + " " + lastName }}</p>

</div>

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

</body>
</html>

Output :

The full name is: manish tiwari

Same example using ng-bind:

<!DOCTYPE html>
<html>
<body>

<div ng-app="" ng-init="firstName='manish';lastName='tiwari'">

<p>The full name is: <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

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

</body>
</html>

Output :

The full name is: manish tiwari

AngularJS Objects

AngularJS objects are like JavaScript objects:

<!DOCTYPE html>
<html>

<body>

<div ng-app="" ng-init="person={firstName:'manish',lastName:'tiwari'}">

<p>The name is {{ person.lastName }}</p>

</div>

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

</body>
</html>

Output:

The name is tiwari

Same example using ng-bind:

<!DOCTYPE html>
<html>

<body>

<div ng-app="" ng-init="person={firstName:'manish',lastName:'tiwari'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

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

</body>
</html>

Output:

The name is tiwari

AngularJS Arrays

AngularJS arrays are like JavaScript arrays:

Example Using Expressions:

<!DOCTYPE html>
<html>

<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

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

</body>
</html>

Output:

The third result is 19

Same example using ng-bind:

<!DOCTYPE html>
<html>

<body>

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

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

</body>
</html>

Output:

The third result is 19

Discuss about Providers,Factors,Services,Constants & Values in Angular.js?

Providers
A provider is the most sophisticated method of all the providers. It allows you to have a complex creation function and configuration options. A provider is actually a configurable factory.

var app = angular.module('myModule',[]);
app.provider("myProvider", function() {
this.value = "My Value";
this.setValue = function(newValue) {
this.value = newValue;
};
this.$get = function() {
return this.value;
};
});
app.config(function(myProviderProvider) { // ADDED config section
// Note the extra "Provider" suffix
myProviderProvider.setValue("New Value");
});

Services

A service is an injectable constructor. If you want you can specify the dependencies that you need in the function. A service is a singleton and will only be created once by AngularJS.

app.service("myProvider", function() {
this.getValue = function() {
return "My Value";
};
});

Factories
A factory is an injectable function. A factory is a lot like a service in the sense that it is a singleton and dependencies can be specified in the function. The difference between a factory and a service is that a factory injects a plain function so AngularJS will call the function and a service injects a constructor.

app.factory("myProvider", function() {
return "My Value";
});

Value
A value is nothing more than a simple injectable value. The value can be a string, number but also a function.

var app = angular.module('myModule',[]);
app.value("Value1", "First Value");
app.value("Value2", "Second Value");

Constants

A constant can be injected everywhere. The value of a constant can never be changed.

var app = angular.module('myModule',[]);

app.constant("Constant1", "First Constant Value");
app.constant("Constant2", "Second Constant Value");

Video Tutorial

https://www.youtube.com/watch?v=jpT8vn5AhpY

Small Discussion about Raphael.js

What is Raphael?

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.

Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics.

This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later.

Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël is used by first creating an instance of the Raphaël object, which manages the creation of the canvas.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

Why use Raphael.js?

It is also possible to create animations using HTML5 Canvas. HTML5 Canvas uses bitmap graphics and excels at processing complicated animations like flying past stars in outer space.

In contrast, Raphael.js uses SVG vector images and is designed to seamlessly integrate with on page events such as clicking, hovering, and dragging. Moreover, Raphael.js provides great legacy browser support (including IE7 and IE8).

How to start?

You can simply include raphael.js file in html and you will start use.

For example:

<script type="text/javascript" src = "https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>

Full HTML Example Code

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Raphaël Simple Example</title>    
   <script type="text/javascript" src = "https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js"></script>
  </head>
  <body>

    <!-- the html element where to put the paper -->
    <div id="paper1"></div>

    <!-- a script that create's a paper and a rectangle -->
    <script type="text/javascript">
    var paper = Raphael("paper1", 500,500);
    var rect1 = paper.rect(20,30,100,12).attr({fill: "orange"});
    </script>

  </body>
</html>

Video Tutorial

https://www.youtube.com/watch?v=IPy77zMsd0Y

Small Discussion About Montage JS

What is Montage Js?

MontageJS is an open-source JavaScript framework for building scalable single-page applications. Its aim is to simplify the development and maintainability of expressive HTML5 applications by employing many of the foundations of proven native application frameworks.

MontageJS is a modern frontend HTML5 framework that supports creating single-page applications—fast. MontageJS uses time-tested design patterns and software principles, allowing you to easily create a modular architecture for your projects and deliver a high-quality user experience.

This allows designers and developers to work collaboratively and quickly. MontageJS is easy to learn because it is closely aligned with the underlying design of the Web, complementing existing standards.

Montage builds on ECMAScript 5, HTML5, and the CommonJS module system popularized by Node.js. It provides the functionality to build graphical user interfaces providing access to both a set of opinionated UI components as well as standard DOM interface components.

Montage also comes with a command line tool that translates a developer-optimized experience into a user-optimized experience called Mop

Requirements for Montage JS

1)Node.js and npm. MontageJS application development depends on npm, which is distributed with Node.js.
2)A recent stable release of Chrome, Safari or Firefox. MontageJS is intended to leverage the evolving web platform of modern browsers.

Features

1)Build engaging applications
2)Work faster together
3)Iterate quickly with modular design
4)Experience instant feedback
5)Collaborate with GitHub
6)Leverage MontageJS

What is Montagejs Video tutorial

https://www.youtube.com/watch?v=CeuG2zptrtM&list=UUKzsAXNDHm25VtXiWVYe8PA

Overview About Mustache.js

What is Mustache.js?

Mustache is an open source logic-less template system developed for languages such as JavaScript, Ruby, Python, PHP, and Java.

Mustache provides templates and views as the basis for creating dynamic templates.

The main principles were:

logic-less: no explicit control flow statements, all control driven by data.
strong "separating logic from presentation": it is impossible to embed application logic in the Mustache templates.

Why mustache.js?
Mustache is a library that allows you to read in JSON formatted data and display it using templates you design with JavaScript. There are lots of similar libraries, such as underscore.js, handlebars.js, and dust.js. So why did I choose mustache?

I picked mustache because I wanted something simple. Some of the other libraries provide more functionality, but I didn’t need complexity. I needed to spend time building the site, not learning something new. And that’s the great thing about mustache.js—if you know JSON and a bit of JavaScript, it’s a cinch to implement.

Mustache is used mainly for mobile and web applications.

Refer More at : http://mustache.github.io/

Video Tutorial for Mustache.js

https://www.youtube.com/watch?v=X8wh6_rdqi0

Overview About Backbone.js

What is Backbone.js?

Backbone.js is a JavaScript library with a restful JSON interface and is based on the model–view–presenter (MVP) application design paradigm.

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Backbone.js is a JavaScript library that runs in the browser. We use it to structure client-side applications – those that run in a web browser.

With Backbone, you represent your data as Models, which can be created, validated, destroyed, and saved to the server. Whenever a UI action causes an attribute of a model to change, the model triggers a "change" event; all the Views that display the model's state can be notified of the change, so that they are able to respond accordingly, re-rendering themselves with the new information.

Backbone.js is a lightweight JavaScript library that adds structure to your client-side code. It makes it easy to manage and decouple concerns in your application, leaving you with code that is more maintainable in the long term.

Developers commonly use libraries like Backbone.js to create single-page applications (SPAs). SPAs are web applications that load into the browser and then react to data changes on the client side without requiring complete page refreshes from the server.

When Do I Need A JavaScript MVC Framework?
When building a single-page application using JavaScript, whether it involves a complex user interface or is simply trying to reduce the number of HTTP requests required for new Views, you will likely find yourself inventing many of the pieces that make up an MV* framework.

Why Consider Backbone.js?
Backbone provides a minimal set of data-structuring (Models, Collections) and user interface (Views, URLs) primitives that are helpful when building dynamic applications using JavaScript. It’s not opinionated, meaning you have the freedom and flexibility to build the best experience for your web application how you see fit. You can either use the prescribed architecture it offers out of the box or extend it to meet your requirements.

Refer More at : http://backbonejs.org/

Video Tutorial for What is Backbone.js

https://www.youtube.com/watch?v=7XcbXmbrub8

About Angular.JS - Part 2

How to Start Angular.js & How to Extend html in Angular.js?

How to Start Angular.js?

Simple Example For Angular.JS

How AngularJS Extends HTML ?

Note:

Your comment on this post:

Related Articles

Video Tutorial for What is Angular.js

Angular.js Expressions

AngularJS Numbers

Output:

AngularJS Strings

AngularJS Objects

AngularJS Arrays

What is Raphael?

Why use Raphael.js?

How to start?

Video Tutorial

What is Montage Js?

Features

What is Montagejs Video tutorial

Video Tutorial for Mustache.js