Search This Blog

2016-01-11

Angular JS Tutorial3: ng-controller,filter

The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern.

MVC components in angular:

•Model — Models are the properties of a scope; scopes are attached to the DOM where scope properties are accessed through bindings.

•View — The template (HTML with data bindings) that is rendered into the View.

•Controller — The ngController directive specifies a Controller class; the class contains business logic behind the application to decorate the scope with functions and values.

Filter selects a subset of items from array and returns it as a new array.

Example :

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
 <title>ng-controller,filter</title>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>
<body>
 <div ng-controller="mycontroller">
  {{mylanguage|uppercase}}
  <button ng-click=changelang()>Change Language to Bengali</button>
 </div>

 <script type="text/javascript">
  var application=angular.module('myapp',[]);//[] : use for referring other module
  application.controller('mycontroller',function($scope)
  {
   $scope.mylanguage='English';
   $scope.changelang=function(){
    $scope.mylanguage='Bengali';
   }
  }
  );
 </script>
</body>
</html>


Output:

No comments: