As we discussed in the previous session about creating service in Angularjs which means wiring objects together to use dependency injection. For this session go through below links.

Now using ng-Controller how to create an angular page? Let’s step into the example for better idea. Creating JavaScript file as AngularformsApp.js

var angularFormApp = angular.module('angularFormApp', [""]);
angularFormApp.controller('helloController',['$scope', function($scope){
    $scope.welcome='hi welcome to Angularjs coding';
}]);

In this file need to create Angular module,’angularFormApp’ to add controller’s constructor function to module using
.controller method. Now controller function will be created out of the global scope, Now displaying the welcome message in the html page. Let’s check it in the below html code.

<!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/AngularformsApp.js"></script>
</head>
<body class="container" ng-controller="helloController">
  <h1>Angular Demo Page</h1>
  <p>  {{ welcome}} </p>
</body>
</html>

Now we will check another example to work with angularjs forms using ng-controller constructor methods. Let’s create a sample demo from and post the values to server, Here I am using codeigniter as backend framework; if you are not familiar with codeigniter please go through the sample articles below. You can get idea about creating model, view and Controllers.

<div class="bs-example" ng-controller="regController”>
    <form class="form-horizontal"  ng-submit="submitForm()">
        <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="user.firstname">
                
            </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" ng-model="user.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" ng-model="user.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" ng-model="user.password">
            </div>
        </div>
       
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">SignUp</button>
                <pre>{{message}}</pre>
            </div>
        </div>
        </div>
   </form>
</div>

You have an idea to create controller constructor method to post the form data using angular module.

[/sociallocker]

var angularFormApp = angular.module('angularFormApp',[]);
angularFormApp.controller('regController',['$scope','$http',
function Formcontroller($scope,$http)
{
     $scope.user = {};
$scope.submitForm=function()
{
       $http({
        method:'post',
        url:'http://localhost:81/Codeigniter/index.php/welcome/add',
        data : $scope.user, //forms user object
        headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
    }).success(function (data)
    {
            $scope.message=data;
    });
};
}]);

[sociallocker]

Now we will create codeigniter controller and model functions to insert the Form data to mysql database table.

<?php   
if (!defined('BASEPATH')) exit('No direct script access allowed');
?>
<?php
class Welcome extends CI_Controller {
	public function __construct()
	{
	//Core controller constructor
	parent::__construct();
	$this->load->model('ektreemodel');
	
	}
public function add()
{
    $request= json_decode(file_get_contents('php://input'), TRUE);
    $data=$this->ektreemodel->insert_form($request);
     
     if($data)
      {
         echo "success";
      }else{
         echo "failure";
      }
       
}
}
?>

Now check the model file, how the data is inserted to database table using codeigniter.

<?php
class Ektreemodel extends CI_Model
{
public function insert_form($request)
 {
    $insertStatus=$this->db->insert('registration',array('firstName'=>$request['firstname'],'lastname'=>$request['lastname'],'emailid'=>$request['email'],'password'=>$request['password']));
    return $insertStatus;
 }
}
?>

Thanks for reading this article.