Monday 6 June 2016

Detail information about controllers and there scopes in Angular JS

In this post we are going to see how to create a sample controller in angular js. 
Normally many of them saying angular is a MVVM pattern based library, it is not actually corrrect. angular is a MV* pattern based. i.e after Creating a application in MVC and use the angular js for  render the UI on template based. So to do this angular itself segregating the code in to three layer. Model , View , Controller.

View is a plain Html page.
Model is a Javascript object or array construct in application i.e in controller
Controller is a application logic which is used to render the UI.

Now we see how to create a controller in Angular js.
1. Add a Angular js library in the script tag.
2. bootstrap the application using the ng-app



var  app = angular.module('app',[]);
var mainController = app.controller('mainController'function ($scope) {

    $scope.Data = 12;


});


<html>
<head>
    <script src="scripts/angular.min.js" type="text/javascript"></script>
    <script src="scripts/angular-route.min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="mainController">
            <h1>{{Data}}</h1>
            <br />          
        </div>
    </div>
</body>
</html>




From this post you can understand how to create a controller and scopes in angular js






No comments:

Post a Comment