How to create User Control in AngularJs using Custom Directive ?


UserControl

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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: