Angularjs Controllers in MVC Design: Creating a Shopping List

A Shopping List is a responsive web application which you can access from any device. In this blog, we will go into the basics of how to build a Shopping List application from scratch using Angularjs controllers in MVC design. The model-view-controller (MVC) design methodology decouples code, so you can work with each website aspect separately. The view handles the user interface, the model holds your data, and the controller is the “meat” of your project. Your controllers handle functionality. Controllers manage specific views, so each Angularjs controller you create is a 1-to-1 relationship with an associated view.

Understand Angularjs in depth with a Udemy.com course

Typically, your controller is given a similar name to your view. It helps to identify a view and its associated controller. You start off creating a controller in Angularjs. In this example, name your controller “ShoppingListController.” After you define your controller, you create your Angularjs functions and any dependencies.

With Angularjs coding, you inject your service dependencies into your modules. The first service you create is the scope. The scope is what you use to communicate between a controller and a view. The scope allows you to change values directly in a specific field. The scope uses a two-way bonding scheme to “glue” your view and controller. For instance, let’s say you have a text field on your page. When you type a value into this text field, the code is automatically updated in the controller. The update is bidirectional, so when you update the value in your controller, your view is automatically updated as well. The scope is the link between your user interface page and your code.

Below is an example of a controller and its scope:

var shopApp = angular.module('shopApp', []);
shopApp.controller('ShoppingListController', function ($scope) {
 $scope.list = [
   {'name': 'My List',
    'snippet': 'This is my shopping list.'},
 ];
});

After you set up your controller and scope, you need to assign your helper factories. You need PHP code files for each action that the user can take. Typically, you allow users to select, delete, insert, and update records in your Angularjs project. You also need to specify these files in your Angularjs code. Below is an example of four variables that define processing pages for your project:

var urlInsert = “mod/insert.php”;
var urlSelect = “mod/select.php”;
var urlUpdate = “mod/update.php”;
var urlRemove = “mod/remove.php”;

After you create your dependency file variables, we want to create two constants. Create a variable called MAX_LENGTH with a value of 50. Then, create a variable named MIN_LENGTH with a value of 2. One issue to note: JavaScript does not really have constants. These variables are placed in all capital letters, because industry standards say constants are in all caps. However, you can technically override these variable values in your code.

Understand how to work better with Angularjs and controllers

Using this approach, the two constants are only available to the current controller. If you attempt to reuse this code with another module, you will need to re-add the constants. To get around this limitation, you can add the constants to the module. Adding the constants to the module is like making a global variable. After you add the constant to the module globally, remove the variables from the controller.