Shulou(Shulou.com)06/02 Report--

Today, I will talk to you about how to get started with AngularJS. Many people may not know much about it. In order to make you understand better, the editor has summarized the following contents for you. I hope you can get something from this article.

Introduction

First of all, we need to point out what angular js is. To put it bluntly, angular js is a class library of Javascript. We can easily create web pages using this class library. Bi-directional binding is an important feature of angular js, which is also a very important feature of angular js compared to other Javascript class libraries. Bi-directional binding means that when you change the value of any attribute, the associated html element will change, and you don't need to modify it extra.

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

Background

If you don't use angular js or other libraries that have similar functions to angular js, such as knockout.js, then we will write more and more complex code when we write code. So writing applications in angular js is faster, more efficient, and easier to manage than other class libraries.

Code usage

Let's learn more about angular js through a simple example.

In order to better understand the knowledge of angular js, we use asp.net as the background application to achieve simple add, delete, modify and query operations, and in this example we use the static list form to show the add, delete, modify and query operations.

There are five attributes in the data model, UserName, Address, Salary, IsMarried, and Email. Records for these properties are listed in the view, and each piece of data is followed by a delete and modify button. Through these buttons, we can create, modify, and delete static lists.

Now let's first 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-- specifies the angular controller used to process this element

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

For example, UserName is an attribute of Model and binds the attribute to the defined element

Data-ng-repeat-- is used to specify the data for the loop

Using the above syntax, we loop through the property of UserData, the angular object, and pull out the data inside. LimitTo:20 indicates a maximum of 20 loops, which is a filter in angular. Of course, other filters can be used in angular.js, such as uppercase, lowercase, currency, and so on.

Data-ng-click-- is used to bind click events

$index-- represents the index in the loop

Data-ng-model-- applies the angular model to the html dom, which means that when the value in the input input box is modified, the properties in the corresponding model also change.

Data-ng-disabled-- disables an element through the value of this attribute or does not disable the

Let's take a look at the following code

Var angularuserApp = angular.module ("userApp", [])

AngularuserApp.controller ("userAppCtrl", function ($scope, $http, $interval, $window,$timeout) {})

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

$http is used to specify the address of the server; $interval and $timeout are similar to interval and timeout in jquery, these two variables are only defined but not used in this example, and they work the same as in jquery; the definition of $window is the same as the window object in Javascript, and you can use this variable to achieve the effect you want to achieve with the window object.

Here is all the HTML code

User Name Address Email Salary Is Married Edit User Information User Name: Address: Email: Salary: Is Married: var angularuserApp = angular.module ("userApp" []) AngularuserApp.controller ("userAppCtrl", function ($scope, $http, $interval, $window, $timeout) {/ / = = Intit Value= $scope.UserName = ""; $scope.Address = ""; $scope.Email = ""; $scope.Salary = null; $scope.IsMarried = null / / = = Intit Value= $scope.LoadIntialData = function () {var routeurl ='@ Url.Action ("GetData", "User")'; $http.get (routeurl) .success (function (data) {$scope.UserData = data;}) .error (function (e) {/ / error handling}) } $scope.LoadIntialData (); $scope.DeleteRow = function (index) {$scope.UserData.splice (index, 1); / / = if you use real time application then need to call to conroller from remove record from db=} $scope.EditRow = function (ele) {$scope.UserName = ele.UserName; $scope.Address = ele.Address $scope.Email = ele.Email; $scope.Salary = ele.Salary; $scope.IsMarried = ele.IsMarried;} $scope.SaveRecord = function () {var invalidfiled = "; if (! $scope.myform.$valid) {return;} else {var IsItemUpdate = false Each ($scope.UserData, function (I, n) {if (n.UserName = = $scope.UserName & & n.Address = = $scope.Address) {IsItemUpdate = true; n.Email = $scope.Email; n.Salary = $scope.Salary; n.IsMarried = $scope.IsMarried }}); if (IsItemUpdate = = false) {var obj = new Object (); obj.UserName = $scope.UserName; obj.Address = $scope.Address; obj.Email = $scope.Email; obj.Salary = $scope.Salary Obj.IsMarried = $scope.IsMarried; $scope.UserData.unshift (obj);} $scope.ClearRecord () / / = if you use real time application then need to call to conroller from save record from db=}} $scope.CheckRecord = function () {if ($scope.UserName! = "& & $scope.Address! =") return false; else return true } $scope.ClearRecord = function () {$scope.UserName = ""; $scope.Address = ""; $scope.Email = ""; $scope.Salary = null; $scope.IsMarried = null;}})

The following is the implementation code of the controller

Public class UserController: Controller {/ GET: / User/ public ActionResult Users () {return View ();} public JsonResult GetData () {List objList = new List (); / / = = Create the test data for in view = = User objuser = new User (); objuser.UserName = "Pragnesh Khalas" Objuser.Address = "Bmur25 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 = "Amur40 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 =" Dmurt 10 Bharat Soci. Ahmedabad "; objuser.Email =" bhavin@gmail.com "; objuser.Salary = 6000; objuser.IsMarried = true; objList.Add (objuser); return Json (objList, JsonRequestBehavior.AllowGet);}}

Here 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;}} after reading the above, do you have any further understanding of how to get started with AngularJS? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.