We can create the user control in angular js like given below
Step 1: Create the basic HTML User control design like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<!--<link href="../../Style/bootstrap.min.css" rel="stylesheet" />-->
</head>
<body>
<div>
<fieldset style="width:400px">
<legend>
Login Form
</legend>
UserName : <input type="text" name="txtUserName" value=" " /> <br /><br />
Password : <input type="password" name="txtPaassword" /><br /><br />
<button>Login</button>
</fieldset>
</div>
</body>
</html>
Step 2: Now create the custom angularJs directive i.e my-Widget and Call in Html form as given below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="../../Scripts/angular.min.js"></script>
<script>
var app = angular.module("MyApp", []);
app.directive("myWidget",function () {
return {
restrict: "E",
templateUrl:"../Directive/MyLogin.html"
};
});
</script>
</head>
<body ng-app="MyApp">
<p>This is the first UserControl</p>
<my-Widget></my-Widget>
<p>This is the Second UserControl</p>
<my-Widget></my-Widget>
</body>
</html>
Summary:
Here we saw that how to create the custom directive and use as reusable component in AngularJs.
Chandradev's Blog 