* Simple Example:
/* ******* Start *** *** /
"ajdemo.php"
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
/***** End *******/
* With Simple html and PHP:
/***** Start *******/
"ajForm.html"
<!DOCTYPE html>
<html ng-app="formExample">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<title>AngualrJS Form Submit</title>
<script src="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 >
<select ng-model="gender" required>
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<button type="submit" class="btn" ng-click="formsubmit(userForm.$valid)" ng-disabled="userForm.$invalid">Submit </button>
</form>
<pre ng-model="result">
{{result}}
</pre>
</div>
<H2>ng-repeat Directive</H2>
<div ng-app="" ng-init="names1=['Jani','Hege','Kai']">
<p>Looping with ng-repeat:</p>
<ul>
<li ng-repeat="x1 in names1">
{{ x1 }}
</li>
</ul>
</div>
<H2>The ng-repeat directive used on an array of objects: </H2>
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<w3-test-directive></w3-test-directive>
<!-- <script>
var app = angular.module("formExample", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script> -->
<!-- directive: w3-test-directive -->
</body>
</html>
"submit.php"
<?php
$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";
echo "Gender : ".$data->gender."\n";
?>
"formjs.js"
var app = angular.module('formExample', []);
app.controller("formCtrl", ['$scope', '$http', function($scope, $http) {
//$scope.name = "John Doe";
$scope.url = 'submit.php';
$scope.formsubmit = function(isValid) {
if (isValid) {
$http.post($scope.url, {"name": $scope.name, "email": $scope.email, "message": $scope.message, "gender":$scope.gender}).
success(function(data, status) {
//console.log(status);
//$scope.status = status;
//$scope.data = data;
$scope.result = data;
})
}else{
alert('Form is not valid');
}
}
}]);
/* ******* End *** *** /
* Custom filter in AngularJS:
/* ******* Start *** *** /
custom_filter.php
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x in names">
{{x | custFilter}}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('custFilter', function() {
return function(x) {
var i, c, txt = "";
x = x.split("")
for (i = 0; i < x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toLowerCase();
}
txt += c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'tAry',
'Kai'
];
});
</script>
<p>Make your own filters.</p>
<p>This filter, called "custFilter", will uppercase every other character.</p>
</body>
</html>
/* ******* End *** *** /
* Show Error in AngularJS:
/* ******* Start *** *** /
errAjs.php
<script>
angular.module('formExample', [])
.controller('FormController', ['$scope', function($scope) {
$scope.userType = 'guest';
}]);
</script>
<style>
.my-form {
transition:all linear 0.5s;
background: transparent;
}
.my-form.ng-invalid {
background: red;
}
</style>
<form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
<code>userType = {{userType}}</code><br>
<code>myForm.input.$valid = {{myForm.input.$valid}}</code><br>
<code>myForm.input.$error = {{myForm.input.$error}}</code><br>
<code>myForm.$valid = {{myForm.$valid}}</code><br>
<code>myForm.$error.required = {{!!myForm.$error.required}}</code><br>
</form>
/* ******* End *** *** /
* Use of Filter:
/* ******* Start *** *** /
filter.php
<!DOCTYPE html>
<html>
<title>Filter in Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<H2>Filter in Angular JS</H2>
<div ng-app="myApp" ng-controller="customersCtrl">
<p>The name is {{ name }}</p>
<p>The name is in uppercase {{ name | uppercase }}</p>
<p>The name is in lowercase {{ name | lowercase }}</p>
<h1>Price: {{ price | currency }}</h1>
<H2>Looping with objects: Order By DOB</H2>
<ul>
<li ng-repeat="x in names1 | orderBy:'dob'">
{{ x.name + ' | ' + x.country + ' | ' + x.dob }}
</li>
</ul>
<H2>We Filter on character here base on 's'</H2>
<ul>
<li ng-repeat="x in names1 | filter:'s'">
{{ x.name + ' | ' + x.country + ' | ' + x.dob }}
</li>
</ul>
<H2>Filter an Array Based on User Input</H2>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names1 | filter : test">
{{ x }}
</li>
</ul>
<H2>Sort an Array Based on User Input</H2>
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names1 | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
<H2>On Click Fucntion in AngularJS</H2>
<p><input type="button">
<ul>
<li ng-repeat="x in names1 | filter : test">
{{ x }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.name = 'Ethen Jeky';
$scope.test = 'Jani';
$scope.price = '100';
$scope.names1 = [
{name:'Jani',country:'Norway',dob:'1989-10-25'},
{name:'Carl',country:'Sweden',dob:'1987-09-25'},
{name:'Margareth',country:'England',dob:'1976-01-25'},
{name:'Hege',country:'Norway',dob:'1988-08-05'},
{name:'Joe',country:'Denmark',dob:'1982-04-07'},
{name:'Gustav',country:'Sweden',dob:'1976-06-12'},
{name:'Birgit',country:'Denmark',dob:'1991-07-16'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script>
</body>
</html>
/* ******* End *** *** /
* AngularJS with JSON
" angjs_with_json.php"
/* ******* Start *** *** /
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in myData">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.myData = response.data.records;
});
});
</script>
</body>
</html>
/* ******* End *** *** /
* Root Scope in AngularJS:
"rootscope.php"
/* ****** Start ******** /
<!DOCTYPE html>
<html ng-app="myApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is still:</p>
<h1>{{color}}</h1>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.color = 'blue';
});
app.controller('myCtrl', function($scope) {
$scope.color = "red";
});
</script>
<p>Notice that controller's color variable does not overwrite the rootScope's color value.</p>
</body>
</html>
/****** End ********/
* Location Service in Angular JS
/***** Start *******/
"service.php"
<!DOCTYPE html>
<html>
<title>Location Service in Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<h2>Location Service in Angular JS</h2>
<div ng-app="myApp" ng-controller="myCtrl">
<p>The url of this page is:</p>
<h3>{{myUrl}}</h3>
<h3>{{myWelcome}}</h3>
</div>
<p>This example uses the built-in $location service to get the absolute url of the page.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location,$http) {
$scope.myUrl = $location.absUrl();
$http.get("filter.php").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>
/***** End *******/
Comments
Post a Comment