Lecture 8: Angular JS, Features of Angular JS, Angular App terminology, Configuration, Filter, Directives, Data Provider or Services, The application architecture



Angular JS

- Angular JS is a framework. - Unlike a library, a framework uses our code. In case of a library, we use codes of the library. - framework is a structure. You have to write your codes in the structure defined by the framework. - Apart from providing the structure, a framework might also provide utility functions as the libraries do.

Lets start with a feature of AngularJS - Data Binding
<html >
 <body ng-app>
  <h1>Hello {{ name }}</h1>
  <input ng-model="name" type="text" placeholder="Type your name">
  <script src="https://ajax.googleapis.com/ajax/libs/an…;
 </body>
</html>
- Anything in between {{ and }} is evaluated as javaScript expressions. It's like the console. - ng-model directive binds the attribute "name" to the input field in above example - When the value of a model changes in the client-side, it is automatically reflected in the view.
<html ><body>
<div ng-app="dataBindingExample" ng-controller="BindController">
    x = {{x+10}}
    <button ng-click="changeX()">Change</button>
  </div>
  <script src="angular.js"></script>
  <script>
  (function(angular){
    angular.module('dataBindingExample', [])
     .controller('BindController',["$scope",
      function myController($scope){
        $scope.x = 3;
        $scope.changeX=function(){
          $scope.x = 5;//model changed in controller
        };
      }
         ]);
   })(window.angular);
  </script></body></html>


Angular App terminology

-Angular App is a module View figure 1

Configuration

-configure your routes, constants, API keys etc
var myApp = angular.module('demoApp', []);

myApp.config(function($routeProvider) { $routeProvider.when('/', { controller: 'WelcomeController', template: 'views/welcome.html' }) .when('/movies',{ controller: 'MoviesController', template: 'views/movies.html' }) .otherwise({redirectTo:'/'}) }) .config(function(ConnectionProvider) { ConnectionProvider.setApiKey('SOME_API_KEY'); });


Filter

- Filter provides a way to format a data. Use | (pipes) to use a filter.
<body data-ng-app="filterExample" data-ng-controller="filterController">
  <input type="text" data-ng-model="nameText"/>
  <ul>
    <li data-ng-repeat="name in names|filter:nameText|orderBy:name:true">
      {{name|uppercase}}
    </li>
  </ul>

//continued in next page............


Types of filters

- currency - date - filter - json - lowercase - number - orderBy - uppercase
//...continued from previous page
  <script src="angular.js"></script>
  <script>
    (function(angular){
      var filEx = angular.module('filterExample', []);
      filEx.controller('filterController',["$scope","$filter",
      function($scope,$filter){
        var names=["aru", "aba", "aakasah", "gun"];
        console.log($filter('orderBy')(names,"",true));
        $scope.names = names;
      }]);
    })(window.angular);
  </script></body>
you can also make your own filter

Directives

- Directives adds extra functionalities in an HTML element - They are custom HTML Elements or Attributes - A directive can be used to create new kind of input or output elements - ng-app,ng-model,ng-hide,ng-if ....... are angular directives - Angular also modifies default behaviour of some existing HTML tags - More on Angular directives at https://docs.angularjs.org/api/ng/direct… Your Own Directives
<body data-ng-app="directiveExample">
  <my-directive></my-directive>
  <script src="angular.js"></script>
  <script>
    (function(angular){
      var dirEg = angular.module('directiveExample', []);
        dirEg.directive('myDirective', function() {
          return{
            restrict: 'EAC',
            replace: true,
            template: '<a href="http://naya.com.np">Naya</a&g…;
          };
        });
    })(window.angular);
  </script>
</body>


Data Provider or Services

- Services are used to provide data to multiple controllers. Controllers are created and destroyed when routes(view) change. Factories and Services are not destroyed during the app lifetime - Five type of data Services Factory Service constant value provider E.g. : $http, $location, $filter, $swipe, $httpProvider For more https://docs.angularjs.org/api/ng/servic… Example: Factory
<html>
  <body data-ng-app="factoryExample" data-ng-controller="factoryController">
    <ul>
      <li data-ng-repeat="name in names">{{name}}</li>
    </ul>
    <script src="angular.js"></script>
    <script>
      (function(angular){
        var facEx = angular.module('factoryExample', []);
        facEx.controller('factoryController',["$scope","$filter","namesFactory",
        function($scope,$filter,namesFactory){
          $scope.names = namesFactory.getNamesReverseOrder();
        }]);
//continued in next slide.......... and ignore this script end tag</script>
//.....continued from previous slide
        facEx.factory('namesFactory', ["$filter",
        function($filter){
          var fac={};
          var names=["aru", "aba", "aakasah", "gun"];
//in real app, this data would come from ajax call or from localstorage
          fac.getNamesReverseOrder = function(){
            return($filter('orderBy')(names,"",true));
          };
          return fac;
        }]);
      })(window.angular);
    </script>
  </body>
</html>
So how are those connected????? View figure 2

The application architecture

ref: http://www.codeproject.com/Articles/8697…