The core idea of angular is to drive everything through data, and everything else is an extension of data.
To apply the idea that everything is an object, it can be said in angular that everything is data.
About project construction
(1) requirejs and Yeoman
When you first get into or use Angular, you will always be puzzled with similar questions. My practical answer is that you do not need requirejs or Yeoman. The former is not used because angular itself has the implementation of module. The latter is because Angular organizational structure and project construction are completely unnecessary to be so complicated. Just write or pull a seed project on github.
(2) How to organize project structure
This problem is a bit useless because it varies completely from person to person to project. I personally recommend two organizational structures, one according to the code function, that is, the controller is placed in one folder and the services are placed in one folder. The other follows the implemented functions. For example, the User places the corresponding template, services, and controllers in the User folder.
Both are OK, and from a maintenance perspective, the second one will be better.
(3) Division of controller and service
Here, controllers are usually one controller on a page. If a page has a common part, the public part always uses a controller. The service should be divided into two parts, one is a service that interacts with the server data, and the other is some functional common content, which places some reusable services written by themselves, similar to notify, etc.
As for whether the service should be further divided according to functions and modules, it depends on the project.
(4) Use of Angular plug-ins and libraries
It is definitely not realistic for a project to get ready-made things online, but it is even more unrealistic to write everything yourself. Many plug-ins in Angular are developed by the Angular team or some people encapsulated with jquery plug-ins. My view on plug-ins is very simple. If you use them, you can use them as soon as possible. If you can't meet the needs, you can write them yourself or improve them on existing plug-ins.
For plug-ins that you can't handle for a few hours of debugging, please listen to my advice and give up on them. Most plug-ins are UI plug-ins, so you don't have to pursue complexity. Sometimes simple HTML controls also have their own simple beauty.
If you encounter Angular plugin conflicts, especially UI plugins, you should give up one of them in most cases, such as angular-ui and angular-strap.
Usage Tips
Let’s go to the main text below and I will list some of the techniques I used in the process of using angular, which will be listed one by one in the form of a scene. I will not explain some basic concepts of Angular here. This article is a skillful thing, not a basic tutorial.
(1) flask conflict between "{{}}" in angular and Python
In the template used by Python's flask, data binding is also passed through two "{" braces, which conflicts with angular's data binding. There are two solutions to this. One is to modify the angular's binding mark, and the other is to modify the flask's binding mark. Both solutions are given here.
Modify angular:
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
// Just add this sentence to config and put it in the route module. Here you change the original angular {{ }} binding to {[{ }]} binding to {[{ }]} binding.
Modify flask:
class CustomFlask(Flask): jinja_options = Flask.jinja_options.copy() jinja_options.update(dict( block_start_string='{%', block_end_string='%}', variable_start_string='{#', variable_end_string='#}', comment_start_string='<#', comment_end_string='#>', )) app = CustomFlask(__name__, instance_path='/web')Here I recommend modifying flask, because after using angular, the front and back ends are separated. Flask's jinjia template is no longer needed. At the same time, if you modify the Angular binding tag, other controls and libraries will have problems.
(2) Remove the URL always defaults to "#"
When setting route, enable HTML5 mode.
angular.module('router', ['ngRoute']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $locationProvider.html5Mode(true); // Set this sentence }]);(3) ng-click="expression" and similar instructions, how to write multiple expressions in expression?
For example, if I want to assign values to 2 variables in an ng-click, I can split it through the ";" semicolon:
<a ng-click="obja=1;objb=2"></a>
(4) $watch has no effect or only takes effect once
Generally speaking, this situation will appear when listening to a string or number, $scope.$watch("name", function(){}). It does not take effect or only takes effect once. The solution is that $watch listens to an object as much as possible, and attach the value you want to listen to in an Object.
When you use modal in angular-ui, this is more obvious. The specific reason is because of the inheritance of $scope. Because modal is equivalent to creating another scope in the controller of the current page, it is impossible to retrieve and trace the prototype chain for literals. If you want to solve it, you must have an object to achieve data refresh binding across parent-child scope through the prototype chain.
(5) I hope the content of ng-view is displayed on the entire page
Usually a page may have fixed top-menu or sidebar, such fixed parts, and then each route changes the template of ng-view. If a page wants the entire page to display itself completely, it does not include fixed parts such as top-menu.
Here is usually a template.html displayed by an index.html and an ng-view. Top-menu and sidebar are located in index.html. Their display is hidden by binding a variable to a ng-if.
If a page needs to be fully displayed by itself and does not display sidebar, then a message is sent up in its controller through $scope.$emit, and the controller of the index page listens to the message through $scope.$on. Once the message is heard, the variables that control the visible and hidden sidebar are changed.
You can also use service to control a global variable, and personal recommendations are still through message broadcasting.
(6) Remember to use ng-if instead of ng-show
This is a small pit of angular, or it can be said to be a pit that is not big or small. Some long list data may be displayed by default hidden and clicking to display. This part of the content that can control the visible and hidden will also be accompanied by a lot of data binding. This greatly affects performance when rendering the page.
Take a list. For example, angular usually recommends that a page has no more than 2,000 data binding. If there is a page that directly binds 2,000 models, and then you load it, you will find that it is very stuck. If you set every 100 models to ng-show, it does not display by default, you will find that it is still very stuck.
Then you replace all ng-show with ng-if, and you will find that the performance is instantly fast like two applications. The reason is that ng-show will still execute all bindings, and ng-if will execute bindings when it is equal to true, that is, it will execute the bindings when it is displayed. This will greatly improve the performance. I used this simple modification before, and the page loaded about 10 times faster.
So when you can use ng-if, use it instead of all ng-show and ng-hide.
(7) About ng-bind-html
Usually, data is bound to html elements, and ng-bind is enough, but in some situations, what needs to be bound is not ordinary data, but html. Then ng-bind is not enough. You need to use ng-bind-html, which will output the content as html format. For example, if you want to output html with class, then use ng-bind-html, and the cooperation of ngSanitize is required, and the corresponding file needs to be introduced.
(8) Obtain the result after ng-repeat data filter
This is generally used when searching, such as multiple ng-repeat data forming a list. Then filter a field, and now you need to get the result after filter, there are 2 ways.
One is written in html ng-repeat like this:
ng-repeat="food in foodCategory._displayfoods = (foodCategory.foods | filter: { 'name': searchobj.foodfilter } | orderBy: food.sort_order)"
In this way, _displayfoods is the final display result after filter. Another way is to use two sets of data, one set is written in the controller, and then filter and orderBy are operated in the controller. The final result is used to ng-repeat.
The first method is more convenient, while the second method is better and the performance is good.
(9) ng-class and ng-style assign values by judging
Determine whether to apply a certain class and different styles based on the value of the variable.
ng-class="{'state-error':!foodForm.foodstock.$valid}"
ng-style="{ color: i.color=='' || i.name=='live' ? 'default' : '#ffff' }"
(10) Form verification takes input as an example
The angular form can be checked through the HTML5 attribute of input. Here, it is mainly locked through the form and input name attributes. formname.inputname.$valid indicates whether the space where name is inputname passes its own attribute verification.
(11) $promise for $resource and $http
$q.all([ resource.query().$promise, resource2.query().$promise]).then(functon(success){ console.log(success);},functon(error){ console.log(error);});foodFactory.food.save(f).$promise.then(function(result){ foodFactory.food.get({id:result.id}).$promise.then(function(data){ });});This is not explained, just read it directly. Note that the promise of $http needs to be returned manually, so in general, it passes $resource.
(12) Only one property in the $watch listens for
Set the third parameter of $watch to true to deep watch. However, sometimes you don’t want or need to listen to all the properties of the collection. Just monitor one or several of them, although you can loop $watch through the for loop, it is obviously too frustrating.
Through the following writing method, you can monitor a single object property of a collection.
$scope.people = [ { "groupname": "g1", "persions": [ { "id": 1, "name": "bill" }, { "id": 2, "name": "bill2" } ] }, { "groupname": "g2", "persions": [ { "id": 3, "name": "bill3" }, { "id": 4, "name": "bill4" } ] }]$scope.$watch(function($scope) { return $scope.people.map(function(obj) { return obj.persions.map(function(g){ return g.name }); });}, function (newVal) { $scope.count++; $scope.msg = 'person name was changed'+ $scope.count;}, true);(13) Debounce anti-shake treatment
This is very useful for frequent departure processing and is suitable for some scenarios like ng-change and $watch. For example, when keyword search is eliminated, $debounce is encapsulated as a service, and the interface is called directly. Code: http://jsfiddle.net/Warspawn/6K7Kd/
(14) Quickly locate to a location
Generally speaking, the page can be combined with js code to achieve rapid positioning through the form <a id="bottom"></a>. In angular, it is also implemented through similar principles, and the code is as follows:
var old = $location.hash(); $location.hash('batchmenu-bottom'); $anchorScroll(); $location.hash(old);This is because direct location.hash will cause url changes and page jumps, so a code to prevent jumping is added.
I have summarized so much for the time being. Many things are searched for information and practiced by myself. I hope they will be helpful to the TX you need. If there is any new thing in the future, I will continue to write it.
The above is a summary of Angular application skills. We will continue to add and organize relevant articles in the future. Thank you for your support for this site!