Preface
The content of this article to share with you is full-stack skill training: using Angular and Spring Boot to create technical documents for full-stack applications.
After years of development of the full stack, the technical system has become very complex. Look at the endless technical knowledge graphs, but have you ever noticed that many of the same ideas are applied everywhere? Not only in the same technical system, but the application across systems is actually more obvious.
For example, the event stream of RxJS, the MessageQueue of the back-end, and the current serverless architecture are inextricably linked in deep thinking. With this vision, you will not only be able to learn across fields more easily, but more importantly, you will have extremely rare foresight. And technical foresight can make you three years ahead of others. Don't be afraid to sleep under a tree halfway through.
Of course, if you are a young man who is still ambitious, you should understand the value of foresight. One day, your foresight will not even be limited to technology.
Different from the usual understanding, in my opinion, the full stack is not a combination of specific technologies, but a way of thinking and a vision. Don't know what everyone thinks?
The full stack is the second pulse of technology. It puts a lot of technical ideas through the two main lines of front and back. They are both different and connected. It is neither abstract enough to make you find concrete examples to understand these ideas, nor is it narrow enough to let you only know the reason but not know why.
In short, don't be confined to the view of the door. There is no front-end engineer, and no back-end engineer. A programmer with a technical pursuit must first be an engineer. The thinking and enthusiasm of an engineer is your most precious asset.
This article will give you a systematic introduction from the three parts of the catalog, the main content and the summary. I hope you can learn new technical knowledge and new architectural thinking, and can use it flexibly. I hope you will like it! !
table of Contents
main content
The content of this article will be introduced to you with 9 chapters:
Chapter 1 Technology Selection and Environment Construction; The main principles of technology selection: mature framework, active community, engineering support, unified programming ideas, rapid development support!
Chapter 2 uses Angular to quickly construct front-end prototypes; this chapter will start from the core concepts of Angular. Section 2.1 uses a series of small examples to explain the meaning and usage of these concepts. Readers with Angular foundation can skip or select the content that interests them. In section 2.2 , we will get to know Angular Material, the official UI component library of Angular, which is a set of component libraries that follow the Google Material Design style. The advantage of using it is that you can save a lot of effort in component standardization, animation, and compatibility. Even if you are not familiar with CSS, you can make good-looking UI effects. I will also learn a few more common components together, of course just the initial simple framework and page, using the Angular Material component library and Angular FlexLayout layout library. In section 2.3, we will learn about the theme support of Angular Material and learn how to customize the theme. Section 2.4 uses containers to build applications. We will not specifically talk about the knowledge of containers, but there will be corresponding instructions in the book where containers are needed. The reason for using containers is that it can make the entire development and deployment process more automated and improve production efficiency.
Chapter 3 What is the backend; Spring Boot is the "scaffolding" of the Spring framework, it can help you quickly build and publish a Spring application. The official website lists several main goals of Spring Boot.
●Provide a fast and widely applicable Spring development experience.
●Out of the box, it can adapt to various changes.
●Provide a series of "non-functional" features commonly used in development (such as embedded server, security, measurement, self-check and external configuration, etc.).
●No code is generated, no XML configuration is required.
The back-end services in this article are mainly built using SpringBoot.
Chapter 4 The construction of login authentication function; in fact, we can use ordinary CSS and HTML to build an Angular application, and the advantage of using a UI framework like Angular Material is that it can be quickly developed using relatively formed UI components. Instead of spending energy re-creating wheels. So in Section 4.1 we will continue to learn several Angular Material components, including form controls FormField and MatInput; layout controls GridList and Stepper; and the development of custom form controls. We will develop two form controls, ImagePicker and Image Picker Verify mobile number control VerifyMobile.
This chapter will not only learn some knowledge of Angular Material, but also learn the concepts of Angular modularization, service layer development, reactive programming, and reactive programming framework RxJS. Finally, we will apply the above skills to create a more complex The interactive application forgets the password one by one.
Chapter 5 Building Back-end API; Chapter 3 is just a general introduction to the powerful functions of Spring Boot. In this chapter, we will discuss the login authentication API in detail.
- 5.1 HyperMedia API and traditional API
- 5.2 Query in Spring Data
- 5.3 Controller construction
- 5.4 Building a secure API interface
- 5.5 Cross-domain and API documentation
Chapter 6 Front-end and API coordination; In the previous chapters, we introduced the front-end and back-end separately, but in actual applications, the two must be coordinated. The back-end serves as the provider of content resources, and the front-end serves as the consumer of these resources, presenting the resources to the users in the required form, that is, our end users.
- 6.1 Responsive HTTP API processing
- 6.2 Advanced RxJs
- 6.3 HTTP interception
- 6.4 Angular routing
- 6.5 Security Guard
Chapter 7 The back-end is not just an API; what separates the front-end and the back-end is that the rendering and routing functions of the back-end for views are stripped to the front-end. It seems that the work of the back-end is only to build the CRUD API, which is really the case Isn't it? The back-end processing work is actually much more than API, unless what you want to do is just to cooperate with a "scaffolding" built by the front-end.
After stripping off the front-end, most of the work on the back-end is really "back-end", because the implemented functions have no user interface, such as performance, security, search, and data audit history. This chapter will take a look at these functions of the backend. It should be noted that these functions are very professional and require in-depth study. Here we are just taking everyone to start. The relevant details need us to continue to learn and learn together in future work. Experience.
Chapter 8 Front-end Engineering; Today's front-end is far from being able to deal with some simple HTML, CSS and JavaScript. More and more functions are required to be implemented in the front-end. It can be said that the front-end complexity has been required to match Android or iOs has the same level of ecological support (if not stronger). Therefore, we have seen the front-end development from the support of the class library level of JQuery to the two-way binding mechanism similar to Knockout.js, to the ecology of various framework levels represented by Angular, React and Vue.
Overall, the current three mainstream frameworks all have the following characteristics.
●The development model is closer to traditional client programming. Many readers with client, mobile or back-end development experience will feel that using these frameworks is very similar to their previous development habits.
A large number of functional programming applications make front-end development different from traditional development, that is, business logic can be quickly and beautifully implemented, but it does raise the threshold. Of course, this functional programming is not necessary, but if you master it, you can write "robust" code logic more beautifully and simply.
●Ecological support such as UI, routing, state management, etc. built-in or provided by the community.
Among them, Angular belongs to the "big and comprehensive" style in several major frameworks. The advantage is that the official support includes CLI, routing, animation, server rendering, UI, etc., which is a good news for patients with phobias. The style is very similar to Java and .Net, if you have a relevant language background, then getting started is extremely fast. But there are advantages and disadvantages, which makes readers without object-oriented experience find Angular more difficult than other frameworks. In terms of engineering support, Angular is more suitable for large teams to do large projects, while Vue is suitable for more lightweight rapid development.
Chapter 9 Spring Cloud builds microservices; Spring Cloud is a cloud application development environment based on Spring Boot. It provides configuration management, service discovery, circuit breakers, intelligent routing, micro-agents, and control involved in the development of Java-based cloud applications. Operations such as buses, global locks, decision-making campaigns, distributed sessions, and cluster state management provide a simple development environment and mode.
Spring Cloud contains multiple sub-projects (for multiple different open source products involved in distributed systems), such as: Spring CloudConfig, Spring Cloud Netlix (including Eureka, Hystrix, Zuul and other Nttlix family buckets), Spring Cloud Gateway, Spring Cloud AWS , Spring Cloud Security, Spring Cloud Commons, Spring Cloud Zookeeper, Spring Cloud CLI and other projects.
This [Full-stack Skills Training Using Angular and SpringBoot to Create Full-Stack Applications] has 526 pages. Friends who need the full version can forward this article to follow the editor, and the private message editor [Technology] to get it! !
Recommended by Daniel experts
This article covers the front-end and back-end technologies. The front-end uses Angular and the back-end is based on the latest Spring Boot technology stack.
After reading this article, readers can develop a complete business system in the case of individual combat, which is what I have been doing.
Although the current division of technology is getting more and more detailed, from the perspective of personal career development, I strongly recommend that friends be a true full-stack developer.
I hope that this article can help you learn, and that you can master all the technologies in your own hands and use them flexibly to continuously improve the breadth and depth of your technology and make yourself more valuable! !
May you leave half your life and return as a teenager!
Struggle to achieve a better self!
