Angularjs in Asp.net MVC

Angularjs:

• Angularjs means it is a javascript framework which is use for developing a single page application.
  

• Single page application nothing but where on a single page we are going to render total application in one page where all your data going to be display.
• It is a client-side script.

• It is supported by Google company.

• It is developed by Hevery.

• Angularjs is running faster than mvc application.

• If you create mvc project we have context page, index page and AboutUs pages are there. But in angularjs we have single page

• We are going to replays your data into be a view and we are not going to be instance and we are not going to be create object in a particular server, newly created pages all other things.

• Angularjs is bring for us 5 times faster than MVC application.

• Angularjs is separate from mvc in one case

• Where is not going to create multiple pages, it’s going to have one page only.

• In what our have view, controller and model it’s going to take it or render it on a single page.

• The base will be there one the base some like content or things will be change.

• For example, we take some teachers in your collage, the teachers go and take class for students. After one year later freshers is came the same teacher go and take a class for freshers.

• Angularjs is flow of mvc architecture

• Angularjs is used to develop webapplication and mobile application.

• Angularjs developed by google employee he names was Hevery.

• He stated he’s work 2012 onwards.

• We are using 2017 onwards.

• Angularjs have some basics

• It is totally around the pill around of directory

• Directory is noting but where we have some predefined code so, we need to use of predefine code to develop the angular applications.

• We will find models, controllers, views, filters, http object, validations, form objects like lot of things we find in angularjs.

• What will find normal programming languages all things we will find in angularjs but it’s new cover.

• Angularjs is a javascript framework and it can be depending on your directories.

• In Angularjs with extend the html attributes.

• We are going to bind and write expression.

Create new project

Right click on Solution -> Add -> new project -> asp.net web application (.net Framework) -> Next -> project name (AngularExample) -> Create -> web Api and uncheck the Configure for HTTPS under the Advanced -> create, like below.

Go to the google search and type like angularjs.io.org and download the angular.min.js file. After downloaded the angular.min.js file add in Script folder in your application like below.

Then go to controller add one action method and view for particular action method.

If you want to work with angularjs we need angular.min.js library only, no need any other things.

The basic thing in angularjs is expression.

The expression we take it in two flower brackets ({{ }}) like below: 

Expression in angular
{{6+6}}

In case you don’t take angularjs library the output show like below:
{{6+6}}

Incase u take angularjs library like below:

@{
    ViewBag.Title = "Angularjs";
}
<script src="~/Scripts/angular.min.js"></script>
<h2>Angularjs</h2>
    {{6+6}}

It’s show output like below:

{{6+6}}

You adding library but expression is not working because there is one criteria when we need to start expression like, we can’t say in total page where will start the angularjs should be started. We need to be told them using ng-app.

Ng-app is nothing but directory where we start the angular application.

Angularjs lets you extend Html with new attributes called Directives.

<div ng-app="">

</div>

@{
    ViewBag.Title = "Angularjs";
}
<script src="~/Scripts/angular.min.js"></script>
<h2>Angularjs</h2>
<div ng-app="">
    {{6+6}}
</div>

When you build the application, the output is show 12.

Incase you write the expression above the div tag it’s not going to be work.

Basically, Angularjs fallows model view controller type approach like mvc arch.

You Add a folder like Angular in this project 

in that folder add like FirstApplication.js file. FirstApplication.js file is a controller in Angularjs.

The controller coming so, that controller is not going to coming for you on basics of C# class in Angularjs. That's going to indicate like javascript file. It's not going to indicate any other file.

In Angularjs have so many directories are there like ng-app, ng-init, ng-model, ng-bind 

All the directories going to define inside the html only, Like below
<div ng-app="">
    {{6+6}}
    <input type="text" ng-model="FirstName" />
</div>
In above example type is a one type of attribute and ng-model also one type of attribute.

Anything which is inside the controller is called as attribute.

ng-app: directive also tells Angularjs that the <div> element is the “Owner” of the Angularjs application.

ng-app is starting of the Angularjs file.

Data Binding in Angularjs binds Angularjs expression with Angularjs data.

How to bind the string or values like below:

<div ng-app="">
    <input type="text" ng-model="FirstName" />
    {{FirstName}}
</div>

Input tag type is text so, the string will be store in ng-model variable.

ng-model: it's bind the data of your controlles.

ng-init: is a initializes of things.

how can we bind the data in Angularjs?

two ways 
1.Expression
2.ng-bind

ng-bind: 

   when we take apart from controls like below
         <p ng-bind="FirstName"></p>

it's not similar like ng-model but, ng-model is store the data in FirstName variable then bind the data in Expression way like {{FirstName}} but, ng-bind its store the data directly no need to write expression.

Curd operation in Angularjs

Controller: This is a regular javascript object which is used to control the data of the AngularJS application.

Scope: It is the Binding part between the view and the controller. It is an object with defined properties and methods.

Right click on the Angular folder -> Add -> JavaScript File -> Name (FirstApplication)-> Ok

Then javascript file will be created.Copy below code in FirstApplication.js file

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

app.controller('myCtrl', function ($scope, $http) {

    $http.get("http://localhost:51155/api/EmployeeModels")

        .then(function (response) {

            alert(response.data);

            $scope.EmployeeData = response.data;

        })

When you create a curd operation in angular first we define variable like var app
Create an angular module and specify a name to it
var app = angular.module('myApp', []);
 here my model name is myApp & my application name also myApp

second parameter [] means we can inherit services for our application

 create controller name

app.controller('myCtrl', function ($scope, $http){});

 Scope is nothing but through which we are going to pass some data from controller to view and view to controller.

$scope is passing the data from controller to view & view to controller.

It’s a two-way communication.

$http is another service to injected to the controller, I want to use get method post method, all http verbs we want to use it.

$http.get("http://localhost:51155/api/EmployeeModels")

.then(function (response) {

Above function is used to check the condition for data getting or not

Incase the data is getting or not give alert and check it like bellow.

alert(response.data);

then store the data in $scope.EmployeeData, then $scope.EmployeeData send data to view page using help of $scope. Like below

$scope.EmployeeData = response.data;

In view page (AngularExample.cshtml) you the below code

<div ng-app="myApp" ng-controller="myCtrl">

    <table class="table-bordered">

        <tr>

            <th>DeptId</th>

            <th>EmpId</th>

            <th>EmpName</th>

            <th>EmpSalary</th>

        </tr>

        <tr ng-repeat="x in EmployeeData">

            <td>{{x.DeptId}}</td>

            <td>{{x.EmpId}}</td>

            <td>{{x.EmpName}}</td>

            <td>{{x.EmpSalary}}</td>

        </tr>

    </table>

</div>

In above code ng-app="myApp" in this “myApp” is Application name and ng-controller="myCtrl" in this “myCtrl” is a Controller name we defined both in FirstApplication.js page

        <tr ng-repeat="x in EmployeeData">

In above code EmployeeData is define in controller (FirstApplication.js) page like “$scope.EmployeeData” but in view page we use only “EmployeeData”.

ng-repeat: It is one of the directories, it’s works like a foreach loop

 it is a directive to repeats an HTML element.

Which directory we are going to use to repeat in Angularjs? Or how to loop in Angularjs?

ng-repeat

if you want access from FirstApplicaion.js in your view (AngularExample.cs) page, first add the script file in view like below

<script src="~/Angular/FirstApplication.js"></script> 

for inserting purpose copy below code in FirstApplication.js page

    $scope.save = function () {

        $http({

            method: "POST",

            url: "http://localhost:51155/api/EmployeeModels1",

            data: {

                DeptId: $scope.DeptId,

                EmpName: $scope.EmpName,

                EmpSalary: $scope.EmpSalary

            }

        }).then(function mySuccess(response) {

            alert('Inserted Successfully');

        }),function myError(response) {

            alert('Not Inserted');

        }

    }

Copy below code in AngularExample.cs page

    <form>

        <label>DeptId</label>

        <input type="text" ng-model="DeptId" /><br />

        <label>EmpName</label>

        <input type="text" ng-model="EmpName" /><br />

        <label>EmpSalary</label>

        <input type="text" ng-model="EmpSalary" /><br />

        <input type="button" value="Save" ng-click="Save()" />

    </form>

Copy above inside <div> tag.

ng-Click: it is one of the directories, it is a click event