AngularJS Tutorial

AngularJS, the open source Javascript framework that uses Model-View-Controller(MVC) architecture, databinding, client-side templates and dependency injection for building web apps. It also used to develop smaller, light-weight web apps that are simple to create and easy to test and maintain.

Model View Controller (MVC)


The idea behind MVC is that you have clear separation between managing its data model, the application logic (controller, and the UserInterface(view).

The view gets data from the model . When a user interacts with the
application by clicking or typing, the controller responds by changing data in the model.
And finally, the model notifies the view that a change has occurred so that it can update it's view.
In Angular applications, the view is the Document Object Model(DOM), the controllers
are JavaScript classes, and the model data is stored in object properties

Now we will look at a basic Hello World program using AngularJS.

<html ng-app>
<head runat="server">
    <title>AngularJS</title>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
    <script type="text/javascript">
        function HelloController($scope) {
            $scope.Message = {text: 'Hello'};
        }
    </script>
</head>
<body>  
    <div ng-controller="HelloController">
    <p> {{Message.text}} World!! </p>
    </div>  
</body>
</html>

The first script tag is to add AngularJS to our HTML page. In second script tag i have written the function HelloController in which a object "Message" is created.

When you run the above code, The browser displays Hello World !! as output.


Read our Next Tutorial :  DataBinding in AngularJS


1 comment:

  1. This comment has been removed by a blog administrator.

    ReplyDelete