Create moduler, controller, service(factory) and directive in script tag.

Here we will see angular module, controller, service and directive. These all are important thing when you create your project using angular. AngularJs is a javascript framework. It can be added to an HTML page with script tag. AngularJs extends HTML attributes with Directives, and binds data to HTML with Expressions. We use the AngularJs for create web application because Angular has implements the MVC related pattern to seperate presentation, data and logic components. Angular brings traditionally server-side services, much of the burden on the server can be reduced.There are so many versions of available but here we will use AngularJs 1.6.6. It is perfect for single page applications(SPAs). It is very easy to learn and develop application using it. If you want to learn AngularJs then you must learn the AngularJs directives, expressions, filters, modules, and controllers. we hope you aware about HTML, CSS and JavaScript. because before start learning of AngularJs, you must know about it.So Let's start to create module, controller, service(factory) and directive in one script tag.

Modular, Controller, Service and Directive

First of all we have create one HTML page, In HTML page we must inject the name of module, controller and we create all things in HTML page in script tag. It's not necessary to create module, controller, service and directive in HTML script tag. you can create new files for all, if you want to create module then create module (.js) file, then create controller using module name in new (.js) file, then create service (.js) file using module name. A directive is not necessary to create while it is not usable.If we need to create directive then create (.js) file using module name. Now, Html Page is created and it's name is (Angular.html).

The HTML page is created then add starting script and ending script tag, In script tag we can write JavaScript code, So first create module with then name of "myApp" and store module name in variable app.we can create all the other files using app variable. In module you can inject third party packages or library name if you want to use third party libraries.

Modular

<script>
var app = angular.module('myApp',[' ']);
</script>

we have created module file, by module name (app) we will create controller by name of "myController" in same script tag. In controller you have to inject first and necessary thing is $scope global variable. In controller you must inject the service because controller call to service so it's important to to inject, if you call more than one service from one controller then all of that service are inject in controller

Controller

<script>
app.controller('myController',[ '$scope', '$http', 'myservice', function($scope, $http, myservice){
    myservice.getEmployee().then(function(response){     
    $scope.data = response;
   },function (error){
         alert(error);
  })
  .finally(function(){
   //....add your code
  });
}]);
</script>

Above, we have created controller and injected "$scope","$http","myservice" in controller function. we have called getEmployee() service function and after got the response we store that response in $scope.data variable and this variable you can bind in HTML page.We call the service function of getEmployees() so we have to create service by name of "myservice". In service file we must inject the "$http". Full form of HTTP is Hyper Text Transfer Protocol.Using this service we call to API by GET or POST Method, you can use any other methods also we get the response from API side then send it to controller. you can call factory to service.So using module name we will create service.

Service

<script>
app.factory("myservice", ['$http', function ($http)
        {
            var callAPI = 'http://localhost:50000/';
            var myserviceFactory = {};
            var _getEmployee = function ()
            {
                    return $http.get(callAPI + 'api/employee/GetAllEmployee').then
                    (function (response)
                {
                    return response;
                }, function (error)
                {
                    return (error);
                });
            };
            myserviceFactory .Getemployee = _Getemployee ;
            return myserviceFactory ;
        }]);
</script>

In above created service we have create one variable that is callAPI and this variable we define the API localhost server because our all API calls are call on this localhost then create myserviceFactory blank object because we will use that object bottom of service. after declaration we have created getEmployee() function and in this function we have call "GetAllEmployee" API by GET method. After call API service we have manage promises by then function if response id sucessfull then return successful response to controller but return any error then it go to Error function and return error.

We have created all the three basic of angular, now we will create "Directive" ("Creative") using module name, In this directive you can write your own code in particular place and if you want to use this directive in HTML page so you must write directive by this type . When you create directive then you have to must give the parameter to some fields like restrict, link, templateUrl, etc. It's not necessary to use this fields only, it is depends on you that what you want to do.Here also you can inject important things.

Directive

<script>
 app.directive("Creative", ['$http', function ($http)
 {
           return
          {    
            restrict: 'A', 
           templateUrl: 'views/home/common/creativeAnimate.html',
           link: function (scope, element, attrs)  
         {                             //.......add your code here.......       
          }

}
}]);
</script>

Final Code

<script>

//......Add Modular....

var app = angular.module('myApp',[' ']);

//...Add Controller....

app.controller('myController',[ '$scope', '$http', 'myservice', function($scope, $http, myservice){
    myservice.getEmployee().then(function(response){     
    $scope.data = response;
   },function (error){
         alert(error);
  })
  .finally(function(){
   //....add your code
  });
}]);

//......Add service(factory).........

app.factory("myservice", ['$http', function ($http)
        {
            var callAPI = 'http://localhost:50000/';
            var myserviceFactory = {};
            var _getEmployee = function ()
            {
                    return $http.get(callAPI + 'api/employee/GetAllEmployee').then
                    (function (response)
                {
                    return response;
                }, function (error)
                {
                    return (error);
                });
            };
            myserviceFactory .Getemployee = _Getemployee ;
            return myserviceFactory ;
        }]);

//....Create Directive....

 app.directive("Creative", ['$http', function ($http)
 {
           return
          {    
            restrict: 'A', 
           templateUrl: 'views/home/common/creativeAnimate.html',
           link: function (scope, element, attrs)  
         {                             //.......add your code here.......       
          }

}
}]);
</script>

We have created modular, controller, service and directive in single script tag.

Thanks,