How to create User Control in AngularJs using Custom Directive ?


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>
	<meta charset="utf-8" />
    <!--<link href="../../Style/bootstrap.min.css" rel="stylesheet" />-->
        <fieldset style="width:400px">
                Login Form

            UserName : <input type="text" name="txtUserName" value=" " /> <br /><br />
            Password : <input type="password" name="txtPaassword" /><br /><br />

Step 2: Now create the custom angularJs directive i.e my-Widget and Call in Html form as given below

<!DOCTYPE html>
    <meta charset="utf-8" />
    <script src="../../Scripts/angular.min.js"></script>

        var app = angular.module("MyApp", []);
        app.directive("myWidget",function () {

            return {
                restrict: "E",
<body ng-app="MyApp">
    <p>This is the first UserControl</p>

    <p>This is the Second UserControl</p>

Here we saw that how to create the custom directive and use as reusable component in AngularJs.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.