AngularJS crash course - PrismoSkills

Table of Contents

AngularJS

Here is an angular hello-world program consisting of two files: 1 html and 1 javascript

Angular-Hello-World.html

<HTML>
<HEAD>
    <title>AngularJS crash course - PrismoSkills</title>
    <!-- Link Twitter Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <!-- Link Angular.JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <!-- Write your Angular.JS code in this file (shown below) -->
    <script type="text/JavaScript" src="my-angular.js"></script>
</HEAD>

<BODY> 
    <div ng-app="store">
        I am {{4+6}}
    </div>
</BODY>
</HTML>

my-angular.js

var moduleName = 'store';
var moduleDependencies = [];

/**
 * This line of code instructs angular to angularize any html element decorated with ng-app=moduleName
 */
var app = angular.module(moduleName, moduleDependencies);

Result:

I am {{4+6}}

What happened here?
In the JavaScript file, we created an angular module with the name 'store' (Don't worry about what a module is, for now)
Then the same name 'store' was used later in the html file as <div ng-app="store">
This binding tells AngularJS to pre-process the given html element before loading.
And due to this pre-processing, it was able to evaluate the AngularJS expression {{4+6}}
(Expressions in Angular are written under double curly braces, but more on that later.)

So the take away from the above code is to see how Angular can be bound to an html element.

Like us on Facebook to remain in touch
with the latest in technology and tutorials!

Got a thought to share or found a
bug in the code?
We'd love to hear from you:

Name:
Email:	(Your email is not shared with anybody)

Comment:

Facebook comments:

Site Owner: Sachin Goyal