Use AngularJS to compile a more elegant JavaScript code Guide _ AngularJS

This article describes how to use AngularJS to compile more elegant JavaScript code guides, including programming suggestions on advanced techniques such as controller and encapsulation! For more information, see the sample code below. Download: modulePattern.zip-all four HTML files and panacea. js-1.6 KB.

Introduction

AngularJS Library contains many things, but I only want to focus on small ones in this article. I believe they can provide a better introduction to Angular. understanding this article does not require you to have any Angular-related or even JavaScript experience. I hope you can see some benefits of using Angular from this article and are willing to try it out.
Background

I have been using Angular for a while, and I also like to build some samples when learning Angular, so when I first went deep into it, I did not think much about the module or JavaScript design pattern, which is helpful for maintaining code organization and organization. that is all the key points: keep the code organized and organized. as a result, I have created an extremely small sample to demonstrate how simple the modules can be. along the way, I hope it will become a good introduction to Angular.

(Majority) problems in explaining patterns

Most of the time, people will try to describe a pattern before the reader knows the concept of a pattern, which basically misleads everyone. efforts should be made to make this article as simple as possible. let's take a look at this question first. Which problem? It is about the Javascript of all things that will be created in the global memory space by default.

The following is what I mean.
Default global JavaScript problems

Suppose your HTML contains the following script.

《script》   var isDoingWork = false;《script》

Range?

Do you know the scope of this variable?
Yes, it is global. This Boolean value is actually added to the global window object of the browser.

Set it to Action

Here you can see how it is in Action.

• Download the sample code in this article.
• Open modulePattern.htm in your browser.
• Open the browser development tool -- F12 (Chrome, IE) or Ctrl-Shift-I (Opera) -- (then you can see the console)
• In the browser tool console, enter isDoingWork and press enter.
• The output value is false.
• Enter isDoingWork = true, and press enter.
• The downloaded value is true. you have changed the value.
• You can see that this value has been input by doingwindow. isDoingWork = true and then press Enter Is added to the global window object.

This may cause some name conflicts and some serious bugs. This may be a bit worrying for you, right? However, imagine that you decided to implement a new JS Library, which can be created every second. suppose you find this is called Panacea. js's great library will solve all your problems.

Therefore, you reference it in your page as follows: