A brief introduction to angularjs study notes

Home

Web Front-end

JS Tutorial

A brief introduction to angularjs study notes_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:38 PM

1. Introduction to 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.

Having said so much, I guess you don’t understand anything. . . Is it right? Don't worry, let me talk about some of its features: modularity, two-way data binding, dependency injection, and instructions. Let’s study these features below.

2.angularjs is based on the MVC concept

The so-called MVC is module (data model), view (view), controller (controller)

In fact, angularjs combines these three modules. Here is a model diagram I drew. Let’s take a rough look at it first:

3. Combined explanation

As mentioned above, the characteristics of angularjs are: modularization, dependency injection, two-way binding and instructions. Now let me explain it to you based on the picture above:

Modularity: The four squares below the filter, directive... in the picture above are the four representative methods of the module (I will explain the usage and function of each function one by one later), which can also be understood. As their own small modules, each module has different functions, but the division of labor is clear and the structure is clear, achieving modularization.

Dependency injection: The four small modules mentioned above seem to be independent, but they are interdependent and can reference each other to achieve powerful functions (how to reference will be explained in detail later) ), this is dependency injection.

Instruction: As can be seen from the above picture, the instruction is the directive method in the picture. There are many built-in instructions in angularjs, such as ng-app (specify the scope of angularjs), ng-model (define a data model and implement two-way binding), ng-repeat (repeat a label), ng-change ( Monitor whether the value of the tag has changed), etc., and the directive here is the most important function is the custom directive (some tutorials also say it is an extension of html).

Two-way binding: Two-way binding is the module and view in the picture above, that is, two-way binding of data and view. The ng-model directive just mentioned will be used.

4. Look at a simple two-way binding example.

index.html:

<!DOCTYPE html>
<html ng-app> 
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
    <script src="angular-1.2.19/angular.js"></script> <!-- 引入了AngularJS包 -->
  </head>
  <body>
    <div> 
      <input type="text" ng-model="text">
      <b>Hello {{text}}</b>
    </div>
  </body>
</html>

You can take the above code to the browser and run it (note the address referencing angularjs). You will be surprised to find that angularjs is really powerful! !

Let me briefly explain to you the difficult to understand places in the above code:

ng-app specifies the scope of the application, which means that the entire HTML code can recognize angularjs.
ng-model binds the data model name text to the element, and the input value of the input will be stored in this model.
{{text}} This is a way of writing an expression in angularjs, that is, the text in the middle is a variable that corresponds to the model name above. It can monitor changes in the input value in real time and update the view display in real time

Haha, angularjs is quite simple. I hope this little note can arouse everyone’s interest in angularjs. I will continue to update angularjs study notes later. Hope it helps everyone. If there is anything you don’t understand about the above notes, just ask me and I will definitely answer it for you. I wish you all a happy life!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

8 Stunning jQuery Page Layout PluginsMar 06, 2025 am 12:48 AM

Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation

Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

10 Mobile Cheat Sheets for Mobile DevelopmentMar 05, 2025 am 12:43 AM

This post compiles helpful cheat sheets, reference guides, quick recipes, and code snippets for Android, Blackberry, and iPhone app development. No developer should be without them! Touch Gesture Reference Guide (PDF) A valuable resource for desig

Improve Your jQuery Knowledge with the Source ViewerMar 05, 2025 am 12:54 AM

jQuery is a great JavaScript framework. However, as with any library, sometimes it’s necessary to get under the hood to discover what’s going on. Perhaps it’s because you’re tracing a bug or are just curious about how jQuery achieves a particular UI

10 jQuery Fun and Games PluginsMar 08, 2025 am 12:42 AM

10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game

How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

jQuery Parallax Tutorial - Animated Header BackgroundMar 08, 2025 am 12:39 AM

This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the

See all articles