This will bring you to the door of Angular js and to the door of angularjs

This will bring you to the door of Angular js and to the door of angularjs

First, we need to point out what angular js is. In fact, angular js is a Javascript class library. We can use this class library to easily create web pages. Bidirectional binding is an important feature of angular js, which is an important feature of angular js compared with other Javascript class libraries. Bidirectional binding means that when you modify the value of any attribute, the associated html elements also change, and you do not need to modify it.

Angular js also provides us with the MVVM (Model View ViewModel) Model. MVVM means that Model is a real object. We use this object to create a Model that needs to be displayed on the page and call the view Model. View is the page we need to output.

   Background

If you do not use angular js or other class libraries with similar functions as angular js, such as knockout. js, more and more complex code will be written when writing code. Therefore, using angular js to write applications is faster and more efficient, and easier to manage than other class libraries.

   Code usage

Next we will gradually learn about angular js through a simple example.

To better understand angular js knowledge, we use asp.net as the background application to implement simple addition, deletion, modification, and query operations, in this example, we use a static list to display addition, deletion, modification, and query operations.

The data model has five attributes: UserName, Address, Salary, IsMarried, and Email. Records of these attributes are listed in the view, and a delete and modify button is displayed after each data entry. With these buttons, you can create, modify, and delete static lists.

First, let's take a look at the meaning of the attributes used in the following examples.

  Data-ng-app-- Indicates that this is the element to be processed by angular.

  Data-ng-controller-- Specify the angular controller used to process this element

<div id="divUserList" data-ng-app="userApp" data-ng-controller="userAppCtrl"> </div>

  Data-ng-bind-- Specifies the attribute in the model to which the element is bound (UserName, Address, Salary, IsMarried, or Email listed above)

<strong data-ng-bind="UserName"></strong>

For example, UserName is a Model attribute and is bound to a defined element.

  Data-ng-repeat-- Used to specify cyclic data

<tr data-ng-repeat="x in UserData | limitTo:20"  >

Using the above syntax, we loop through the angular object attribute UserData to retrieve the data in it. LimitTo: 20 indicates a maximum of 20 cycles. This is a filter in angular. Of course, other filters such as uppercase, lowercase, and currency can be used in angular. js.

  Data-ng-click-- Used to bind a click event

<input type="button" id="btnDelete" value="Delete" data-ng-click="DeleteRow($index)" />

  $ Index-- Indicates the index in the loop

  Data-ng-model-- Apply the angular model to the html dom, which means that the attributes of the corresponding model change when the value in the input box is modified.

<input type="text" data-ng-model="UserName" required />

  Data-ng-disabled-- Disable an element or not by using the value of this attribute.

<input type="button" id="btnSaveAll" value="Save" data-ng-click="SaveRecord()" data-ng-disabled="CheckRecord()" />

Let's take a look at the code below.

var angularuserApp = angular.module("userApp", []);
angularuserApp.controller("userAppCtrl", function ($scope, $http, $interval, $window,$timeout) {})

The first line of code creates an object, which is specified by the data-ng-app in the html dom. Another line of code creates a controller, which is specified by data-ng-controller.

  $ HttpUsed to specify the server address;$ IntervalAnd$ TimeoutIt is similar to interval and timeout in jquery. In this example, the two variables are defined but not used. Their working principle is the same as that in jquery;$ WindowThe definition is the same as that of the window object in Javascript. You can use this variable to achieve the effect you want to implement with the window object.

  Below are all the HTML code

<div id="divUserList" data-ng-app="userApp" data-ng-controller="userAppCtrl">
    <table class="table-striped table-hover">public class UserController : Controller
   {
       //
       // GET: /User/
       public ActionResult Users()
       {
           return View();
       }
 
       public JsonResult GetData()
       {
           List<User> objList = new List<User>();
 
           //==Create the test data for in view  ============================
           User objuser = new User();
           objuser.UserName = "Pragnesh Khalas";
           objuser.Address = "B-25 Swaminarayan Park Naroda Ahmedabad";
           objuser.Email = "pragnesh@gmail.com";
           objuser.Salary = 9000;
           objuser.IsMarried = true;
           objList.Add(objuser);
 
           objuser = new User();
           objuser.UserName = "Rahul Patel";
           objuser.Address = "A-40 Navkar Soci. Ahmedabad";
           objuser.Email = "rahul@gmail.com";
           objuser.Salary = 8000;
           objuser.IsMarried = true;
           objList.Add(objuser);
 
           objuser = new User();
           objuser.UserName = "Bhavin Patel";
           objuser.Address = "D-10 Bharat Soci. Ahmedabad";
           objuser.Email = "bhavin@gmail.com";
           objuser.Salary = 6000;
           objuser.IsMarried = true;
           objList.Add(objuser);
 
           return Json(objList, JsonRequestBehavior.AllowGet);
       }
   }

  The following is the model code.

public class User
{
    [Required]
    public string UserName { get; set; }
 
    [Required]
    public string Address { get; set; }
 
    [EmailAddress]
    public string Email { get; set; }
 
    public double? Salary { get; set; }
    public bool? IsMarried { get; set; }
}

The above is the overall content of this article, hoping to help you.