Let's write an Angular 1.x app with a Caché REST backend - Part 13

a.k.a..  "The World of Widgets Returns!" or "Paternity leave damages Instructional Series momentum"

In our last lesson, we combined 2 separate classes to appear as the same property.  We now have the ability to Update our Widget catalog, but what if we want to Create a Widget?  Thankfully, we've already done 90% of what we need, just by implementing Edits

As we mentioned when creating the REST Services for PUT and POST, the only real difference between creating and updating a record is whether we are passing in an existing ID or creating a %New record.  The actual content of the Widget JSON is exactly the same, so this allows us to be a little lazy and reuse the form and controller code we have previously written, with just some minor edits to allow it to work for New Widgets

First, we copy the editWidget function and create addWidget from it in WidgetController.js.  This will not take in an existing Widget, and will instead create a blank JSON object to bind the scope to.  We will remove that parameter from the method, and change the assignment to an object constructor.  The only remaining change we need to make is to make this version of the saveWidget function call the POST method without a supplied Widget ID.  We don't need to make any changes to the form, so we can just include this template as it is

So, all we need to do now, is add a button to the Toolbar on Welcome.csp to trigger this new function (we'll just use the existing icon image for this for now)

Now when we load Welcome.csp, we should see our new button.  Let's click it to Create a new Widget.   

Nothing happens.  It's almost like the function doesn't exist.  This is because to the current $scope at that part of the page, the function doesn't exist.  We don't actually reference WidgetController until the repeating section of Widgets, so the page header does not know how to service the ng-click command.  To solve this, move the AddWidget function to pageController.js, as this is the active scope.  Refresh your page, and click the button again.  It's still failing.  So let's fire up F12 Debug tools to search for clues

The PageController needs to have the $mdDialog service marked as a Dependancy, and injected into the Controller.  Let's add that it and see if it makes a difference. 

We now have a Dialog we can use to Add a New Widget.  Let's fill in some details and Create a new Widget.  Once "Save Widget" is clicked, the Widget should be added to the database

Once we refresh Welcome.csp, we should see our new Widget displayed in the list. Success!

Today we:

1. implemented a "Add New Widget" form
2. debugged issues caused by functions being on inaccessible controllers, and controllers with missing dependencies

Next time we will:

• Implement a Delete button to round off our CRUD operations
• Implement an autorefresh of the page when Widgets are added or edited
• explore different ways of viewing the data held in our controller

This article is part of a multi-part series on using Angular on top of Caché REST services.  The listing of the full series can be found at the Start Here page