If you’d like to skip ahead to a particular section, simply use the table of contents:
- Line 17 renders the header.
- Line 19 renders the paragraph that won’t be changed.
- Line 21 renders the paragraph that will be changed.
- Line 17 renders the input box so the user can input the number.
- Line 19 renders the sentence into which the answer will be rendered.
- Line 21 renders the button the user will click after entering a number to get the answer.
- Line 25 basically says: “Run the stuff in the code block below me when a user clicks on the GO button.”
- Line 26 grabs the number input by the user and assigns it to a variable (to be reused later).
- Line 27 calls the pre-written function below (“calculateSquare”) and assigns the answer to another variable.
- Lines 28 and 29 populate the paragraphs with the correct values.
- Lines 32 -34 define the function that will calculate the square and return the answer.
The image above shows the results of clicking “GO” after entering 12 in the input box.
Note: When developers say “Angular”, we usually mean the new version of Angular (currently Angular 12). The “old” Angular, AngularJS, is falling out of popularity, but is still relevant as many applications built in the past continue to run on it. These two frameworks (Angular and AngularJS) are very different, and most developers consider them to be different frameworks altogether, despite sharing a name.
A side note on libraries vs. frameworks
When talking about these three technologies, you’ll hear the words “framework” and “library” quite often. Let’s define what each of these terms mean.
Both libraries and frameworks are basically a bunch of code that someone else wrote that we can tap into and use to develop applications. However, there are some distinct differences between the two.
A library is reusable pre-written code (functions, objects, classes) that you can utilize anywhere in your application. You, the developer, are in control of the flow of the application; where and when you want to tap into that pre-written code is up to you.
A framework, on the other hand, is pre-written code that suggests a defined structure that, should you follow it, allows for more efficient and easy-to-read code bases. The framework is in control of the flow. You put your code in the right spot and the framework takes care of how the application runs. With frameworks, you can also tap into useful pre-written features—just like you can with libraries. If you’re looking to learn more, we’ve created a full beginner’s guide to web frameworks.
AngularJS, React, and Vue in action
Take a look at what kind of great, pre-written functionality you can get with these three technologies!
A sample search bar utilizing AngularJS:
With this sample app, you can “search” for US States. Try entering “a” in the search box. It will immediately filter the list down to all states that contain the letter “a”. Now type “l”. Now you should see a list of all states that contain the letter combination “al”. Cool, huh?
A calculator application written with the help of React:
React was created with speed, simplicity, and scalability in mind. You can use it to build large applications that can manipulate data without reloading the page (much like Angular).
React can also be used in conjunction with other frameworks and it is known to be a bit easier for beginners to learn. In recent years, its popularity has skyrocketed, making it a solid choice if you’re looking to add to your skill set.
Take a simple app that uses Vue. Type something into the input box and watch it render instantly below the line.
At the moment whether you go with Angular, React, or Vue (or all of them), you can rest assured that it will be well worth your time. All three are solid technologies that will surely be around for the foreseeable future. In the 2021 StackOverflow Survey, React topped the most wanted chart with 25.12% of the vote, just ahead of Vue on 16.69%, with Angular on 8.47%.