<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp">
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<a href="#!blue">Blue</a>
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider)
{
$routeProvider
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});
</script>
</body>
</html>
<html>
<head>
<title>Angular JS Custom Directives</title>
</head>
<body>
<h2>Custom Directive Example</h2>
<div ng-app = "mainApp" ng-controller = "EmployeeController">
<emp name = "Mangala"></emp><br/>
<emp name = "Shruti"></emp>
</div>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.directive('emp', function() {
var directive = {};
directive.restrict = 'E';
directive.template = "emp: <b>{{emp.name}}</b> , emp: <b>{{emp.empid}}</b>";
directive.scope = {
emp : "=name"
}
directive.compile = function(element, attributes) {
element.css("border", "1px solid #cccccc");
var linkFunction = function($scope, element, attributes) {
element.html("Employee: <b>"+$scope.emp.name +"</b> , Employee Id: <b>"+$scope.emp.empid+"</b><br/>");
element.css("background-color", "#ff00ff");
}
return linkFunction;
}
return directive;
});
mainApp.controller('EmployeeController', function($scope) {
$scope.Mangala = {};
$scope.Mangala.name = "Mangala";
$scope.Mangala.empid = 101;
$scope.Shruti = {};
$scope.Shruti.name = "Shruti";
$scope.Shruti.empid = 102;
});
</script>
</body>
</html>
