Home > Developer > Web Develop
These days began to learn angular this MVC framework, Edge Crossing Web documents and YouTube video edge to do examples, now to organize their own learning to share with you, but also hope that there are angular Daniel to teach and discuss.
We envision one of the most basic Web scenarios: Getting data from a server and using that data to render our pages dynamically. Suppose we currently need to get information about all the members of a group of teams and show that the information of the team members is member name, age.
(Example of a control on a page)
First we need to write a simple template for the page we need to render:
When I created this control I used a set of CSS designed by Flatui to extend Bootstrap. You can go here to download the free Flatui version: https://github.com/designmodo/Flat-UI/archive/master.zip
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <Linkrel= "stylesheet"href= "/flatui/css/vendor/bootstrap.min.css"> <Linkrel= "stylesheet"href= "/flatui/css/flat-ui.min.css"> <Scriptsrc= "/js/angular/angular.min.js"></Script> <Scriptsrc= "/js/mine.js"></Script></Head><BodyData-ng-app= "Zzusrdirective"style= "padding-top:40px"> <Divclass= "Container"Data-ng-controller= "Row-ctrl"></Div></Body></HTML>
We're in the body. We defined a label Data-ng-app and named him "Zzusrdirective", which defines a angular model, which I understand as an MVC enclosing domain, which we will expand around this data-ng-app.
Open our JS file mine.js, typing the following code:
1(function(angular) {2Angular.module (' zzusrdirective ', [])3. Controller (' Row-ctrl ', [' $scope ', ' $http ', ' $compile ', ' $element ',4 function($scope, $http, $compile, $element) {5$http. Get (' Http://localhost:8080/users '). Success (function(JSON) {6$scope. JSON =JSON;7 varHTML =8' <div data-ng-repeat= ' line in JSON ' class= ' row ' > ' +9' <div data-ng-repeat= ' user in line "class=" col-md-3 "> ' +Ten' <zzuserbox index= ' {{$parent. $index *3+ $index}} ' get= ' Getbyidx ' ></zzuserbox> ' + One' </div> ' + A' </div> '; - $element. Append (HTML); - $compile ($element. Contents ()) ($scope); the }); -$scope. Getbyidx =function(idx) { - varOutidx = Math.floor (IDX/3); - varInnidx = idx%3; + return$scope. Json[outidx][innidx]; - }; + }]) A. directive (' Zzuserbox ',function() { at return { - scope: { -Get: ' & ' - }, -Restrict: ' E ', -Templateurl: ' box.html ', inLink:function($scope, $element, $attr) { -$scope. JSON =$scope. Get () (parseint ($attr. index)); to$scope. Amnt =$scope. json.amnt; +$scope. Name =$scope. json.name; - }, theController:function($scope) { * } $ };Panax Notoginseng }); -}) (Window.angular);
AngularJS creating a simple and interactive control (i)
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
