Bootstrap

Revolution just arrived. Client side development is getting easier and cheaper. AngularJs is one of the client side development JavaScript framework. It is developed by google. Website designing also get easier due to emerge of bootstrap. Now let’s introduce AngularJS and Bootstrap in a asp.net web form application. Here I used visual studio 2012 as an IDE.

Step 1: Create a ASP.NET Web Forms Application

Open visual studio, Got to File->New->Project
Select Template -> Visual C# -> Web -> ASP.NET Empty web application, set location and click OK

Step 2: Install required packages

Run the following command in Package Manager Console (Tools->Library Package Manager->Package Manager Console) to install required package. Make sure your internet connection is enabled.

PM> Install-Package AngularJS.Core
PM> Install-Package AngularJS.Resource
PM> Install-Package bootstrap

Step 3: Design Master Page

Add required references for bootstrap and AngularJS , and design master page using bootstrap as follows.
You can use theme. For details visit the article “ Easy way to design web layout by bootstrap theme ”


<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="AngularWeb.Site" %>





    

    
    

    
    


    
        
            
            ASP.NET with Angular
        
        
            
                Home
                About Me

Here you must see that I used the reference of app.js, data.js. studentCtrl.js which are not defined yet. Soon, I will create those files.

Step 4: Create Application module, data and angular controller
Create app.js, data.js and studentCtrl.js in scripts -> app folder. Content are given below.

app.js

var app = angular.module('app', ['ngResource']);

data.js

app.value('studentInfo', [
  { id: 1, name: 'Mahedee Hasan', credit:20, semester: '8th' },
  { id: 2, name: 'Enamul Haque', credit: 15, semester: '7th' },
  { id: 2, name: 'Arefin Billah', credit: 15, semester: '6th' },
  { id: 3, name: 'Zahid Hasan', credit: 12, semester: '7th' }
]);

studentCtrl.js

app.controller('studentsCtrl', function ($scope, studentInfo) {
    $scope.studentInfo = studentInfo;
});

App.js for just declaring application module, data.js for hardcoded data by javascript and studentCtrl.js is the main angular controller.

Step 4: Create a Page for View

Create a page name Default.aspx, just right click on the application -> Add -> New item -> Web form using master page. Select Master page and type page name as Default.aspx. Now modify the page as follows.


<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AngularWeb.Default" %>




 
   

        
            
                
                    Id
                    Name
                    Credit
                    Semester

                
            

            
                {{student.id}}
                
                {{student.name}}
                
                {{student.credit}}
                
                {{student.semester}}

Id	Name	Credit	Semester
{{student.id}}	{{student.name}}	{{student.credit}}	{{student.semester}}

Look at the page, here I add ng-controller and ng-app and ng-repeat. If you have little idea about angularJs, you must understand the code. Now just run the application and you will get following output. Happy programming.