What is AngularJS?
AngularJs (hereinafter referred to as ng) is a structural framework for designing dynamic web applications. First of all, it is a framework, not a class library, but provides a complete set of solutions for designing web applications like EXT. It's not just a javascript framework, because its core is actually an enhancement to HTML tags.
What is HTML tag enhancement? In fact, it is to enable you to complete part of the page logic with tags. The specific method is to use custom tags, custom attributes, etc. These tags/attributes that are not native to HTML have a name in ng: directive. This will be introduced in detail later. So, what is a dynamic web application? Unlike traditional web systems, web applications can provide users with rich operations and can continuously update views as users operate without url jumping. ng also declares that it is more suitable for the development of CRUD applications, that is, applications with more data operations, rather than games or image processing applications.
To achieve these, ng introduces some great features, including template mechanisms, data binding, modules, instructions, dependency injection, and routing. Through the binding of data and templates, we can get rid of tedious DOM operations and focus on business logic.
Another question is, is ng an MVC framework? Or MVVM framework? The official website mentioned that the design of ng adopts the basic idea of MVC, but it is not entirely MVC, because when writing code, we are indeed using the ng-controller instruction (at least from the name, it is MVC), but the business processed by this controller basically interacts with the view, which seems very close to MVVM. Let's turn our attention to the non-striking title on the official website: "AngularJS — Superheroic JavaScript MVW Framework".
The Module class in AngularJS is responsible for defining how the application is started, and it can also define each fragment in the application through declarative means. Let's see how it implements these functions.
1. Where is the Main method
If you are transferred from Java or Python programming languages, then you may be wondering where is the main method in AngularJS? Where is this method that starts everything and is the first one being executed? Where is the method in JavaScript code that is responsible for instantiating and combining everything together, and then commanding the application to start running?
In fact, AngularJS does not have a main method. AngularJS uses the concept of modules instead of the main method. Modules allow us to describe dependencies in the application in a declared way and how to assemble and start. The reasons for using this method are as follows:
1. The module is declarative. This means it is easier to write and understand, and reading it is like reading ordinary English!
2. It is modular. This forces you to think about how to define your components and dependencies to make them clearer.
3. It makes testing easier. In unit testing, you can selectively add modules and avoid the existence of content in the code that cannot be unit testing. At the same time, in scenario testing, you can load other additional modules so that you can better work with other components.
For example, in our application there is a module called "MyAwesomeApp". In HTML, just add the following to the <html> tag (or technically, it can be added to any tag):
<html ng-app="MyAwesomeApp">
The ng-app directive will tell AngularJS to use the MyAwesomeApp module to start your application. So, how should modules be defined? For example, we recommend that you define different modules for services, directives, and filters separately. Your main module can then declare dependencies on these modules.
This makes module management easier because they are all good and complete code blocks, and each module has and only one function. At the same time, unit tests can only load the modules they focus on, which can reduce the number of initializations and unit tests will become more refined and focused.
2. Loading and Dependency
The module loading action occurs in two different stages, which can be reflected from the function name, namely the Config code block and the Run code block (or stage).
Code block
During this stage, AngularJS will connect and register all data sources. Therefore, only data sources and constants can be injected into the Config code block. Those services that are not sure if they have been initialized cannot be injected.
Code block
Run code block is used to start your application and start execution after the syringe is created. To avoid configuring the system after this starts, only instances and constants can be injected into the Run code block. You will find that in AngularJS, the Run code block is the most similar thing to the main method.
3. Quick method
What can be done using modules? We can use it to instantiate controllers, instructions, filters, and services, but we can do more with module classes. The API method for the following module configuration:
(configFn)
This method can be used to do some registration work, which needs to be completed when the module is loaded.
(name, object)
This method will run first, so you can use it to declare the application-wide constants and make them available in all configuration (config methods) and instances (all methods later, such as controller, service, etc.) methods.
(name,constructor)
Its basic function is to configure the controller for later use.
(name,directiveFactory)
This method can be used to create directives in the application.
(name,filterFactory)
Allows you to create named AngularJS filters, as discussed in the previous chapter.
(initializationFn)
This method can be used if you want to perform certain operations after the syringe is started, which need to be performed before the page is available to the user.
(name,object)
Allows injection of values throughout the application.
(name,factoryFn)
If you have a class or object that needs to provide it with some logic or parameters before initializing it, then you can use the factory interface here. factory is a function that is responsible for creating some specific values (or objects). Let's look at an instance of a greeter function, which requires a greeting to be initialized:
function Greeter(salutation) {
= function(name) {
return salutation + ' ' + name;
};
}
The greeter function example is as follows:
('greeter', function(salut) {
return new Greeter(salut);
});
Then you can call it like this:
var myGreeter = greeter('Halo');
(name,object)
The difference between factory and service is that factory will directly call the function passed to it and then return the result of the execution; while service will use the "new" keyword to call the constructor passed to it and then return the result. Therefore, the previous greeter Factory can be replaced with the following greeter Service:
('greeter', Greeter);
Whenever we need a greeter instance, AngularJS will call the new Greeter() to return an instance.
(name,providerFn)
Provider is the most complex part of these methods (apparently, the most configurable part). The provider is bound to both factory and service, and before the injection system is ready, you can also enjoy the benefits of configuring the provider function (that is, the config block).
Let’s take a look at what the greeter service looks like after using provider transformation:
('greeter', function() {
var salutation = 'Hello';
= function(s) {
salutation = s;
}
function Greeter(a) {
= function() {
return salutation + ' ' + a;
}
}
this.$get = function(a) {
return new Greeter(a);
};
});
This way we can set greetings dynamically at runtime (for example, it can be set according to the different languages used by the user).
var myApp = (myApp, []).config(function(greeterProvider) {
('Namaste');
});