Posts
33
Comments
186
Trackbacks
0
AngularJS - Basics
I have recently been learning AngularJS by myself through online documentation. No Wonder it is so popular, its just WOW.  It's sop much easier to work and not to worry about two-way binding. Angualr JS takes care of it automatically for us. You don't need any framework or installations to get started working with AngualrJS. 

It makes life so much easier building SPA(Single Page Applications). 

All you need to do to get up and running on Angular JS is - 
  • Download AngularJS library from Google official site and reference it from your page using Script tag or you can directly reference to the CDN location instead of downloading it. At the time of writing this post, the latest version currently Live was 1.4 with alpha testing on for 2.0 version.
  • Put ng-app tag inside the area in HTML which you want to be handled and controlled by AngualarJS. All this does is bootstrap Angualr and tells it to take the control of designated area. All the directives, controllers and template are evaluated and controlled by Angular. 
  • Go to the Scripts and create an Angular module using javascript. A module is abstraction which acts as a container for a related functionality. So all related directives and controllers belong to the module. You can have multiple module inside the application grouped by functionality. But,a page can be assigned to only single module. 
Syntax for creating module.

angular.module("moduleName",[]);

The first parameter is the name of the module. The second parameter is the dependencies on which this module depends. This is the Dependency Injection pattern of Angular. You provide the dependencies as a parameter to the constructor. This is also called constructor injection.

Once created you use this module to add controllers, filters or custom directives. 

You will typically mark either <html> or <body> tag with ng-app and supply the created module name to it for Angular to take control of that section of page.

<html>
<head>
<script data-require="angular.js@1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
</head>
<body  ng-app="moduleName">
{{2+3}}
</body>
</html>

the page when opened in browser would display 5. 

The expression inside the interpolation expression or template will get evaluated by Angular.

This is just very basic example of Angular and doesn't display all the capabilities of it. In coming days I'll cover few more posts about it.
posted on Sunday, June 14, 2015 2:02 PM Print
Comments
Gravatar
# Coding
Mark
6/15/2015 9:07 AM
I must admit that I have always been impressed by the coding activities, but when I got in the position to make contact with this environment, I realized that I will not succeed to reach that level of professionalism that I really want. I am actually deeply dissapointed. Mark
Gravatar
# re: AngularJS - Basics
london
2/7/2018 5:23 PM
Ideally you described it all, as I thought! www.londonescortsgroup.com

Post Comment

Title *
Name *
Email
Comment *  
Verification