Google+

Wednesday, March 18, 2015

#6 - Multiple Controllers in AngularJS

In this article we are using Multiple Controllers in AngularJS,  adding a new Controller containing new behavior ,  to the same AngularJS View, in order to initiate you on how to use AngularJS Controllers .
This is the Lesson #6 in the "AngularJS: From 0 To 100" series written for absolute Beginners, which  is the continuation of the basic Controllers' Lesson #4 and Lesson #5, so please take a look at them.
<<<< PREVIOUS LESSON                                      NEXT LESSON >>>>

We're using here a free Web Editor  , "Brackets" , powerful and optimized for developing with AngularJS . You can learn a 5 minutes tutorial about it in this post.

As we explained in the previous lesson, AngularJS Controllers are just constructors used to merge Business Logic with an Angular View , by means of :
1) initializing the $scope HTML5 elements 
2) setting the App behavior of AngularJS adding methods to the $scope

The Controller's AngularJS documentation can be found at the AngularJS official web site.
For this tutorial we'll continue building an AngularJS App developed in the previous tutorial, adding more behavior (functionality) to the App by using multiple  Controllers , in order to perform calculations and show the results at the AngularJS View.

This AngularJS App will appear this way :

Multiple Controllers in AngularJS



Multiple Controllers in AngularJS





Let's go: open the AngularJS App that we developed in the   Lesson #5, and add to the HTML5 markup a div bound to a new Controller "AlbumsCtl" :

Multiple Controllers in AngularJS 1

Type a readonly input text with an data-ng-model "selectedItem" which will output the selected item from the drop down list:

Multiple Controllers in AngularJS 2


Next, create the dropdownlist with an ng-model "album" and all available music albums:

Multiple Controllers in AngularJS 3

Run ("Live Preview") the App to see the View:

Multiple Controllers in AngularJS 4


By the way, this is the CSS3 style, if you want to copy it:

input, button, div[id$=results]{padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:99%text-align: center;background:#fea; font:900 12px Comic Sans MS;opacity:0.9;border:10px solid #ddd;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}input[class*=output] {padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:190px;text-align: center;background:#fea; font:900 12px Comic Sans MS;opacity:0.9;border:10px solid #ddd;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;} div[id^=controls]{padding:5px 5px 5px 25px;margin:10px 15px 15px 25px;text-align:center;background:#fed;    border:10px solid #ddd;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}button,select {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;}

Next, open the javascript Controller file and append a new Controller named "AlbumsCtl":

Multiple Controllers in AngularJS 5


Now, because we want to bind the selected item from the drop down list , to an input element, we must define a method , meaning a $scope behavior, that will be run every time it is needed. Therefore define an $scope function as follows:

Multiple Controllers in AngularJS 6


Inside the method, just copy the selected value ($scope.album) to the selectedItem Property:

Multiple Controllers in AngularJS 7


Finally, let's use the AngularJS ng-change directive , to call the Controller's method whenever the selected value at the list has changed :

Multiple Controllers in AngularJS 8

The official documentation for the data-ng-change directive can be found at the AngularJS web site .
Run the App, and select a music album from the list:

Multiple Controllers in AngularJS 9

You will see that the second Controller has updated the album's name at the text element:


Multiple Controllers in AngularJS 10

So, we have now two different Controllers together at the same AngularJS View. Each one of them contains a completely separated $scope with different behavior and properties, and do not interfere which each other.

That's All!!! You have begun using Multiple Controllers in AngularJS . In the next article we will continue to learn Step by Step about using Data Collections in AngularJS
Happy programming.....
      by Carmel Schvartzman

<<<< PREVIOUS LESSON                             NEXT LESSON >>>>



כתב: כרמל שוורצמן

Sunday, March 8, 2015

#5 - Using Controllers in AngularJS

In this article we are using Controllers in AngularJS,  and adding behavior to a Controller ,  to create an AngularJS App, and give you an idea on how to use AngularJS Controllers .
This Tutorial can be learned as a standalone. This is the Lesson #5 in the "AngularJS: From 0 To 100" series written for absolute Beginners. This lesson is the continuation of the basic Controllers' Lesson #4 , so please take a look at it, in case you need some learning background.
.
<<<< PREVIOUS LESSON                                                                    NEXT LESSON >>>>
We're using here a free Web Editor , "Brackets" , powerful and optimized for developing with AngularJS . You can learn a 5 minutes tutorial about it in this post.

AngularJS Controllers are just constructors used to merge Business Logic with an Angular View , by means of :
1) initializing the HTML5 elements : inside a defined $scope.
2) setting the behavior of AngularJS Properties and Expressions in that $scope

The Controller's AngularJS documentation can be found at the AngularJS official web site.
For this tutorial we'll continue to build an AngularJS App adding behavior (functionality) to the  Controller , in order to perform calculations and show the results through AngularJS Expressions.

This  AngularJS App that we are building in this Tutorial will look this way :

Using Controllers in AngularJS




Using Controllers in AngularJS



We suppose here that you have already completed the previous Lesson #4. We'll continue developing the same Angular App, just check that you have the references that we added there:

Using Controllers in AngularJS 1


As you remember from the former lesson #4, we have a list of music albums, and an automatic calculation of the total. However, this is an AngularJS View, that means , this HTML5 file should contain ONLY presentation code: this file is not the place for performing calculations or applying business rules. The Controller is the place for that, in this MVC architecture (Model View Controller). The Model keeps the data, the View is the presentation layer, and the Controller keeps the logic for the App:



Because of that, we'll add behavior to our Controller's $scope, which until now just initialize the $scope variables:

Using Controllers in AngularJS 3


If you like, take a look at the official AngularJS documentation for the Controllers here.
As you remember from the previous lesson, this initialization code runs only once, at the onload event. However, now we'll add Controller's behavior that will run every time that it is requested.
In the View, replace the calculation with a new Property, named "total" (don't delete the "currency" Filter):


Using Controllers in AngularJS 4

Initialize the "total" variable at the Controller:

Using Controllers in AngularJS 5

Now add an anonymous function to the Controller, which will be held in an "fnCalculateTotal" $scope variable:

Using Controllers in AngularJS 6

If you want to copy-paste the code, here you have the Controller's javascript:

var oMusicApp = angular.module('MusicApp', []);
oMusicApp.controller('MusicCtl', [ '$scope', function ($scope) {            $scope.quantity = 0;            $scope.price = 12.50;              $scope.total = 0;                 $scope.fnCalculateTotal = function(){                                              $scope.total = $scope.quantity * $scope.price;                                             }                                  }     ]);



Inside the function, insert the calculation that we previously had inside the View:


That's all for the Controller. Now let's call the new $scope behavior from the View, by creating a button which calls the function using the data-ng-click AngularJS directive:

Using Controllers in AngularJS 7

This is the HTML5 markup to copy-paste:


<div id="controls" data-ng-controller="MusicCtl">                <h3>Quantity of Fragile State Albums to purchase :</h3>                <input type="number" data-ng-model="quantity" />                <input type="text"   data-ng-model='price | currency:"USD$ "' />                <div style="text-align:center">            <button data-ng-click="fnCalculateTotal()">Calculate Total</button>        </div>                <pre><i>Total Price :</i><br></pre>        <div id="results" >            <pre>                <b><i>                <label>{{ total | currency:"USD$  " }}</label>                </i></b>            </pre>         </div>    </div>



The View will be displayed as follows:

Using Controllers in AngularJS 8

Select the number of albums, and click the button to see the total:

Using Controllers in AngularJS 9


If you liked the CSS3, here you have it to copy:


input, button, div[id$=results]{padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:99%text-align: center;background:#fea; font:900 12px Comic Sans MS;opacity:0.9;border:10px solid #ddd;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;} div[id$=controls]  {padding:5px 5px 5px 25px;margin:10px 15px 15px 25px;width:99%text-align:center;background:#fed;    border:10px solid #ddd;    border-radius: 10px;box-shadow:10px 10px 2px #c0c0c0;}button{padding:5px 5px 5px 5px;margin:10px 15px 15px 15px;width:180px;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;}

That's All!!! You have begun using Controllers in AngularJS .  In the next article we will continue to learn Step by Step about using Multiple Controllers in AngularJS  
Happy programming.....
      by Carmel Schvartzman

<<<< PREVIOUS LESSON                                                                    NEXT LESSON >>>>





כתב: כרמל שוורצמן