Basic AngularJS Data Binding

by Javascript Specialist November 15, 2014 07:38
The code below demonstrate different ways data can be write and read
  1. $scope.d is the variable that can be modified and save to the database
  2. $scope.d is set to 'Programmer Name'
  3. $scope.d is binded to the input element using ng-model directive. Whatever you type there is save into $scope.d
  4. $scope.d can be displayed using the ng-bind directive
  5. or $scope.d can be displayed using the curly brackets, {{d}}
<script>
function manageData($scope) {
$scope.d='Programmer Name';
$scope.greet=function () {
alert('Hello '+$scope.d);
}
}
</script>
<body ng-app>
<div ng-controller='manageData'>
<input ng-model='d' /><Br>
<span ng-bind='d'></span><br>
or<br>
{{d}}<br>
<input type='button' ng-click='greet()' value='Greet AngularJS Student' />
</div>
</body>

Learn AngularJS in 30 minutes

by Javascript Specialist August 19, 2014 20:57

AngularJS | Tutorial

Building a generic Web Services functions to manage data using AngularJS Factory

by Javascript Specialist August 24, 2014 02:32
As per below, factory uses the $http services to communicate with the http servers. Then any controller can call this factory to manage data.
//non minifyable myApp.factory("dataService",  function ($http) {
myApp.factory("dataService", ["$http", function ($http) {
return {
getItems: function (url, p) {
return $http.get(url, {params: p})
},
addItem: function (url, item) {
return $http({
url: url,
method: 'POST',
data: item
});
},
deleteById: function (url, id) {
return $http({
url: url + "/" + id
});
},
updateItem: function (url, item) {
return $http( {
url: url,
method: 'PUT',
data: item
});
}
};
}]);

//To call this factory from a controller, you could perform the following:

myApp.controller('WebSiteController', ["$scope", "dataService", function ($scope, $filter, dataService) {
dataService.getItems('http://z54.com/api/getWebsites', { order: "websiteName" })
.success(function (data) {
angular.copy(data, $scope.items);
})
.error(function (er) {
alert('An error has occurred: '+er.Message);
});
}]);

AngularJS | References | Tutorial

What is an AngularJS Factory

by Javascript Specialist August 21, 2014 18:08

A factory method can be called from the controller. This allows data to be shared between controllers. Most likely, a factory is used to manage data from a web service.

<html>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script>
var myApp=angular.module('myApp',[]);
myApp.factory('dataService',function() 
{
    var factory={};
    factory.getWebSite= function() { return 'F2j.com';}
    return factory;
});

myApp.controller('websites', function ($scope, dataService) {
    $scope.ws=dataService.getWebSite();
});
</script>
<body ng-app='myApp'>
<div ng-controller='websites'>
    <a href='{{ws}}'>{{ws}}</a>
</div>
</body>
</html>

AngularJS | Tutorial