Blogger news

Blogger templates

Tuesday, July 15, 2014

Introduction to AngularJS

Angular.js is an open-source JavaScript framework developed by Google. It gives JavaScript developers a highly-structured approach to developing rich, browser-based applications which leads to very high productivity. It is probably better to categorize it as one of  MV* frameworks , where 'M' represents Model, 'V' view and * can be either one of the below

* Controller
* Presenter
* ViewModel




AngularJS is based on the MVC pattern (Model View Control). Therefore AngularJS separates your RIA application into models, views and controllers. The views are specified using HTML + AngularJS's own template language. The models and controllers are specified via JavaScript objects and JavaScript functions.

Primary Components of Angular

  1. Controllers(JavaScript):- Controller is the central component of Angular applications.  In Angular everything starts with controller. Controller is an essential player in Angular application. Controllers contain both logic and state. Controller is nothing but a javascript code
  2. Views (HTML) :- Views are made up of bindings and directives. Controllers can communicate with one-way or two-way
  3. Services(JavaScript) :- Usually we used to write complex business logic in Service. Service is the place we used to connect to server.



I will create a "Hello World" app and explain each components. I am using WebStorm IDE to code. Those who are not familiar with WebStorm please go through below link
http://www.jetbrains.com/webstorm/quickstart/

Step 1
Create new project and names it as "AngularHelloWorld" and create folder structure as below



to get anguar.min.js go to https://code.angularjs.org/1.2.19/angular.min.js

Step 2

Modify "HelloWorld.html" with below code

<!DOCTYPE html>
<html ng-app="FirstModule">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../Scripts/AngularScripts/angular.min.js"></script>
    <script src="../Modules/HelloWorldModule.js"></script>
    <script src="../Controllers/HelloWorldController.js"></script>
</head>
<body ng-controller="FirstController">
<h1>{{hellomessage}}</h1>

</body>

</html>

View(html) should know about modules and controllers it is running. ng-app is the directive to inform html which module it is running. Syntax to create an Angular module is below. Copy and paste it to "HelloWorldModule.js"

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


Next view should know about controller. Copy paste below code to "HelloWorldController.js"

FirstModule.controller('FirstController',function($scope){
    $scope.hellomessage = "Hello AngularJS";

});

where FirstModule is the module we created before.  $scope (built-in angular service) is like a glue between view and controller. What ever the variables I added with $scope. is accessible from view with double angle brackets. In our example html  $scope.hellomessage from the view is accessed by {{hellomessage}}.  With double Angular bracket ( {{ }} ) we can access $scope items of controller.

I will describe each of these items in upcoming blogs.

If you quickly want to compare AngularJS and Knockout.js go to my blog on Knockout or AngularJS

2 comments:

Bhuvana Kandhan said...

Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.We are providing AngularJs training in velachery.
For more details: AngularJs training in velachery

Bhuvana said...

I accept there are numerous more pleasurable open doors ahead for people that took a gander at your site.Those guidelines additionally worked to become a good way to recognize that other people online have the identical fervor like mine to grasp great deal more around this condition.WE are providing AngularJs training in Velachery.
For more details:AngularJs training in Velachery

Post a Comment