1. Beginning
Angular JS is a set of frameworks, templates, data binding and rich UI components used to develop web pages. It provides the architecture of web applications without manual DOM operations. AngularJS is very small, only 60K, compatible with mainstream browsers, and works well with jQuery.
2. Understanding basic principles
① Some introductions to angular
1. Basic knowledge
1.angular gave up IE8
2. The four core points are mvc, modularity, instruction system, and two-way data binding
2. Some principles
1. Do not reuse the controller. A controller is generally only responsible for a small piece of view.
2. Do not operate dom in the controller.
3. Don’t format data in controllerller, ng has good form controls.
4. Do not do data filtering operations in the controller, there is a $filter service.
5. Generally speaking, controllers will not call each other, and the interaction between controllers will be carried out through events.
6.angular uses instructions to reuse view.
7.$scope is a tree structure that is parallel to the DOM tag.
8. The child $scope object will inherit the properties and methods on the parent $scope.
9. Each angular application has only one $rootScope object. (Generally located on ng-app).
10. You can use angular.element($0).scope() to debug.
11. Use ngRoute for routing between views.
3. The most commonly used and practical angular built-in instructions for HTML pages
①.ng-class (suitable for situations where a certain style such as likes and attention will change due to a certain operation)
The ng-class directive is used to dynamically bind one or more CSS classes to HTML elements. The value of the ng-class directive can be a string, an object, or an array.
If it is a string, multiple class names are separated by spaces.
If it is an object, you need to use a key-value pair, which is a boolean value, and the value is the class name you want to add. The class will only be added if the key is true.
If it is an array, it can be composed of strings or combinations of objects, and the elements of the array can be strings or objects.
Two recommended ways to use:
1. In the form of a string, the code is as follows:
<i ng-class="{true:'ion-ios-heart',false:'ion-ios-heart-outline'}[AccountInfo.isFocus]" ng-click='wetherFocus()'></i>This means that the i tag has a basic class icon, ng-class, which binds a dynamic class. The value of this class is determined by whether the AccountInfo.isFocus is true or false. If its value is true, the i tag will add the ion-ios-heart class. If its value is false, the i tag will add the ion-ios-heart-outline. If its value is false, the i tag will add the ion-ios-heart-outline.
This category. The i tag also binds an ng-click event. In addition to handling the corresponding logic, the value of AccountInfo.isFocus is also determined. In this way, when a click operation occurs, the corresponding class of the i tag will naturally be changed, and then different styles will be shown.
2. The style of key-value, the code is as follows:
<i ng-class="{'ion-ios-heart':isIos,'ion-android-heart':isAndroid}"> </i>Obviously, from the code, we can see that this meaning is that when isIos is true, the ion-ios-heart class will be taken, and when isAndroid value is true, the ion-android-heart class will be taken.
②.ng-show and ng-hide (suitable for when displaying two different contents for different situations)
The ng-show directive displays the specified HTML element when the expression is true, otherwise hides the specified HTML element.
The ng-hide directive hides the specified HTML element when the expression is true, otherwise the specified HTML element is displayed.
Haha, it looks like a brother who is incompatible with water and fire. . . .
Examples are as follows:
<div><span ng-click="toggleMenu()"></span></div><div><ul ng-show="menuState">...</ul><div ng-hide="menuState">...</div>
Set a boolean variable menuState (in actual development, you can use expressions, trilogy equations, etc.). When it is true, the content of ng-show will be displayed, and the content of ng-hide will be hidden. Otherwise, the opposite is true. . .
③.ng-switch (suitable for displaying different content in multiple situations)
The ng-switch directive displays or hides the corresponding part according to the expression.
The corresponding child elements use the ng-switch-when directive. If the match is selected, select the display, and the other ones are removed.
By setting the default options using the ng-switch-default directive, the default options will be displayed if none of them match.
example:
<div ng-switch="essayType"><div ng-switch-when="4">.....</div><div ng-switch-when="3">...</div><div ng-switch-when="1">...</div><div ng-switch-when="2">...</div><div ng-switch-default>...</div></div>
④.ng-model (I will mainly talk about the magical small pit of ng-model)
The ng-model directive binds HTML form elements into the scope variable.
If there is no variable in scope, it will be created. ng-model is commonly used in <input>, <select>, <textarea> and other elements.
The following code:
<div><textarea name="my-massage-detail" ng-model="content" placeholder="Please enter a message"></textarea><ang-click="submitMes()">Submit</a><br></div>
By definition, theoretically speaking, when we submit, it is OK to directly obtain the value of the ng-model defined on the page in the controller. But in fact, this is not feasible. Personal tests found that an undefined output was output, and if the initial value of ng-model is defined in the controller, the initial value is obtained instead of the latest value after changing.
I searched for some information, which roughly means it. angular limits some of our definitions. We can only use a non-primitive object to pass parameters.
What does it mean? A little change to the above example, as follows:
html code:
<div><textarea name="my-massage-detail" ng-model="model.content" placeholder="Please enter a message"></textarea><ang-click="submitMes()">Submit</a></div>
Controller code:
$scope.model = {};$scope.model.content = '';$scope.submitMes=function(){console.log($scope.model.content);}That is, we define an object and then define ng-model as a property in this object to handle it. In this way, we get the latest value of ng-model.
Another simple way is to just pass ng-model as a parameter in it.
Examples are as follows:
//HTML code<input type="text" ng-model="code"><button ng-click="setCode(code)">Login</button><br>//controller code$scope.setCode = function(code){alert(code);}4. Practical skills for data interaction
①Use of Promise
ES6 defines the Promise object. This object is very useful, especially when interacting with the background. It not only prevents callbacks from being too deep, but also can be handled uniformly for some situations, and also improves the readability of the code. Such a service is also encapsulated in angularJs, which is $q.
$q exists as a service of angularjs, and is just a simplified implementation of the promise asynchronous programming mode. The defer object (delay object) can be obtained through $q.defer(). There are three methods for this object:
resolve(value): Send a message to the asynchronous execution body of the promise object and tells him that I have successfully completed the task, and the value is the sent message.
reject(value): Send a message to the asynchronous execution body of the promise object and tells him that it is impossible for me to complete this task. The value is the sent message.
notify(value): Send a message to the asynchronous execution body of the promise object to tell him the current task completion. The value is the sent message.
After sending these messages, the existing callback function will be called.
promise is the promise object with this defer object. Promise object can be obtained through defer.promise, some methods of promise object:
Then(successCallback, errorCallback, notifyCallback): The parameters are different callback functions under different messages. Defer sends different messages to execute different callback functions. The messages are passed as parameters of these callback functions. The return value is back to a promise object that exists in support of chain calls. When the first defer object sends a message, the corresponding defer object of the subsequent promise will also send a message, but the messages sent are different. No matter whether the first defer object sends reject or resolve, the second and later are sent resolved, and the message is passable.
catch(errorCallback): then(null, errorCallback).
finally(callback): equivalent to the abbreviation of then(callback, callback). The method in finally does not accept parameters, but can successfully pass the message and message type sent by defer to the next then.
defer(): used to generate a delay object var defer =$q.defer();
reject(): The parameter receives an error message, which is equivalent to throwing an exception in the callback function, and then calling the wrong callback function in the next then.
all(): The parameter is received as a promise array, and a new single promise object is returned. When all the corresponding defer objects of these promise objects are solved, this single promise object will be solved. When one of these promise objects is rejected, this single promise is also rejected.
when(): receives the first parameter as an arbitrary value or a promise object, and the other 3 then methods of the same promise, and the return value is a promise object. If the first parameter is not a promise object, the success callback will be run directly and the message is this object. If it is a promise, the promise returned is actually a wrapper for the argument of this promise type. The message sent by the defer corresponding to the incoming promise will be received by the promise object returned by our when function.
The specific usage is as follows:
In angular, define a service specifically for interaction.
get: function (url, options) { <br> var deferred = $q.defer(); <br> showTip();$http.get(url, options).success(function (data) {hideTip();if (data.Success) {deferred.resolve(data);} else {deferred.reject(data.Message);}}).error(function (data) {hideTip();deferred.reject(data);});return deferred.promise;}//The call in the controller get('url',params).then(function (data) {//Here is successCallback},function (data) {//Here is errorCallback});In this way, we can define some prompts uniformly when each request is issued, and then hide these prompts after the request is finished. In this code, the general meaning is that when the request is successful, deferred.resolve(data) will be called to set the status to success, so that the first function in then will be automatically executed, namely successCallback, and the requested data data will be passed in. When the request fails, the second function, namely errorCallback, will be called.
The above is the practical development skills of AngularJS that the editor introduced to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!