Home > Developer > Web Develop
<html><head> <meta name="viewport" content="Width=device-width" /> <meta charset="Utf-8"> <script src="Http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js" ></script> <title>Example</title></head><body> <div Ng-app= "" ng-init= "quantity=1;price=5"> <h2>Price Calculator</H2>Number:<input type="number" ng-model="Quantity">Price:<input type="number" ng-model="Price"> <p><b>Price:</b> {{ quantity * Price}} </P></div></body></ HTML> Effect:
I don't feel like writing a JS code, I finished a computational logic!
2. Example: The form value does not need to write the JS code to get the JSON value<html><head> <meta name="viewport" content="Width=device-width" /> <meta charset="Utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/ Angular.min.js "></script> <title>Example</title></head><body> <div Ng-app="myApp" ng-controller="Formctrl"> <form novalidate>First Name:<br> <input type="text" ng-model="User.firstname"> <br>Last Name:<br> <input type="text" ng-model="User.lastname"> <br><br> <button ng-click="reset ()">RESET</button> </form> <p>Form value ={{user}} </P><p> Initial value = {{inituser}}</P> </div> <script> var app = Angular.module (' myApp ', []); App.controller (' Formctrl ', function ($scope) { $scope. Inituser = {Firstnam E: "John", LastName: "Doe" }; $scope. reset = function () { $scope. user = Angular.copy ($scope. Inituser); }; $scope. Reset (); }); </script></body></html>Effect:
The page input value changes, do not need to re-fetch values, such as using jquery, do not use angular, you need to take the value:
var json={};json.firstName=$("#firstName").val();json.lastName=$("#lastName").val();
Now it's easy to do more than just a bit!
2. Example: Binding event makes code easier to maintain<html><head> <meta name="viewport" content="Width=device-width" /> <meta charset="Utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/ Angular.min.js "></script> <title>Example</title></head><body Ng-app="Mynoteapp" ng-controller="Mynotectrl"> <h2>My notes.</H2> <textarea ng-model="message" cols="Max" rows ="Ten"></textarea> <p> <button ng-click="Save ()">Save</button> <button ng-click="Clear ()">Clear</button> </P> <p>Remaining words:<span ng-bind="Left ()"></span></P> <script> varApp = Angular.module ("Mynoteapp", []); App.controller ("Mynotectrl", function ($scope) {$scope. Message =""; $scope. Left = function () { return --$scope. Message.length; }; $scope. Clear = function () {$scope. Message =""; }; $scope. Save = function () {Alert"Note Saved"); }; });</script></body></html>Effect:
The message word change here will trigger the change of the remaining word count.
When angular is not used, we will bind such changes to the change event of message, so that the code to check the remaining words must be thought of as a message event, similar to this:
$("#message").change(function({ $("#leftwordcount").text(left());});
Now that the remaining words correspond to the Ng-bind event of span, you can see where this logic is implemented, and it's easier to find the implementation method to make it easier to maintain this implementation.
Iii. Other summariesFor example, I learned the HTTP part of angular, the syntax is more simple, as long as the important parameters on the line, without jquery http so many options, for simple data requests easier to use:
$http. Get ('/someurl ', config). Then (Successcallback, Errorcallback);
$http. Post ('/someurl ', data, config). Then (Successcallback, Errorcallback);
Of course, there may be some methods encapsulated, parameter reduction, but also not suitable for the processing of complex scenes, I think angular combined with other JS framework to achieve a relatively perfect state, a framework must not meet all the needs of the use. But knowing more about a framework may remind you to use it when you need it.
Attached angular basic Content study website: http://www.runoob.com/angularjs/angularjs-tutorial.html
3 days after learning Angularjs Basic content Summary
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
