Home > Developer > Web Develop
MVC pattern Everyone is very familiar with, then angular is how to plan it. Data is placed in a JSON file, and data is obtained through Ajax.
[{"Action": "Buy Flowers", "Done": false}, {"Action": "Get Shoes", "Done": false}, {"Action": "Call Leona", "Done": true}, {"Action": "Collect Tickets", "Done": false}]
<! DOCTYPE html>We know that model, is the place where data is stored, the data is crud logic.
In the routine, a Todo.json file is used first to encapsulate the data.
access to Datavar Todoapp = angular.module ("Todoapp", []);//After HTML is the ANGULARJS instruction, specify the program domain. Instantiating a Todoapp domain with a module/*
* $http represents ANGULARJS built-in services. I get the data with GET request, through the success function to get the data out of the JS object. Then add the Items property assignment to the model.
Todoapp.run (function ($http) { $http. Get ("Todo.json"). Success (function (data) { model.items = data; }); } );To this, the model data has been completed. All the data for our form.
Application of ControllerBecause it is a routine, I am also recently learning, so I have learned to write down the sentiment,
<body ng-controller= "Todoctrl" > //ng-controller is angularjs instructions, but also a angular controller, according to the name of the book is generally known as the Convention. For example: <name>ctrl.The controller's role is to link the bridge between the model and the view, where the controller displays the model data through the $scope in the View view.
Todoapp.controller ("Todoctrl", function ($scope) { $scope. Todo = model;});//$scope is built-in, representing the domain, Indicates that the model data needs to be displayed in the view.<TR ng-repeat= "item in Todo.items > <td>{{item.action}}</td> <td><input type=" CheckBox " ng-model=" Item.done "/></td> <td>{{item.done}}</td> </tr>The above is just a one-way data binding, that is, by using a controller to bind the model data to the view. The data on this page is dead and cannot be changed, that is, you cannot interact with the user. Angular implements a two-way data binding model.
Controller behaviorBehavior refers to the behavior of the JS function, which can manipulate the data (model).
Create user Behavior $scope. Incompletecount = function () { var count = 0; Angular.foreach ($scope. Todo.items, Function (item) {//angular) provides a ForEach function that is fully compliant with the JS standard. if (!item.done) { count++; } }); return count; };<span class= "label Label-default" ng-hide= "Incompletecount () ==0" >{{incompletecount ()}}</span>// Control the display with the Done property, hide, Ng-hide is also an instruction when do is selected.In order to achieve richer operations, the controller's behavior can be created by relying on behavior and reducing behavior. Easy to maintain and test.
The dependency behavior creates the behavior when the remaining less than 3 o'clock shows label-success, otherwise label-warning. $scope. WarningLevel = function () { return $scope. Incompletecount () < 3? "Label-sucess": "Label-warning"; };Responding to user interaction
Responds to user interaction $scope. AddNewItem = function (actiontext) { $scope. Todo.items.push ({action:actiontext, done:false} ); };Filter filters<button class= "btn btn-default" ng-click= "AddNewItem (actiontext)" >Add</button>//Display the data entered by the user.
<TR ng-repeat= "Item in Todo.items | checkeditems:showcompleted | By: ' Action ' >//Custom<TR ng-repeat= "Item in Todo.items | Filter:{done:false} | ORDER BY: ' Action ' >//angular implements the filter ' | ' Pipeline command.Customize your own filters items, which are defined by $scope. todoapp.filter ("CheckedItems", function () { return function (items, showcompleted) { //items is a $ Scope.todo.items came. var resultarr = []; Angular.foreach (items, function (item) { if (Item.done = = False | | showcompleted = = true) Resultarr.push (item); c7/>}); return Resultarr;}; });View views
View is the part of the DOM that presents the data.
&NBSP;
<body ng-controller= "Todoctrl" > <div class= "Page-header" >As a result:
To sum up, how to make good use of MVC pattern, is the design has been maintained, tested Web site important ideas. It's just what we learned today.
AngularJs (i) Application of MVC pattern
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
