Why AngularJS?
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Controller
Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks or watching model changes.
Plain JavaScript
Unlike other frameworks, there is no need to inherit from proprietary types in order to wrap the model in accessors methods. Angular models are plain old JavaScript objects. This makes your code easy to test, maintain, reuse, and again free from boilerplate
The view component is constructed by Angular from this template:
index.html:
<div ng-app id="ng-app" class="main">
<h1>AngularJS Updates Tutorial</h1>
<div ng-controller="commentsController">
<input name="submitName" ng-model="comment.name" placeholder="Name" required/>
<textarea name="submitComment" ng-model="comment.msg" placeholder="What is your message?"></textarea>
<a href="javascript:void(0);" class="button" ng-click="addComment(comment)">POST</a>
<!-- Comments -->
<div ng-repeat="comment in comments">
<div class="updates">
<a href="javascript:void(0);" ng-click="deleteComment($index);" style='float:right'>Delete</a>
{{comment.name}}
<span style="float:right;">{{comment.timestamp}}</span>
<br/>
<p>{{comment.msg}}</p>
</div>
</div>
</div>
</div>CSS:
<style type="text/css">
* { padding:0px; margin:0px; }
body{font-family:arial}
textarea{border:solid 1px #333;width:520px;height:30px;font-family:arial;padding:5px;margin-bottom: 19px;}
input{border:solid 1px #333;width:520px;height:30px;font-family:arial;padding:5px;margin-bottom: 19px;}
.main{margin:0 auto;width:600px; text-align:left:}
.updates
{
padding:20px 10px 20px 10px ;
border-bottom:dashed 1px #999;
background-color:#f2f2f2;
}
.button
{
padding:10px;
float:right;
background-color:#2E4346;
color:#fff;
font-weight:bold;
text-decoration:none;
}
.updates a
{
color:#cc0000;
font-size:12px;
}
</style>Angular JS:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
function commentsController($scope, $http){
$http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
$http.get("index.php?action=getComments")
.success(function(data){ $scope.comments = data; });
$scope.addComment = function(comment){
if("undefined" != comment.msg){
$http({
method : "POST",
url : "index.php",
data : "action=add&msg="+comment.msg+"&name="+comment.name
}).success(function(data){
$scope.comments.unshift(data);
});
$scope.comment = "";
}
}
$scope.deleteComment = function(index){
$http({
method : "GET",
url : "index.php?action=delete&id="+$scope.comments[index].id,
}).success(function(data){
$scope.comments.splice(index,1);
});
}
}
</script>
Create Database and Table:
CREATE TABLE IF NOT EXISTS `comments` (
`comment_id` int(9) NOT NULL AUTO_INCREMENT,
`comments` text NOT NULL,
`name` text NOT NULL,
`timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`comment_id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1;This was all about to Submitting a form using Angular JS with PHP. I hope you like it, Keep reading our other programming blogs.
0 Comments