Page 3 of 3

Hello world in angular


Guys,

Today we are going to learning Hello world in Angularjs .

AngularJS, a JavaScript M-V-W (Model-View-What ever) framework developed by a Googler and supported by Google.
if you are using jquery in your application , Angular will amaze you. We are writing very less code in jquery , angular will minify it again !!

Angularjs is giving amazing support to AJAX and we can make a very interactive website with angularjs.

Angular can be defined as a client side javascript framework adding intractivity to HTML. As i mention on top angular is MVW framework
which means ,model view and what ever. There are many software architecture patterns like MVC,MVP (Model View-presenter).

But angular doesn’t care about software architecture . A basic concept of MVW is that all definitions are associated with a named Module.
Angular come with a rich set of APIs to defined and this modules can be linked together by dependency injection.

Hello world in Angular js

let us try a simple hello world in angular js

in order to write angular js in our application we need to include angular js in our HTML page,
We can download and include or we can directily include from CDN

Here i am including


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.16/angular.min.js"></script>
<div  ng-app>  
  Write some text in textbox:
    <input type="text" ng-model="text" />
 
    <h1>Hello {{ text}}</h1>
</div>

Note that we didn’t write a single line of JavaScript and still this example works like a charm! Live example

Write some text in textbox:

Hello {{ text}}

Let us check step by step

Here i had included “ng-app” after. This tell angular that , angular need to monitor this section if we want angular to monitor one part of our application we can wrap with a div and we can write “ng-app” there. So angular will only monitor that part.

Now we defined ng-model=”text” in text box ng-model bind the state with model value.if we made any changes in the
textbox it will reflect {{text}}.

This is twoway binding. Angular will always keep an eye in ng-model defined and when ever it is changing ,
it will reflect on the ng-model value in double curly braces. .

This is a simple hello world application in angularjs

1,451 total views, no views today

Simple form submit in angularjs with php


Guys,

Today we are going to learning Angularjs, just try out What I found, an easier and simple way to write simple form submit in angularjs with php.

angularjs_PHP_form_submission

angular js with php form submission

We can make a HTML form to submit and save to database,

Here we are going to include 2 js files; one is Angularjs library and another one formjs.js which we will be using in writing controller of our form.

Let us dig deep into the form

  • We will be adding ng-app=”formExample” after the html tag -ng-app tells the angular, this block needs to be watched by the angular module.
  • After that we need to add the controller to form tag like ng-controller=”formCtrl”
    – we are going to define formCtrl in formjs.js to tell what are the action need to do with that form
  • Lastly we will add ng-click=”formsubmit(userForm.$valid)”
    On clicking the button, it will go to formsubmit function and we will pass the validation rules as parameters. We will use native $valid function to validate the form.

Sample HTML page – index.html page

<!DOCTYPE html>
<html ng-app="formExample">
    <head>
        <title>simple form with AngualrJS</title>
        <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
        <script src="js/angular.js" ></script>
        <script src="js/formjs.js"></script>
    </head> 

    <body>

        <div ng-controller="formCtrl">
            <form  name="userForm"  class="well form-search"   >
                
                <input type="text" ng-model="name" class="input-medium search-query" placeholder="Name" required >
                <input type="email" ng-model="email" class="input-medium search-query" placeholder="Email" required >
                <input type="text" ng-model="message" class="input-medium search-query" placeholder="Message" required >
                <button type="submit" class="btn" ng-click="formsubmit(userForm.$valid)"  ng-disabled="userForm.$invalid">Submit </button>
		
            </form>
            <pre ng-model="result">
                {{result}}
            </pre>
        </div>
    </body>

</html>

Now we will have a look on the javascript (formjs.js) file

  • First we are going to define the module as “formExample”.(We have already included in html as mentioned above).
  • Next to that we will define our controller with two dependency, ‘$scope’ and ‘$http’. $scope is for current scope and $http for ajax submission.
  • Later we will define formsubmit function and we will pass the validation status as parameter.
  • Now we will fetch all the values from the form and validate, on successful validation it is send to submit.php as json data. If form validation fails, it will show an alert message.

javascript file
formjs.js

<pre class="lang:default decode:true " title="formjs.js" >


/**
 * @filesource : formjs.js
 * @author : Shabeeb  <mail@shabeebk.com>
 * @abstract : controller fo HTML page
 * @package sample file 
 * @copyright (c) 2014, Shabeeb
 * shabeebk.com/blog
 * 
 *  */



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


app.controller("formCtrl", ['$scope', '$http', function($scope, $http) {
        $scope.url = 'submit.php';

        $scope.formsubmit = function(isValid) {


            if (isValid) {
              

                $http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message}).
                        success(function(data, status) {
                            console.log(data);
                            $scope.status = status;
                            $scope.data = data;
                            $scope.result = data; 
                        })
            }else{
                
                  alert('Form is not valid');
            }

        }

    }]);</pre> 

In submit.php page we are going to retrieve the json data and decode using it json_decode.
For that we can use the below code:

$post_date = file_get_contents(“php://input”);
$data = json_decode($post_date);

Below is the query to save data to database .
Here I am just printing all the values which we will get from the form for illustration.
php submission form

submit.php

<?php
/**
 * @filesource : submit.php
 * @author : Shabeeb  <mail@shabeeb.com>
 * @abstract : simple submission php form
 * @package sample file 
 * @copyright (c) 2014, Shabeeb
 * 
 * 
 *  */

$post_date = file_get_contents("php://input");
$data = json_decode($post_date);


//saving to database
//save query

//now i am just printing the values
echo "Name : ".$data->name."n";
echo "Email : ".$data->email."n";
echo "Message : ".$data->message."n";



?>

Download files

Demo

Enjoy your Coding with Coffee 😉

17,133 total views, 1 views today

Initiate git on server

How to initiate git through ssh

step 1 : login into ssh

step 2 : create a folder using mkdir commend and change to that folder

step 3 : write below comment to initate as a master branch

git init –bare

step 4 : change window.pack to 0

git config pack.window 0

step 5 : clone to local machine using

git clone username@host.com:/home/folder name(if needed)

step 5 : make changes

create a read me file and commit

git add .

git commit -am “intial commit ”

step 6 : push server

git push origin master

(before that make sure you take a pull from server git pull origin master)

 

step 7 :

To auto update in server

go to git_folder/hooks/post-update.sample and rename to post-update

and the past this code (change the folder name to targeted folder)

cd ~/public_html/folder|| exit
unset GIT_DIR
git pull origin master
exec git-update-server-info

 

enjoy coding

No views yet

© 2020 shabeeb Blog

Theme by Anders NorénUp ↑