Friday 15 January 2016

First angularjs Application with MVC Basic Example.

How to setup frist AngularJS application in MVC4. AngularJS is a JavaScript framework (library) based on a very popular software ar... thumbnail 1 summary

How to setup frist AngularJS application in MVC4.


AngularJS is a JavaScript framework (library) based on a very popular software architecture called the MVC or Model-View-Control. Developed by Google engineers in the year 2009, the framework slowly gained popularity and today it is one of most widely used JavaScript frameworks.

Angular JS is a JavaScript framework to create Single Page Application. It is a client side MVC framework. Angular JS extends HTML by providing Directives that add functionality to your markup and that allow you to create powerful dynamic templates for application.

AngularJs framework provides in-build directives (or attributes) to extend the HTML inside a web page. When we attach these directives to the HTML elements and attributes, it creates a dynamic web page with very little coding.

we first need to add the JavaScript file inside the <head> tag of our application.

You can download AngularJS library files form click here.
<head>
         <script src="~/Scripts/angular.min.js"></script>
</head>

Now, I have add directive for Html page.

“ng-app”:-

The ng-app directive tells Angular which part is associated with an Angular application.
Usually, we define ng-app inside a root element in an HTML file, that is, <html> or the <body> tag. If I define this directive inside the <html> or <body> tag, then the entire page is an Angular application.

Below you can see First of all I have used ng-app that will denoted that It is an angular app and you have to provide the name of app which is already defined in “MyApp”.

<div ng-app="myapp"></div>

“ng-controller”:-

The ng-controller directive allows us to bind a unique controller to a view. I have attached to Div element,tells Angular that "HelloController" will receive the values from a model object and return it to the view.

<div ng-app="myapp">
   <div ng-controller="Homecontroller">

        // write your following code on part of angular 
    
    </div>
</div>

Now times to setup Angular JS Module, Service and Controller.So, create a folder with name “Angular” inside the Content folder for clean code.

after that add Three javascript file inside "Angular" folder create.
1.module.js
2.Service.js
3.controller.js


1. module.js :- 

we will first initialize and register our application by creating a new Angular Module.

var ModuleApp = angular.module('myapp',[]);

A module is a collection of services, directives, controllers, filters, and configuration information.


2. Service.js :-

This javascript file "factory.js" for fatching data from database and provide it to controller.

ModuleApp.factory('Homefactory', function ($http) {
return {
        //write your code for service
       }
});

3.controller.js :-

controller.js file use to show data on view
 
ModuleApp.controller('HomeController', ['$scope','Homefactory'  function ($scope,Homefactory) {

    //write your code for controller
    $scope.message="angularjs frist application"
}]);

Here, Now time to show data on view for html page.

<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/Angular/module.js"></script>
    <script src="~/Scripts/Angular/controller.js"></script>
    <script src="~/Scripts/Angular/factory.js"></script>
</head>
<body>
<div ng-app="myapp">
    <div ng-controller="Homecontroller">
         {{message}}
    </div>
</div>
</body>
</html>

Output give like below....
                 angularjs frist application

Thnx for watching.....please share with your friends...
any query write comment below...


3 comments