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

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

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

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

5 Step-By-Step How-to add the Twitter Bootstrap framework

            By Carmel Schvartzman

In this tutorial we'll add the Twitter Bootstrap framework to the .NET MVC 4 application which serves as a backend to our 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 5 in this walkthrough to design an end-to-end AngularJS client MVC app. The bootstrap is open source since August, 2011, and was the most popular GitHub development project in 2012.


The Twitter Bootstrap was developed as a framework to encourage internal application consistency, instead of using several libraries for UI development, which led to inconsistencies and a high maintenance burden. It's customizable and equipped with JS libraries which allow us to manipulate and use modal windows alerts, buttons, tooltips, scrollspy and so on.

1. Go to TOOLS and open the Package Manager Console:

2. Type "Install-Package Twitter.Bootstrap".

3. If there's a newer JQuery version, it will be detected and fixed in the setup:

4. Next, the Twitter.Bootstrap will be installed:

5. After the installation, open the SCRIPTS folder and confirm the Bootstrap JS files have been added:

6. Take a look to the CONTENT folder to check the Boostrap is there. The "min" files are the ones to be used in production:

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

4 Step-By-Step How-to add a DBContext code generator

            By Carmel Schvartzman

 In this tutorial we'll add an DBContext API to the .NET MVC 4 application which serves as a backend to our 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 4 in this walkthrough to design an end-to-end AngularJS client MVC app.

The advantage of generating POCO (Plain Old CLR Objects) classes via T4 templates such as the ADO.Net DBContext code Generator is that they offer extensibility over the entity object definitions, far over standard EDMX data access. Also the DbContext can be used with Database First, Model First and Code First programming development.

There is not performance impact, and the DbContext API is simplified and user friendly, both in terms of features and usage. However, we can still getthe ObjectContext functionality from the DbContext and use features available only in the former. Most important, in this tutorial we'll be using the Data First approach, so we'll want to implement the DBContext.

1. Open the .EDMX file we created in STEP 3, open the MODEL BROWSER , Mouse over the Conceptual Entity Model and right click, selecting "Add Code Generation Item":

2. In the dialog, type "DBCONTEXT" on the SEARCH text box. After a little while, select the EF 5.x DbContext Generator, and type "NatureModel.tt" as the template name:

Press the "ADD" button.

3. Note the files added to the Models folder:

4. Take a close look at the Blog.cs file:

This is the POCO class that the code generation tool created for us.

5. In the POCO BLOG class, take a look at the public properties. You'll see that a "Comments" collection has been added, representing the one-to-many Blog-Comments relationship:

The "virtual" keyword controls lazy loading, that means if you use the "virtual" keyword on an ICollection one-to-many relationship property, it will be lazy-loaded by default, instead if you don't, it will be eager-loaded. The EntityFramework will create at runtime a new class derived from the "Blog" class and use it instead. This dynamically created Blog classwill contain logic to load the navigation property data when accessed for the first time, provided that all the class' navigation properties are virtual, the context.Configuration.ProxyCreationEnabled must not be disabled, the context.Configuration.LazyLoadingEnabled must not be disabled,  and also the entity must be attached  to the context.

Lazy loading means the process whereby a collection of entities is automatically loaded from the database just the first time that the property referring to the entities is accessed.  For example, when using the Blog  class , the related Comments wont be loaded until the first time the Comments navigation property is accessed. Lazy loading of the Comments collection can be turned off by making the Comments property non-virtual. Also, lazy loading can be turned off for all the entities in the context.

6. The same considerations apply on the "Comment" entity:

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

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

3 Step-By-Step How-to add an Entity Data Model

            By Carmel Schvartzman

 In this tutorial we'll add an Entity Data Model to the .NET MVC 4 application which serves as a backend to our 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 3 in this walkthrough to design an end-to-end AngularJS client MVC app.

1. Mouse over the "Models" folder and right-click >> Add >> New Item:

2. Select "Data" and ADO.NET Entity Data Model:

Name the E.D.M. as "NatureModel".

3. Our Data Model will contain data from  the database:

4. Choose the data connection appropriate to your SQL SERVER, and name the saved connection in the Web.Config file as "NatureEntities":

5. We'll want to include in our model the tables we created previously on STEP 1 of this walkthrough:

6. After you pressed "Finish", you can open the EDMX (Entity Data Model x) file to see the Entity Model:

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

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

2 Step-By-Step How-to Setup the AngularJS framework

             By Carmel Schvartzman

In this tutorial we'll install the AngularJS framework in an .NET MVC 4 application to serve as a backend to our 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 2 in this walkthrough to design an end-to-end AngularJS client MVC app.

1. Create an MVC 4 application:

2. Select the "Internet Application" template:

3. Next, we'll add the AngularJS framework to our app: go to TOOLS and then to PACKAGE MANAGER CONSOLE:

4. Once the console opens, type "Install-Package AngularJS": this command will download and install the AngularJS framework files in the appropriate folders:

5. After the installation, note that the following files have been copied to our proyect:

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

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

1 Step-By-Step How-to design SQL server tables

                                                                                                   By Carmel Schvartzman

In this tutorial we'll create 3 tables in SQLSERVER 2008 , to store our 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 1 in this walkthrough to design an end-to-end AngularJS client MVC app. 

First, let's create a "Blog" table, containing the following columns:

The column BlogID will be the PRIMARY KEY, so let's declare it that way, also setting its "IDENTITY SPECIFICATION" to "yes":

This will increment the BlogID in 1 each time we add a new record to the table.

Next, add a new table called "Comment", with the following columns:

Select the CommentID column, and right-click the mouse:

Click "SET PRIMARY KEY". Now the primary key icon appears on the CommentID column:

Next, select the CommentID column and double-click "IS IDENTITY", to set the automatic identity increment:

Now press CTL-S on the keyboard to save the table:

The table will be saved with the "Comment" name.
The third table is the one which holds the names of the bloggers.

Add the following columns , and set BloggerID as the PRIMARY KEY:

Next, set the IDENTITY INCREMENT for this column:

Finally, we'll establish the relationships between the three tables, creating FOREIGN KEYS.

Open the Comment table in the Object Explorer (press F8), and click "New foreign key":

When this dialog opens, press the button aside "Tables and Columns Specification":

The following dialog will open:

Don't worry about the "Relationship name": the SQL management studio will automatically set it ("FK_" means FOREIGN KEY).

You can see that our "Comment" table has a "BlogID" column: that is the name of the PRIMARY KEY of the "Blog" table. Therefore, set  "primary key table" = "Blog" ,  and map both "BlogID" columns.

Do exactly the same between the "Blog" table and the "Blogger" table , mapping the "BloggerID" columns.

Finally, we'll build a DATABASE DIAGRAM showing the relationships between our 3 tables.

Open the Object Explorer (F8):

Once there, pick from the tables list the 3 tables you just built, and close the dialog. You will have the Blogs database diagram we designed:

There you can see the ONE-TO-MANY relationships between our tables.

That's all…

Happy programming!!!

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