Custom directive and scopes
•Download as PPTX, PDF•
0 likes•35 views
Custom Directive and Scopes in Angular JS
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Custom directive and scopes
Similar to Custom directive and scopes (20)
More from jagriti srivastava
More from jagriti srivastava (13)
Recently uploaded
Recently uploaded (20)
Custom directive and scopes
- 1. Custom Directives and Scopes JAGRITI SRIVASTAVA
- 2. Custom Directives Custom directives are used in AngularJS to extend the functionality of HTML. These are defined using directive function AngularJS provides support to create custom directives for following type of elements. Element directives − Directive activates when a matching element is encountered. Attribute − Directive activates when a matching attribute is encountered. CSS − Directive activates when a matching css style is encountered. Comment − Directive activates when a matching comment is encountered.
- 3. For custom directive follow these steps Define custom html tags Define custom directive to handle these tags <test-dir></test-dir> <div test-dir></div> <script> var app = angular.module("myApp", []); app.directive(“testDir", function() { return { restrict : "AE", template : "<h1>Made by a directive!</h1>" }; }); </script>
- 4. Invoking a custom Directive E for Element Name A for Attribute name C for Class M for Comment Eg: <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body ng-app="myApp"> <w3-test-directive></w3-test-directive> <div w3-test-directive></div>
- 5. <script> var app = angular.module("myApp", []); app.directive("w3TestDirective", function() { return { restrict : "AE", template : "<h1>Made by a directive!</h1>" }; }); </script> <p><strong>Note:</strong> By setting the <strong>restrict</strong> property to "A", only the HTML element with the "w3-test-directive" attribute has invoked the directive.</p> </body> </html>
- 6. Scopes The scope of Angular JS is the model It is a JavaScript object with properties and methods available for both the view and the controller It gives the execution context for expressions used in the application The three types of the scopes are Shared Inherited Isolated
- 7. Scopes All application have a $rootScope which is the scope created on the HTML element that contains the ng-app directive $rootScope is available in the entire application Each view has its own $scope (which is a child of $rootScope ), so whatever variables one view controller sets on its $scope variable, those variables are invisible to other controllers.
- 8. <html> <head> <title>Angular JS Forms</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = "mainApp" ng-controller = "shapeController"> <p>{{message}} <br/> {{type}} </p> <div ng-controller = "circleController"> <p>{{message}} <br/> {{type}} </p> </div> <div ng-controller = "squareController"> <p>{{message}} <br/> {{type}} </p> </div> </div> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></s cript> <script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); mainApp.controller("circleController", function($scope) { $scope.message = "In circle controller"; }); mainApp.controller("squareController", function($scope) { $scope.message = "In square controller"; $scope.type = "Square"; }); </script> </body> </html>
- 9. Services Services are javascript functions and are responsible to do a specific tasks only. Controllers, filters can call them as on requirement basis. Services are normally injected using dependency injection mechanism of AngularJS. AngularJS provides many inbuilt services for example, $https:, $route, $window, $location etc. Each service is responsible for a specific task for example, $https: is used to make ajax call to get the server data. $route is used to define the routing information and so on
- 10. Calling http service in a controller Creating script for the http service <div ng-app="myApp" ng-controller="myCtrl"> <p>Today's welcome message is:</p> <h1>{{myWelcome}}</h1> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get("welcome.htm").then(function (response) { $scope.myWelcome = response.data; }); }); </script>
- 11. Location service It returns the information about the location of the current webpage Keeps itself and URL in synchronization Modification done to $location is passed to URL Whenever URL changes $location is updated Eg: Defining Controller for $location <div ng-app="myApp" ng-controller="myCtrl"> <p>The url of this page is:</p> <h3>{{myUrl}}</h3> </div>
- 12. <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $location) { $scope.myUrl = $location.absUrl(); }); </script>