Mar 23, 2016

Even when using AngularJS, there is going to be a time when you want to send information to the server. When you need to send information to the server it is best to use a form to enclose all the needed information to be sent to the server. In Angular this is not a foreign concept, instead we have a few directives that can help us put together data and send it.

One of the key elements to the forms in your application is the “ng-model” directive, this directive provides us with a two-way binding mechanism that will drive the synchronisation between the model and the view. The benefit of using the two-way binding is that if your user modifies data on the view the model will have the data synced already and vice versa when the model is modified the view will be synced.

To showcase this functionality we will create a basic AngularJS application and see how we can send data to the server and use the two-way binding mechanism to lively update the view when a user adds an entry. If any modifications happen to these entries it will also be lively updated.

In this JavaScript file, I have created a module called “DemoAng”, this will encapsulate the logic for my angular application. Within the module I will create a basic controller that will have the implementation logic for my form to save new entries. (Lines 3 – 22)

• Inside the controller I create an array to store my new users, as well as an identity property to uniquely track my users.
• Then, I create a function called “newuser” that will handle the logic of adding the new user to the array. This function includes incrementing the identity and setting the values of the properties that needs to be added to the array as an item

You might have noticed that the array called “userlist” is prefixed with the keyword $scope, this just bind it to the model so that my view can call the list and get the values from it. The $scope keyword must be used in order for you to communicate with the model to and from the view.

Now that we have the logic of our Angular App in place, we can go ahead and decorate the view portion of our application. This is where we will create a form element to be used to send information, but also where we will display the list of current users added.

In this HTML file, I have created a few elements that use the built in directives from AngularJS

• Line 01 uses the ng-app and ng-controller directives to mark the start of the angular app and the encapsulation of the controller.
• Line 06, 09 and 12 all uses the ng-model directive to make sure that when I submit a value that the value of the corresponding field gets assigned to the model called myuser. Each of of these input elements is mapped to a specific property, such as First Name.
• On line 14, I have decorated the input element with an ng-click attribute that will call the newuser function I have created in my controller and pass in the model myuser that was create by the form.

The last piece of markup I added to the HTML file is the portion to render the list of users. (This was appended after line 18 and before the final div element):

• In this final portion, I have added a header just to describe the list
• I the create a div element and decorate the element with an “ng-repeat” attribute

• This attribute marks it as a loop and will repeat the element and all nested elements for each item in the collection
• Line 22, 25 and 28 all uses “Angular Expressions”, to tap into the individual item and retrieve a value to be displayed. These items will be properties such as the First name that was saved earlier.

So when we run the application new have the following output:

Notice that we the form rendered and the header that states “List of current users”, there is currently no items in the array so my angular renders nothing. Once we add a user however, this will change as the model is updated we now can see that there is one user added to this list.

I went ahead and added a few other users, to form a list of values. All of this will happen without the user seeing any post back, it all happens smoothly.