In this tutorial series part two, we are going to learn AngularJS as a server side, Bootstrap for layout styling and ASP.NET MVC as server side.

Required files/folders for this project:

For this project, we require a module name to wrap everything like controllers, services, directives. Let’s name it StudentFormsApp.js. Within this module, let’s create controllers, service, directive, and view.

  • Controller: Handle the data.
  • Service: Get and post data from API, database, etc.
  • Directive: Helps to get the form on the screen.
  • View: Hold our forms, controls.

Step 1:

Create a folder named “app” and inside it lets create a JavaScript file StudentFormsApp.js which holds the module app.

Also, create another folder inside app folder and name it StudentForm and inside this folder lets create following JavaScript and HTML files:

  • sfController.js (Controller)
  • sfService.js (Service)
  • sfDirective.js (Directive)
  • sfTemplate.html (View)

Folder structure will look like:

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\1.jpg

Now add all the above JavaScript files in the head of index.html.

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\2.jpg

Step 2:

Now in the StudentFormsApp.js, lets create a global variable studentFormsApp that will be the only global variable we use in the application which will be our app as module called ‘studentFormsApp’. For now, we will not specify any other dependencies so let’s put empty array ‘[]’.

In the StudentFormsApp.js put the following code:

Step 3:

In the controller, we take the global variable ‘studentFormsApp’ and call the ‘controller’ method which enables to create an angular controller. Let’s name is sfController. Next, lets create function sfController() controller with $socpe as variable and sfService as service reference. We get the data from sfService and set it to $scope.student variable.

In sfController.js put the following code:

Step 4:

In the service (sfService), we take the global variable ‘studentFormsApp’ and call the ‘factory’ method which creates the service (sfService) and pass a function that returns data. For now, I am using sample data.

In sfService.js following is the code snippet:

 

Here data is returned as object with key value. So ‘student is pulled as sfService.student in controller like:

$scope.student = sfService.student;

Step 5:

Now in index.html, lets add an attribute ‘ng-app’ named “studentFormsApp” in the html tag.

Add the ng-controller = “sfController” in the body tag.

To show our form, lets create a “student-form” directive. We can directly call this <student-form/> tag from our directive.

In index.html, following code snippet:

 

Step 6:

In the sfDirective.js, we take our global app object “studentFormsApp” and call directive method to create a directive.

We are passing the “studentForm” as the name of directive. Here studentFormis in camel case (starting with lower case and next word begins with upper case).

This will be translated into snake-case that is “student-form”. Notice that, this is same in index.html as <student-form/>

We are also passing a function which returns an object with two items: restrict and templateUrl for our html file.

In sfDirective.js, following is the code snippet:

 

Step 7:

Now in sfTemplate.html, we add a form with different controls that is required for a student form. We are styling this with bootstrap controls.

  1. Input field
  2. Labels
  3. Check Box
  4. Select Box
  5. Radio Button
  6. Submit Button

Here, we have used bootstrap to style our forms. So following classes are used for controls:

  • container: adds margin and center page content (We have used this class in body of index.html).
  • form-group: groups a label and input field.
  • form-control: placed on input elements.

These bootstrap classes help to provide responsiveness for different device resolutions.

Complete code snippet for sfTemplate.html is:

 

Step 8:

Run the application and the following output will be displayed:

C:\Users\ITH-143\AppData\Local\Microsoft\Windows\INetCache\Content.Word\3.jpg

Step 9:

More Bootstrapping:

  • form-horizontal: places labels to the left of the controls.
  • control-label: groups a label.
  • col-sm-3 col-sm-9 use the 12-column grid.

Let’s add a class ‘form-horizontal’ in the form tag. Add class ‘col-sm-3 control-label’ in label controls. Add class ‘form-control’ in input fields.

Wrap input field with div. Include this class ‘col-sm-9’ that makes 12 column grids. Here ‘sm’ stands for small.

So, it will look like:

 

This will help us to make horizontal responsiveness even on smaller devices.

Complete code snippet of the new sfTemplate.html:

 

Run the app, form will be displayed as below:

Step 10:

Working with fieldsets:

fieldsets helps grouping of controls together. It has legend tag that gives name to fieldset.

Let’s add fieldsets to group our controls along with legend to give them a name. So, updated html will look like:

Updated code for sfTemplate that includes fieldsets:

 

Step 11:

Run the application, you will see the following UI with groupings and headings:

In this article, we have learnt about angular structure, routing, bootstrap styling. We will learn more about AngularJS, bootstrap and of course ASP.NET-MVC in the next articles.

Get the project from GitHub: https://github.com/olikishor/StudentFormsDemoApp-AngularJS-Bootstrap-ASP-NET-MVC

Keep you posted.

Thanks, Happy Coding!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">