Naya

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…