Translate

Wednesday, August 28, 2013

AngularJS tutorial for beginners (Introduction to angularjs)

What is AngularJS?
 AngularJS is an opensource javascript library built and maintained by google that helps us develop the front end (HTML/javascript/css) part of a web application in a declarative way.  As a developer I myself see  AngularJS as a higher level programming language for the client side.

The UI built using the angular framework applies MVC architecture at the client side. What I mean by that is if you build say the google search page using  AngularJS, then you will have a mvc application running in the client's browser that posts back to a webserver which itself may or may not implement mvc.


A simple example

I will show you a simple  AngularJS app that says hello world

Paste this into notepad and save the file as .html. Then open that file in chrome

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head>
    <title></title>
</head>
<body>
  
    <div ng-controller="TestCtrl">{{message}}</div>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script type="text/javascript">
        function TestCtrl($scope) {
            $scope.message= "Hello World";

        }
    </script>
</body>
</html

Things to note:

1>Inside the html tag notice the attribute ng-app. This declares the html tag as the root element of the application.
2>In the div has tag the attribute ng-controller tells the angular framework that this tag is associated with the controller TestCtrl (defined inside a script tag below)
3>The text {{message}}inside double curly braces is a property on the $scope object (defined below).
4>I am using google content delivery network to get the angular.min.js javascript file.
5>The function TestCtrl accepts a parameter $scope. This is a special parameter used by angular to pass data between controller and the view. You can set properties on this parameter which can be read in the view (HTML markup).

Check this out for a more advanced example on angularJS.


No comments:

Post a Comment

Comments will appear once they have been approved by the moderator