What is AngularJS? Introduction to AngularJS_AngularJS
What is AngularJS?
AngularJS is a structural framework designed for dynamic WEB applications. It allows you to use HTML as a template language, and by extending the syntax of HTML, you can build your application components more clearly and concisely. Its innovation is that it uses data binding and dependency injection to save you from writing a lot of code. These are all implemented through browser-side Javascript, which also makes it perfectly integrated with any server-side technology.
AngularJS is designed to overcome the shortcomings of HTML in building applications. HTML is a good declarative language designed for static text display, but it is weak when it comes to building WEB applications. So I did some work (tricks if you will) to get the browser to do what I wanted. formatDate
Usually, we use the following technologies to solve the shortcomings of static web page technology in building dynamic applications:
1. Class library - A class library is a collection of functions that can help you write WEB applications. It's your code that takes control, and it's you who decides when to use the library. Class libraries include: jQuery, etc.
2. Framework - A framework is a special, already implemented WEB application. You only need to fill it with specific business logic. The framework here plays a leading role, calling your code according to specific application logic. Frameworks include: knockout, sproutcore, etc.
AngularJS uses a different approach, trying to make up for the shortcomings of HTML itself in building applications. AngularJS enables browsers to recognize the new syntax by using structures we call directives. For example:
1. Use double curly braces {{}} syntax for data binding;
2. Use DOM control structures to iterate or hide DOM fragments;
3. Support forms and form validation;
4. Ability to associate logical codes to relevant DOM elements;
5. Ability to group HTML into reusable components.
End-to-end solution
AngularJS attempts to be an end-to-end solution for WEB applications. This means that it is not just a small part of your WEB application, but a complete end-to-end solution. This will make AngularJS very "opinionated" (original text is opinionated, meaning there are not many other ways) when building a CRUD (add Create, query Retrieve, update Update, delete Delete) application. However, even though it is "stubborn", it still ensures that its "stubbornness" is only at the starting point when you build the application, and you still have the flexibility to change. Some of the outstanding features of AngularJS are as follows:
1. Everything that may be used to build a CRUD application includes: data binding, basic template identifiers, form validation, routing, deep linking, component reuse, and dependency injection.
2. Testing includes: unit testing, end-to-end testing, simulation and automated testing framework.
3. Seed application with directory layout and test scripts as a starting point.
The cuteness of AngularJS
AngularJS simplifies application development by presenting developers with a higher level of abstraction. As with other abstraction techniques, some flexibility is lost. In other words, not all applications are suitable for AngularJS. AngularJS is primarily concerned with building CRUD applications. Fortunately, at least 90% of WEB applications are CRUD applications. But to understand what is suitable for building with AngularJS, you need to understand what is not suitable for building with AngularJS.
For example, games, graphical interface editors, applications with frequent and complex DOM operations are very different from CRUD applications, and they are not suitable to be built with AngularJS. In situations like this it might be better to use some lighter, simpler technology like jQuery.
A simple AngularJS example
The following is a typical CRUD application containing a form. The form value is first validated and then used to calculate the total value, which is formatted into a local style. Here are some common concepts among developers that you need to understand first:
1. Associate the data model (data-model) to the view (UI);
2. Write, read, and verify user input;
3. Calculate new values according to the model;
4. Localize the output format.
index.html:
Invoice:
| Quantity | Cost |
Total: {{qty * cost | currency}}
script.js:
function InvoiceCntl($scope) {
$scope.qty = 1;
$scope.cost = 19.95;
}
end-to-end test:
it('should show of angular binding', function() {
expect(binding('qty * cost')).toEqual('$19.95');
input('qty').enter('2');
input('cost').enter('5.00');
expect(binding('qty * cost')).toEqual('$10.00');
});
function InvoiceCntl($scope){$scope.qty = 1;$scope.cost = 19.95;}
运行效果：
Invoice:
Quantity Cost
Total: {{qty * cost | currency}}
试一下上面这个例子，然后我们一起来看下这个例子的工作原理。 在``标签里, 我们用一个`ng-app`标识符标明这是一个AngularJS应用。这个`ng-app`标识符会使AngularJS**自动初始化**(auto initialize)你的应用。 我们用``标签来加载AngularJS脚本：
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
What should I do if I encounter garbled code printing for front-end thermal paper receipts?
Apr 04, 2025 pm 02:42 PM
Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...
Who gets paid more Python or JavaScript?
Apr 04, 2025 am 12:09 AM
There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.
How to merge array elements with the same ID into one object using JavaScript?
Apr 04, 2025 pm 05:09 PM
How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
The difference in console.log output result: Why are the two calls different?
Apr 04, 2025 pm 05:12 PM
In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...
How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website?
Apr 04, 2025 pm 05:36 PM
Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...
Can PowerPoint run JavaScript?
Apr 01, 2025 pm 05:17 PM
JavaScript can be run in PowerPoint, and can be implemented by calling external JavaScript files or embedding HTML files through VBA. 1. To use VBA to call JavaScript files, you need to enable macros and have VBA programming knowledge. 2. Embed HTML files containing JavaScript, which are simple and easy to use but are subject to security restrictions. Advantages include extended functions and flexibility, while disadvantages involve security, compatibility and complexity. In practice, attention should be paid to security, compatibility, performance and user experience.
Is JavaScript hard to learn?
Apr 03, 2025 am 12:20 AM
Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.
