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.....

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