var app = Angular.module (' myApp ', []); App.controller (function($scope) { = {') Title ': ' Some txt '};});function ($scope) { = {startingestimate:0}; function () { = $scope. funding.startingestimate *; } $scope. $watch (' funding.startingestimate ', computeneeded);}Does not operate in the global namespace, the specified expression can only access functions and data within the scope of the element controller. 6. Iterative elements<div ng-click= "dosomething (); >
function () { $scope. Students.splice (1, 0, {name: ' Tom Thumb ', ID: ' 4 '});}function () { = ! $scope. Menustate.show;}. Error {background-color:red;}<div ng-controller= ' Headercontroller '> <div ng-class=' {error:iserror, warning:iswarning} '>{{messageText}}</div> <button ng-click=' ShowError (); '> Error hints </button> <tr ng-repeat= ' restaurant in directory ' ng-click= ' selectrestaurant ($index) ' ng-class= ' {selected: $index ==selectedrow}' > <td>{{restaurant.name}}</td> </tr></div>
functionHeadercontroller ($scope) {$scope. IsError=false; $scope. iswarning=false; $scope. ShowError=function() {$scope. MessageText=' This is the wrong message '; $scope. IsError=true; $scope. iswarning=false; }}functionRestauranttablecontroller ($scope) {$scope. Directory=[{name: ' The handsome heifer ', cuisine: ' BBQ ', Name: ' Greens green Greens ', cuisine: ' Salads‘ }]; $scope. selectrestaurant = function (row) {$scope. Selectedrow = row; }}# uses the Ng-class,json key as the CSS class name, and the value is true to apply this class. Data binding on the IMG and a tag is not valid with {{}}, and Ng-src and ng-href are used to intercept the data bind request. 9. Organizing dependencies using modules (module)
><body ng-controller= ' Shoppingcontroller' > <table><tr> <td>{{item.title}}</td> </tr></table></body>functionShoppingcontroller ($scope, items) {$scope. Items= Items.query ();//The items object is defined as a service}//Create a modelvarShoppingmodule =angular.module (' Shoppingmodule ', []);//Service Factory, create items interface, Access serverShoppingmodule.factory (' Items ',function() { varItems = {}; Items.query=function() { //real data pulled from the server return[{title: ', Description:‘‘} ]; }; returnitems;});
The services themselves can depend on each other, and in most applications, create a single module for all the code to use, and put all the dependencies into the module, and work well. If the snazzyuiwidgets and Superdatasync modules are introduced, then the application's module declaration will look like this: var appmod = angular.module (' app ', [' snazzyuiwidgets ', ' Superdatasync ']); 10. filter {{expression | filter Name: Parameter 1: Parameter 2}}{{12.9 | currency | number:0}} $13
//Write your own initial capitalization filter:varHomemodule =angular.module (' Homemodule ', []); Homemodule.filter (' Titlecase ')function() { varTitlecasefilter =function(input) {varWords = Input.split ("); for (var i = 0; i < words.length; i++) {Words[i] = Words[i].charat (0). toUpperCase () + words[i].slice (1); } return Words.join (' '); }; returnTitlecasefilter;});<body ng-app= ' homemodule ', ng-controller= ' HomeController '> > <Body> <H1>A-mail</H1> <DivNg-view></Div> </Body> </HTML>
# list.html<Table><TRng-repeat= ' MessageIn messages '> <TD>{{Message.sender}}</TD> <TD><ahref= ' #/view/{{message.id}} '>{{Message.subject}}</TD> <TD>{{Message.date}}</TD> </TR></Table>
# detail.html<Div> <Strong>To:</Strong> <spanng-repeat= ' RecipientIn message.recipients '>{{Recipient}}</span> </Div> <ahref= ' #/'>Return to List</a>
# Controller.js12. Interacting with the server
//creating a module for the Amail servicevarAmailservices =angular.module (' amail ', []);
//establishing mappings between URLs, templates, and controllersfunctionEmailrouteconfig ($routeProvider) {$routeProvider. When ('/', {controller:listcontroller, Templateurl: ' list.html '}).//Prefix the ID with a colon, specifying a parameterized URLWhen ('/view/: Id ', {controller:detailcontroller, Templateurl: ' detail.html '}). Otherwise ({redirectto: '/‘});}
//Configure RoutingA.mailservices.config (emailrouteconfig);
//Virtual DataMessages = [{}];
//Controller for mailing list datafunctionListcontroller ($scope) {$scope. Messages=messages;}
//gets the message ID from the routing information (resolved in the URL) and uses it to locate the correct mail objectfunctionDetailcontroller ($scope) {$scope. Message=messages[$routeParams. Id];}
// query code, use items in templates, interact with server side best written in service function Shoppingcontroller ($scope, $http) { $http. Get ('/products '). Success (function (data, status, headers, Config) { $scope. Items = data; });}var appmodule =function() { return { function (scope, element, Attrs, controller) { element[0].focus (); } };}); // use <button ngbk-focus> focused buttons </button>var appmodule = angular.module (' app ', [' Directives ']);
<formname= ' Adduserform 'Ng-controller= ' Addusercontroller '> <inputNg-module= ' User.first 'Required> <inputtype= ' email 'Ng-module= ' User.email 'Required> <inputtype= ' number 'Ng-module= ' User.email 'Required> <Buttonng-disabled= '!adduserform. $valid '>Submit</Button></form>The Required property and the email, number type are supported by angular for non-HTML5 browsers; $valid property gets the check state of the form, and when the entry is valid, the angular sets the property to True.
function Addusercontroller ($scope) { = '; $scope. AddUser = function () { //Save to Database }}Link:http://www.cnblogs.com/farwish/p/4996253.html
@ Black eyed poet <www.farwish.com>
[Ng] Angular Application Point Overview
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
