Google+

Wednesday, August 28, 2013

6 Step-By-Step How-to create a View

          By Carmel Schvartzman


In this tutorial we'll add a View to 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 6 in this walkthrough to design an end-to-end AngularJS client MVC app.
In the MODEL-VIEW architecture of AngularJS, a VIEW is just what the user sees.
Technically the VIEW is created as a template that will be merged with the MODEL and rendered to the DOM.
The template is an HTML that the browser parse into the DOM, then the AngularJS engine search directives in it, in order to establish WATCHES on the model, allowing therefore a continuous updating of the View.
We'll create an AngularJS app containing a View.

1. Right-click your project and ADD a NEW ITEM:




2. Select WEB and "HTML PAGE": name the html page as "Index":



3. In the HEAD of the html, drag-and-drop the following javascript and CSS files (you'll find them in the Scripts and Content folders respectively): the order in which the files appear is very important:




4. Next, add the ng-app attribute to the html tag, and set it to "BlogApp". That means we tell to the AmgularJS engine that we just created an application. Each html can hold ONLY ONE ng-app directive. You can read here the documentation:





5. Now code a div as a container for the View:




6. Inside the div, add the View as follows:


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

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

No comments:

Post a Comment