Google+

Thursday, August 29, 2013

7 Step-By-Step How-to configure the app

         By Carmel Schvartzman


In this tutorial we'll link the View with the 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 7 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.

1. First we'll create the .JS file which will hold the code of our application. Right-click the "Script" folder and ADD a NEW ITEM:


2. In the "Web" template, select "JScript File" and name it "Blog":


3. Go to the Index html page, and drag-drop the file to the head section of the html, in order to link between the two files:


4. Back in the .JS file, add the module and call it "BlogsApp". Be careful to call also the js object with the same name BlogsApp:

Notice that we inject also the "ngResource" dependency, which will allow us later to send http requests to the REST API we'll design. Be careful to enclose the dependency inside an array "[]".

5. Next, we add the ".config" configuration block :


This configuration block only can be injected constants or providers , which create instances of services , such as the $routeProvider.


6.  The $routeProvider contains an API that allows us to route our application:


7. Next, we design the routes we'll need in our app: we can add several ".when" options, and one ".otherwise" , this later just in case no "when" block applies:

8. The ".when" option states that when the Index page is chosen ( "/" ) the following link between VIEW and CONTROLLER should be set: the View  called "templateUrl" which holds the name of the html template "BlogList.html" that we'll create next, will be linked to the "BlogListCtl" Controller:


This way, when the user enters the "BlogList.html" VIEW, he/she will access the "BlogListCtl" functionality.

9. Finally, we set the default route: otherwise redirect the user to the "/" main page:


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


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

2 comments:

  1. Why didn't you finish this series?
    I just blew an hour or so following the steps but there is no data binding in index.html!

    ReplyDelete
    Replies
    1. Sorry i couldn't write them before; right now i added three more tutorials including the creation of the REST API to fetch the data...Be in touch :-)

      Delete