Home > Developer > Web Develop
(function () {
/*code*/
})();
Self-executing anonymous function:
Common formats: (function () {/* code */}) ();
Explanation: The first pair of parentheses of the enclosing function (function () {}) returns an unnamed function to the script, followed by a pair of empty parentheses that immediately execute the returned unnamed function, with the parameters of the anonymous function in parentheses.
Role: You can use it to create a namespace, as long as you write all of your own code in this special function wrapper, then the external can not access, unless you allow (the variable is preceded by the window, so that the function or variable becomes global). The code for each JavaScript library is basically this form of organization.
To summarize, the function of execution is mostly anonymous and automatic, and the code is already running when it is interpreted.
1: Automatic execution when code is loaded
2: Prevent global variables from being contaminated
1: Eliminate some unreasonable and unreasonable JavaScript grammar, reduce some strange behavior;
2: To eliminate some unsafe code operation, to ensure the security of code operation;
3: Improve the efficiency of the compiler, increase the speed of operation;
4: Pave the future for a new version of JavaScript.
The Ng-app directive tells the angularjs,<div> element to be the "owner" of the AngularJS application.
The Ng-model directive binds the value of the input field to the application variable name.
The ng-bind directive binds the application variable name to the InnerHTML of a paragraph.
Example:
<!doctype html>
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<body>
<p><input type= "text" name= "MyName" ng-model= "name"/></p>
</body>
We recommend placing the script at the bottom of the <body> element.
This will increase the page load speed, because HTML loading is not subject to script loading.
Ng-init instruction initialization AngularJS Application variable
<!doctype html>
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<body>
<div ng-init= "firstname= ' John '" >
<p>
<span ng-bind= "FirstName" ></span>
</p>
</div>
</body>
The AngularJS expression is written in double curly braces: {{expression}}.
AngularJS expressions bind data to HTML, which is similar to the Ng-bind directive.
AngularJS will "output" the data where the expression is written.
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
instance {{5 + 5}} or {{firstName + "" + LastName}}
Example:
<!doctype html>
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<body>
<div ng-app= "" ng-init= "price=5.0;count=4" >
<p> My first expression: {{5 + 5}}</p>
<p>totalprice:{{price * count}}</p>
</div>
</body>
The AngularJS module defines the AngularJS application.
The AngularJS controller is used to control AngularJS applications.
The NG-APP directive defines the application and Ng-controller defines the controller.
The Ng-model directive binds the value of the input field to a variable created by AngularJS.
Example:
<!doctype html>
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<body>
<div ng-app= "myApp" ng-controller= "Myctrl" >
<p>firstname:<input type= "text" ng-model= "FirstName"/></p>
<p>lastname:<input type= "text" ng-model= "LastName"/></p>
<p>name:{{firstname + "" + lastname}}</p>
</div>
<script>
var app=angular.module (' myApp ', []);
App.controller (' Myctrl ', function ($scope) {
$scope. FirstName = ' Jhon ';
$scope. LastName = ' Tom ';
});
</script>
</body>
HTML5 new Features: type number, date, month
<!doctype html>
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<body>
<div data-ng-app= "" data-ng-init= "price=5;count=4" >
<input type= "Number" ng-model= "Count"/>
<input type= "number" ng-model= "Price"/>
<p>totalprice:{{price * count}}</p>
<input type= "Date" ng-model= "date"/>
<input type= "Month" ng-model= "month"/>
</div>
</body>
The AngularJS perfectly supports the database's CRUD (add Create, read, update, delete) applications.
Think of the objects in the instance as records in the database.
<!doctype html>
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<body>
<div data-ng-app= "" data-ng-init= "names=[
{' name ': ' Tom ', ' Country ': ' China '},
{' name ': ' Jack ', ' Country ': ' USA '},
{' name ': ' Lucy ', ' Country ': ' Japan '}] " >
<p> iterating through arrays using Ng-repeat </p>
<div data-ng-repeat= "x in Names" >
{{x.name + "" + X.country}}
</div>
</div>
</body>
In the above example, the prompt information is displayed if the Ng-show property returns True.
Example:
<!doctype html>
<script src= "Http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >
</script>
<body>
<div ng-app= "" >
<form name= "MyForm" action= "" method= "get" >
<p><input type= "text" name= "MyName"/></p>
<p>
<input type= "Password" name= "MyPwd" ng-model= "MyPwd"/>
<span ng-show= "Mypwd.length > 8" > Password length not exceeding 8</span>
</p>
</form>
</div>
</div>
</body>
Angularjs Learning Summary One (expressions, directives, models)
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
