Preface
As a classic mvc framework, it is possible to create components that can be reused or to perform bidirectional data binding. Domestic / are all the same type of frameworks. They used to work as the main focus, mainly for business systems, and in the future, the technology stack may be mainly vue. This is a brief summary of the use of this, and we use version 1.5+ here. Let’s not say much below, let’s take a look at the detailed introduction:
Basic concepts
1. Dependency injection
Dependency injection is everywhere in angular. Here we will not read the text according to the script, but only briefly describe the basic usage method in a very straightforward way, taking $scope injection as an example.
Create a controller and inject $scope, there are three ways to write it:
1) Implicit injection
function HomeController($scope){};
2) Inline injection
('HomeController',['$scope',function($scope){ }])
3) Explicit injection
(‘HomeController',HomeController);
HomeController.$inject=[‘$scope'];
function HomeController($scope){
}
Notice:Since the first injection method is to implement injection by performing toString operations on the function and then using regular matching parameter names, this method cannot compress and obfuscate the code.
2、directive
The instruction system, I think, is the most powerful and complex part of the version. The angular author himself is a back-end, so the entire instruction cycle also conforms to the language processing process: after compilation (compile function, link function will be returned), link processing (link function).
1) The most basic configuration of the instructions
(‘dire',function(){
return function(){
return {
template/templateUrl:'', //stencil
scope:{} //To true or to represent isolation scope for an object
restrict 'ACEM'//How to use
link:function(scope,ele,attrs,controllers){}
compile:function(ele,attr){return function(){}}//If this function exists, the link function will be ignored because the compile function will return the link function
}
}
});
2) About the binding strategy
There are three main ways to exchange data between parent-child scopes (or four)
@binding, the value of the directive attribute can be expressed using an expression, but the resulting value must be a string;
& Binding, represents reference binding, mainly binds functions in the parent scope, and implements injection of concerns
=Binding, indicating two-way data binding
<Binding, means one-way binding
Notice:For the use of & binding, it is mainly to achieve the transmission of child scope to parent scope. I personally prefer the parent-child interaction method in vue: props in, event out. So here I usually use scope.$emit('xxx',data) to achieve child transmission of parent.
3、component
component is a new method added to 1.5+. It is mainly to make the over-the-top angular2+ more natural, which is equivalent to the simplification of the instruction restrict: 'E', similar to the component in vue. It is not recommended to operate the dom, and it is generally only used for rendering. It is recommended to build a pure component.
4、controller
The controller can be considered as a place to encapsulate program logic. It is similar to the controller in the backend mvc. When you get the modal and render the template, in angular, $scope is the bridge connecting the controller and the view, and $scope is the basis for implementing data binding. See the document for details, and will not be repeated here.
The controller creation method is mainly divided into static factory method registration and dynamic registration:
1) Static registration:
(‘HomeController',function(){})
2) Dynamic registration:
$(“HomeController”,function(){})
Notice:Dynamic registration is the basis for implementing on-demand loading. In the project structure practical module, it will demonstrate how to implement dynamic on-demand loading controller based on requirejs (of course, you can also use the oclazyload module to achieve on-demand loading).
5、service
Service generally encapsulates general code. The so-called general code is generally code used across controller/directive, etc., so it is often used to encapsulate ajax interface access, tool interface, etc.
There are three ways to create service:
1) The most original way to create a provider can be injected into config, plus the provider suffix, and there is a fixed format. The $get function must be returned.
2) Factory is a package of provider, and you can directly return the object.
3) Service is the easiest way to create a service by passing a constructor.
6、filter
Filters mainly implement the formatting of objects
7、router
The built-in routing module ngRoute is used less, mainly because it cannot implement complex routing such as nesting, multi-layer, etc. Of course, it can also be combined with ng-include to achieve similar effects. It is recommended to use the third-party routing module ui-router. ui-router is a routing framework based on state and is the most commonly used routing mode.
Summarize
The above is the entire content of this article. I hope that the content of this article will be of some help to everyone’s study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.