Four characteristics of Angularjs
①. Design Patterns using MVC
②. Bidirectional data binding
③. Dependency Injection
④. Modular Design
Now describe the MVC design pattern:
Mvc:
Model (models)-Data in a project
View--Rendering of data
Controller--Gets the model data and selects the view to render.
The whole MVC process is like, the user behavior triggers the controller, then changes the model data, passes the model processing, updates the related view. form the circulation of MVC. Here's how to implement the MVC steps in Angularjs.
The basic steps of MVC using NG:
① declaring a module
var app = angular.module (' module name ', [dependency list])
② Registration Module
ng-app= ' module name '
③ Declaration Controller
App.controller ("Name of Controller", Func)
④ using the Controller
<any ng-controller= ' controller name ' ></ANY>
⑤ Manipulating model data
$scope object to define the model data: $scope. Name= ' Mini_fan '
$scope is a bridge to building model data and views
Here's a shopping cart practice to familiarize yourself with the MVC steps
Goal: Create a simple shopping cart that can display, add, and delete shopping information in your shopping cart
The implementation results are:
Function 1: Display function 2: Add function 3: Delete
1 <!DOCTYPE HTML>2 <!--2. Completing the module registration via the NGAPP command -3 <HTMLNg-app= "MyModule">4 <HeadLang= "en">5 <MetaCharSet= "UTF-8">6 <title></title>7 <Scriptsrc= "Js/angular.js"></Script>8 </Head>9 <!--4. When the body is loaded, it executes the Myctrl controller -Ten <BodyNg-controller= "Myctrl"> One A <Table> - <thead> - <TR> the <th>Price</th> - <th>Number</th> - <th>Subtotal</th> - <th>Delete</th> + </TR> - </thead> + A <tbody> at <TRng-repeat= "tmp in cart track by $index"> - <TD>{{Tmp.price}}</TD> - <TD>{{Tmp.num}}</TD> - <TD>{{Tmp.price*tmp.num}}</TD> - <TD><ButtonNg-click= "Deletecart ($index)">Delete</Button></TD> - </TR> in </tbody> - </Table> to <ButtonNg-click= "Addcart ()">Add to</Button> + <Script> - //1. Declaring a module the varapp=Angular.module ('MyModule', ['ng']); * //3. Statement of the Controller $ App.controller ('Myctrl', function($scope) {Panax Notoginseng //5. Manipulating model data - $scope. Cart= [ the {price:4, Num:2}, + {price:9, Num:1}, A {price:5, Num:3} the ]; + $scope. Deletecart=function($index) { - $scope. Cart.splice ($index,1); $ } $ $scope. Addcart=function(){ - $scope. Cart.push ({price:4, Num:2}); - } the }); - </Script>Wuyi </Body> the </HTML>
ANGULARJS Study notes 2--The four characteristics of MVC