Home > Developer > Web Develop
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 projectView--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
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
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
