11 Step-By-Step How-to create an AngularJS Resource

         By Carmel Schvartzman

In this tutorial we'll learn  how to create an AngularJS Resource, which will allows us to fetch data on the client side, using a RESTful API in our AngularJS Blogs Application.You can follow this step by step tutorial as a standalone, or you can learn all the posts to build the entire app. This is the STEP 11 in this walkthrough to design an end-to-end AngularJS client MVC app.

In the MODEL-VIEW-CONTROLLER architecture of AngularJS, a VIEW is related to a MODEL in the configuration step of the AngularJS app live, when we link it to some CONTROLLER.
This linking action is set in a Module, with the function of declaratively set how the AngularJS app should be bootstrapped. It's like the Main method in a program, setting the instantiation of the application.
Because AngularJS is based on the Dependency Injection paradigm, here is the place to configure the app injecting the functionality that we'll need.

In the Module, will must install an AngularJS ngResource, that supports RESTful server-side interactions and  provides the $resource service, which we'll use afterwards.
This $resource service provides high level methods and therefore allows us to interact with the REST back end, without using the low-level $http service.


1. First, check that you have added the ngResource in the Module declaration, as we made in this tutorial.

2. Now, open the .js file which holds your javascript code ("Blog.js") and find the Controller that we linked to the View. This Controller will fetch the REST data from the back-end, and send it to the View.
Take a look at the snapshot: it states that when '/' do link the "BlogListCtl" controller to the "BlogList.html" View:

Therefore, we declare inside the BlogListCtl controller, a $scope attribute called "blogList", that will holds the posts list, from the BlogsResource service. To instantiate this service, we must create the above Factory, naming it exactly the same way we will at the Controller. Then we'll call the query() service's method. This method will make a request to the RESTful API of our application.

3. Let's write the REST action that reacts to the GET request made by our $resource service. Maybe you have already done that following the previous   How to create an REST API back-end      tutorial. If so, you can skip the next few steps. Elsewhere, create an empty MVC controller named "Nature":

4. We automatically get an Index method:

Instead  of an ActionResult return ,we need  JSON formatted data, so change the return type:

5. Add a Json object as the returned value:

Notice that the Json object returns the data its get, in a JSON notation format.

6. Because we want the method to response to GET requests, the second parameter must be GET allowed:

Therefore, pick "AllowGet" from the list:

Next, replace the "new {}" instance with the data you want to return from the method. For the complete walkthrough to do that, see the previous How to create an REST API back-end  tutorial.

7. Assuming you already built the RESTful back-end, get back to the Blog.js file, to continue with the creation of our $resource service. To see how to use an $resource service, let's take a look at the AngularJS.org's API documentation, at http://docs.angularjs.org/api/ngResource.$resource :

As you can see, the $resource uses an URL containing ":xxxx" parameters, that holds the arguments we send to the REST server. Those ":xxxx" parameters are defined in the same $resource instantiation, so let's code it the same way:

This code means that the call to the REST method includes the "Id" of the requested blog's post. Remember that if we don't send an Id, that means we want to fetch the ENTIRE list of posts.

Also, you'll notice that in the documentation example, there exists the declaration of an "charge" method, responding to a POST request. It is because the $resource service allows you to define your custom action as you wish:

The $resource service includes methods for all CRUD operations (Create Retrieve Update Delete) as the default set:

In the meantime we'll make use of the "query()" method to fetch all the posts. Also, add to the $resource service an "update" custom method, for the POST request, that we'll be using afterwards ("isArray" means that the returned data will be in an array disposition):

Rebuild the application, and open the "Index.html" in the browser (http://localhost:XXXXX/Index.htm#/):

Open the Developer Resources (F12) and at the "Network" tab select the Blogs.js script. There you can see the request made by our $resource service , and the 200 status code.

The AngularJS View should look like the following table:

That's all!! 
Happy programming.....

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

10 Step-By-Step How-to create an REST API back-end

         By Carmel Schvartzman

In this tutorial we'll learn How to create an REST API back-end using ASP.NET MVC, in order to load the data with the Controller in our AngularJS Blogs Application. That AngularJS controller will get a Resource via dependency injection. You can follow this step by step tutorial as a standalone, or you can learn all the posts to build the entire app. This is the STEP 10 in this walkthrough to design an end-to-end AngularJS client MVC app. This is the starting of the REST API: here we'll learn to create a REST for just GET requests, which returns all the posts of the Blog. In further tutorials we'll add the REST API methods to perform CRUD operations, such as CREATE, UPDATE, DELETE or FETCH A SINGLE POST.

In Visual Studio 2012 you can use the Web API template to get the REST API in place. However, we'll use an plain ASP.NET MVC application and manually create the REST interface. This way we'll get a REST API using JSON (JavaScript Object Notation) and not XML, which is the default of the Web API template.

By the end of this short tutorial we'll have the following JSON data displayed in the browser:

1. In order to create the REST API let's open Visual Studio and use the ASP.NET MVC project we deployed in previous tutorials. Next, add a new Controller as follows:

2. In the "Add Controller" dialog, type the name of the controller. Remember that the "Controller" term is part of the MVC convention, so type "Nature" + "Controller" in order to design our REST API:


3. We get a method called "Index" that returns an ActionResult object:

4. Because we want our API return JSON, change the returned value to "JsonResult". Also, let's call the method "Blogs", because it will return the blog posts saved in the database. Notice we stated that the method can get an optional "Id" argument : that will allows us to use this method for both fetching ONLY ONE post ( if we send an ID to the method ) or ALL the posts ( if we don't ):

5. As for the returned object, type "Json" and you'll get the following intellisense aid:

As you see, the Json object returns JsonResult, which in turn serializes the data to JSON format.

6. Notice we will use the "2 of 6" option of the Json overloaded constructor. Because we want the method to react to a GET http request, we must state that as the JsonRequestBehavior of the function:

Therefore, select the "AllowGet" option:

7. Change the comments to remind yourself that this method answers HTTP GET requests, and that the REQUEST URL must be "http://localhost:XXXXX/Nature/Blogs":

Also, because we use an BOTTOM-UP approach, let's test our REST API returning just a string, to see how it works. So give the Json constructor a POCO object containing just a field "data" instantiated to the string "test". It will be serialized by the JsonResult to the JSON { "data":"test" }.

8. Go to the "DEBUG" menu and select "START WITHOUT DEBUGGING" or press CTL-F5. That will launch the AspNet Development Server using some default port ( in my case, you can see it uses the port 17564) . Open the browser and type "localhost:XXXXX/nature/blogs/"  ( replace the XXXXX with the port you are using ) :

You can see that our REST API reacts to a GET browser  request.

9. Open your SQLSERVER Management Studio and type some demo data to the Blog table: (reference to the tutorial  to create the database tables):

10. As you can remember from our previous tutorial on adding an Entity Framework , we can use the NatureModel we created there, so add the following "using" directives:

11.  Next, let's initialize the Context:

12. Now it's time of replace the test data we just used with the true posts. Declare a generic List of Blog objects, and fetch all the blogs as follows:

13. And construct the Json object this time using the true data:

14. Rebuild your project ( F6 ) and switch to the browser. Refresh it and instead of the test data ( { "data":"test" } ) we'll see the true data in JSON notation:

As we stated above,  in further tutorials we'll add the REST API methods to perform CRUD operations, such as CREATE, UPDATE, DELETE or FETCH A SINGLE POST.

That's all!! 
Happy programming.....

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

8 Step-By-Step How-to create an AngularJS View template

         By Carmel Schvartzman

In this tutorial we'll learn How-to create an AngularJS View , that will render the data fetched by a Controller in our AngularJS Blogs Application.  You can follow this step by step tutorial as a standalone, or you can learn all the posts to build the entire app. This is the STEP 8 in this walkthrough to design an end-to-end AngularJS client MVC app.

In the MODEL-VIEW-CONTROLLER architecture of AngularJS, a VIEW is related to a MODEL in the configuration step of the AngularJS app live, when we link it to some CONTROLLER.
This linking action is set in a Module, with the function of declaratively set how the AngularJS app should be bootstrapped. It's like the Main method in a program, setting the instantiation of the application.
Because AngularJS is based on the Dependency Injection paradigm, here is the place to configure the app injecting the functionality that we'll need.

An AngularJS View is just what the user sees, nothing more. Is an html template merged to the Data Model in a Module, and rendered to the Dom.

1. Open the Add New Item dialog, and select HTML page. Name it "BlogsList.html". That will be the View template embedded in our Index.html file:

2. Go back to the Index.html file we added in previous tutorials, and check that the ng-view directive appears inside a div tag. The template View we're designing right now will be embedded in that place:

You can indistinctly write "data-ng-view" or "ng-view".

3. Return to the BlogsList file and insert inside the body tags the following:

4. Next, add the "{{ }}" AngularJS notation, meaning that the AngularJS engine will react at what you write between this as some attribute or object belonging to the data SCOPE:

5. Write between the parenthesis the following attribute, that will contain the Title of our Blog:

6. Finally, delete all the standard html markup of the BlogsList.html file. We don't need it because this View is just a template embedded inside the Index.html file. The markup must remains as follows:

We have just designed our first AngularJS View. In the next Tutorial we'll create the corresponding  Controller as the Data Model for this View.

That's all!! 
Happy programming.....

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

9 Step-By-Step How-to add an AngularJS Controller

         By Carmel Schvartzman

In this tutorial we'll learn How-to create an AngularJS Controller, in order to display data on a View. In the previous tutorial we linked the View that we just designed,  with a Controller using a Module  in our AngularJS Blogs Application.  You can follow this step by step tutorial as a standalone, or you can learn all the posts to build the entire app. This is the STEP 9 in this walkthrough to design an end-to-end AngularJS client MVC app.

In the MODEL-VIEW-CONTROLLER architecture of AngularJS, a VIEW is related to a MODEL in the configuration step of the AngularJS app live, when we link it to some CONTROLLER.
This linking action is set in a Module, with the function of declaratively set how the AngularJS app should be bootstrapped. It's like the Main method in a program, setting the instantiation of the application.
Because AngularJS is based on the Dependency Injection paradigm, here is the place to configure the app injecting the functionality that we'll need.

In short, a Controller is the Javascript code that stands behind a View; its functionality is to build the data MODEL and to publish it to the HTML template we call View. That is attained using the $scope directive.

1. Go to the .JS file, where we just added a AngularJS Module, and create a Javascript var as follows: 

          Call your Controller as you wish, but as a convention we'll prefer an "Ctl" appended to the name. Notice that we must respect the previous Configuration declaration that stated the name of the controller (see the snapshot).

2. Our Controller will get an "$scope" parameter that we'll use to connect data Model to View:

3. In the previous tutorial, we added a View to our application, named "BlogList.html". In that view, we publish the title of the blog using the standard AngularJS "{{ }}" notation, as follows:

And now, at the Controller, we'll initialize that variable with a string:

Notice that we just added an attribute to the $scope. That's all. And the $scope will be used at the View.

4. Let's see how it looks like. Right-click the Index.html and press "View in Browser" (Notice we won't select the BlogList.html file, because it's just a template):

You will see the Blog Title in the rendered html . That was a perfect separation between Data Model and View presentation markup.

That's all!! 
Happy programming.....

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