Continuation to Angularjs introduction, today we will discuss about template and angularjs directive function. What is a template? , yes template is nothing but html code, Which combines the information from controllers and model, here When user submit the request, controller will fetch the values using model and renders the dynamic values to view, and view will display in Template, which is visible to users. Now we will check how to create Angularjs views and display in templates. Now I am creating simple angular registration form. 

<div class="bs-example">
    <form class="form-horizontal">
        <div class="form-group">
            <label for="inputFirstname" class="control-label col-xs-2">First Name</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="inputFirstname" placeholder="FirstName" ng-model="firstname">
                <p ng-bind="firstname"></p>
            </div>
        </div>
         <div class="form-group">
            <label for="inputLastname" class="control-label col-xs-2">Last Name</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="inputLastname" placeholder="LastName">
            </div>
        </div>
        
        <div class="form-group">
            <label for="inputEmail" class="control-label col-xs-2">Email</label>
            <div class="col-xs-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">Password</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <label for="inputDob" class="control-label col-xs-2">Date Of Birth</label>
            <div class="col-xs-10">
                <input type="text" class="form-control" id="inputDob" placeholder="DOB">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">SignUp</button>
            </div>
        </div>
        </div>
   </form>
</div>

Now how to display above sign up form in template, now let’s create a Directive, what is directive in Angularjs?
Directives are markers on a data object model elements,some of the angular built in directives are ng-bind,ng-model,ng-class.
We can create our own directives in angularjs as app.js ,now let’s create a directive to display signup form in template.

var angularFormApp = angular.module('angularFormApp',[]);
angularFormApp.directive('angularForm',
    function () {
        return {
            restrict: 'E',
            templateUrl: 'app/signup.html'
        }
    });

Now finally we will create index.html page, which is called as template page, for now I am not adding any designs creating basic structure, let’s have look on it.

<!DOCTYPE html>
<html ng-app="angularFormApp">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/angular.min.js"></script>
    <script src="app/App.js"></script>
    
</head>
<body>
    <angular-Form />

</body>
</html>

Now we will see how to call controller functions in Angularjs, let’s see this topic in next sessions.
Thanks for reading this article.