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.
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>