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 1Configuration
-configure your routes, constants, API keys etcvar 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…