This is the Lesson #11 in the "AngularJS: From 0 To 100" learning articles written for AngularJS Beginners. This lessons start at Lesson #1 , if you wish to take a look at them.
<<<< PREVIOUS LESSON NEXT LESSON >>>>
We're using the "Brackets" open source Editor , which supports AngularJS Apps . You can see the 5 minutes tutorial about Brackets in this post.
Our AngularJS App will be shown this way :
How to create your own Custom AngularJS $service
First of all, let's declare our Angular App by referencing the AngularJS framework and Module:
<body data-ng-controller="SwitcherCtl as TabsCtl"> <div data-ng-switch on="TabsCtl.View"> <div data-ng-switch-when="WebFormView"></div><div id="controls" data-ng-switch-when="SelectedItemView"></div></div></body></html>
Then add the corresponding Controller at the javascript Controllers file:
(copy-paste):
angular.module('MusicApp', [])
.controller('SwitcherCtl', [function() {
this.View = 'WebFormView';
this.open = function(tab) {
this.View = tab;
};
}])
Then we add at the first View the code to show the Album's list, and to input the selected Album's user's choice, as we saw at the Lesson #9 :
Take care to add to the former HTML5 from Lesson #9, the following code to be performed when the "Send" submit button is clicked:
Also, append a second Controller to the javascript file, to be bound to the "WebFormView" :
.controller('MusicController', [ '$scope', function ($scope) {
var albums =
[
{id:111,img:"Nocturnal.jpg",name:"Nocturnal Beats",price:"12.50"},
{id:112,img:"Facts.jpg",name:"The Facts And The Dreams",price:"11.20"},
{id:113,img:"Voices.jpg",name:"Voices From The Dust Bowl",price:"13.70"},
{id:114,img:"Pretz.jpg",name:"Soundcastles",price:"14.80"}
]
$scope.albums = albums;
$scope.submitForm = function() {
};
}])
Inside the first View, append a button to go to the second View ("SelectedItemView"):
We just send the View's name to where we want to go, as an argument for the Controller's method open() :
Next, create the second AngularJS View "SelectedItemView" , bound to a "SelectedItemCtl", as follows:
<div id="controls" data-ng-switch-when="SelectedItemView">
<div class="centered" data-ng-controller="SelectedItemCtl">
<div class="centered">
<h1>Fragile State Discography</h1>
<h2>Selected Music Album</h2>
</div>
<table>
<tr><td>Client Email : </td><td><input data-ng-model="order.Email" /> </td></tr>
<tr><td>Item's Quantity: </td><td><input data-ng-model="order.Quantity" /> </td></tr>
<tr><td>Item's ID : </td><td><input data-ng-model="order.album.id" /> </td></tr>
</table>
<button data-ng-click="TabsCtl.open('WebFormView')">See Music Album's List</button>
</div>
</div>
Notice that we have a button to go back to the selection web form.
Append the third Controller to the javascript file as follows:
Why is it empty? Because in AngularJS, the Controllers use different $scope s : they don't share state!
For example, the "order" Model belongs ONLY to the "SelectedItemCtl" Controller, and not to other Controllers:
So, append an AngularJS Factory to create the custom $service, containing just two methods : get() and set(). These methods will get and set the shared "Order" variable, as follows:
Notice that we also used Dependency Injection to insert the custom AngularJS Service inside the two Controller's constructors.
In AngularJS, Factories just create the single object which represents a $service to the rest of the AngularJS application, and can be inserted in the constructors of every other Service.
You can read more about AngularJS Factories at the official AngularJS web site.
.controller('MusicController', [ '$scope', 'SharingService', function ($scope,SharingService) {
var albums =
[
{id:111,img:"Nocturnal.jpg",name:"Nocturnal Beats",price:"12.50"},
{id:112,img:"Facts.jpg",name:"The Facts And The Dreams",price:"11.20"},
{id:113,img:"Voices.jpg",name:"Voices From The Dust Bowl",price:"13.70"},
{id:114,img:"Pretz.jpg",name:"Soundcastles",price:"14.80"}
]
$scope.albums = albums;
$scope.submitForm = function() {
SharingService.set($scope.order);
};
}])
.controller('SelectedItemCtl', ['$scope', 'SharingService','$log', function($scope,SharingService,$log) {
$scope.order = SharingService.get();
$log.info($scope.order);
}])
.factory('SharingService', [function() {
var oSelectedItem;
return {
get: function() {
return oSelectedItem;
},
set: function(item) {
oSelectedItem = item;
}
};
}]);
Note that we also injected the $log $service in order to output some info to the Console, as we saw at the previous Lesson #10.
Again, enter some data in the web form, and click "Send":
This time, the data has been read at the second Controller:
.controller('SelectedItemCtl', ['$scope', 'SharingService','$log', function($scope,SharingService,$log) {
$scope.order = SharingService.get();
$log.info($scope.order);
}])
Now if you send again the selected item, you could see the "Order" JSON object :
As you see, "Order" includes several properties like "Email", "Quantity" , and "Album". This later includes an "ID" property with the identity of the Music album selected. The state has been shared when passing from one AngularJS View and Controller , to the other.
If you liked the CSS3 style, here you have the code to copy:
div[id^=controls]{padding:5px 5px 5px 25px;margin:10px 15px 15px 25px;font:900 12px Comic Sans MS;opacity:0.9;background:#fed; border:10px solid #ddd; border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}button,input[type=submit] {padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:220px;text-align: center;background:#ddd; font:900 14px Comic Sans MS;opacity:0.9;border:1px solid #c0c0c0; border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}ul{list-style:none; }input {padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:150px;text-align: center;background:#fea; font:900 12px Comic Sans MS;opacity:0.9;border:7px solid #ddd; border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}select{padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:250px;text-align: center;background:#fea; font:900 12px Comic Sans MS;opacity:0.9;border:1px solid #fe9; border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}div.centered{ text-align:center }.errorMessage{ color:red; }}
<<<< PREVIOUS LESSON NEXT LESSON >>>>
Enjoy AngularJS.....
by Carmel Schvartzman
כתב: כרמל שוורצמן
