Share detailed examples related to Angularjs
I stayed at home for two days this weekend, and I continued to share Angularjs-related content during my free time at noon. Today I will mainly share the general introduction to Angularjs and the data binding part. Let’s go directly to the topic.
Angualrjs1.x: Currently a relatively stable version.
angularjs2.x: written based on typescript, it has changed a lot on the basis of 1.x and is biased towards mobile development. It is written in ES6 standards
Angularjs4.x latest version
The current version is 2.x It is not an upgrade based on 1. It advocates componentization, which is similar to Vue and React.
3. Core features
MVC (or MVVM) design idea:
Many people will think of Angularjs It is a front-end MVC framework. I think MVC is just a design idea. I think it can be said that there is a shadow of MVVM in it, because MVVM is upgraded on the basis of MVC and adds a two-way data binding function, but this is just my personal opinion. Please correct me, gods.
Two-way data binding:
Two-way data binding was not proposed by AngularJs. It existed very early. Microsoft’s WPF uses MVVM ideas and front-end frameworks. Knockoutjs has the concept of two-way binding of data.
Modularization and Dependency Injection
Modularization and dependency injection are the core content of AngularJs and the highlight of Angular.
Command system
The command system is also the core of Angular. The command system is divided into built-in commands and custom commands. Among them, I think the function of custom commands is very powerful and can achieve many powerful functions. Functions and details will be explained in detail when explaining the instructions.
4. Areas of expertise
1) Single Page Application (SPA)
2) CRUD program
It is possible that some gardeners may not understand single-page applications very well. To give a simple example, for example, our traditional multi-page application MPA through the Iframe framework has the disadvantage of loading multiple pages multiple times. Single-page applications are loaded or switched through Html segments. I won’t introduce too much about MPA and SPA here. You can understand them by Baidu.
AngularJs is suitable for CRUD application systems, but it is not suitable for applications with frequent page interactions or graphical pages and game systems are not suitable for this framework.
5. AngularJs application composition
Any ng application is composed of module types such as controllers, services, instructions, routes, filters, etc. Composition, let me use a diagram to represent the relationship:
6. Module
In AngularJS Module is a core existence, including many aspects, such as controller, config, service, factory, directive, constant, etc.
How to create the module:
angular.module('myApp',[]);
How to use the module:
Add ng-app where needed (on a certain HTML tag)
Benefits of using modules:
1) Keep the global namespace clean;
2) Easier to write test code;
3) Easy to reuse code between different applications.
4) Use declarations to make it easier to understand.
7. Using AngularJs in the application
1) When using Angular in the application, first reference the js library code of the angular framework in the page .
<head>
<meta charset="UTF-8">
<title>首页</title>
<!--引用AngularJs库 -->
<script type="text/javascript" src="/lib/angular-1.3.0.14/angular.js?1.1.11"></script>
</head>2) Add the ng-app module to the html element that applies Angular scope. If you need to add a controller, add ng-controller. This is not necessarily on the body element, it can be arbitrary. On the element, this indicates the application boundary using Angular.
<body ng-app="myapp" ng-controller="myCtrl">
<!-- 1、表达式绑定 -->
<h1>{{expression}}</h1>
<!-- 2、指令绑定-->
<h2>{{ngmodel}}</h2>
<input type="text" ng-model="ngmodel">
<!-- 3、ng-bind绑定-->
<h3 ng-bind="ngbind"></h3>
<h3 class="ng-bind:ngbind"></h3>
<!-- 4、ng-bind-html绑定-->
<h4 ng-bind-html="htmlbind"></h4>
<!-- 5、ng-bind-template -->
<h5 ng-bind-template="{{ngbind}},{{1+1}}"></h5>
</body>3. Add js code and define modules and controllers
<script>
//模块定义
// 第一个参数：应用名称，第二个参数：应用依赖模块
var app = angular.module('myapp', ['ngSanitize']);
// 控制器定义
// 第一参数： 控制器名称， 第二个参数： 匿名函数， 传入作用域,并在作用域上添加额外功能
app.controller('myCtrl', function($scope) {
$scope.expression = "hello expression";
$scope.ngbind = "hello ng-bind";
$scope.htmlbind = "<font color='red'>hello,htmlbind</font>";
$scope.subCtrl = "hello subCtrl";
});
</script>From the above code snippet, you can see how to define the module and controller methods, and the meaning of each parameter is commented. You can take a look.
The source code will be shared with everyone on GitHub at that time, and everyone can download it.
I will share as much content with you today. Next time I will share with you data binding and controller-related content. Thank you all for your support, and you are welcome to correct me if there is anything wrong!
The above is the detailed content of Share detailed examples related to Angularjs. For more information, please follow other related articles on the PHP Chinese website!
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
Detailed introduction to what wapi is
Jan 07, 2024 pm 09:14 PM
Users may have seen the term wapi when using the Internet, but for some people they definitely don’t know what wapi is. The following is a detailed introduction to help those who don’t know to understand. What is wapi: Answer: wapi is the infrastructure for wireless LAN authentication and confidentiality. This is like functions such as infrared and Bluetooth, which are generally covered near places such as office buildings. Basically they are owned by a small department, so the scope of this function is only a few kilometers. Related introduction to wapi: 1. Wapi is a transmission protocol in wireless LAN. 2. This technology can avoid the problems of narrow-band communication and enable better communication. 3. Only one code is needed to transmit the signal
Detailed explanation of whether win11 can run PUBG game
Jan 06, 2024 pm 07:17 PM
Pubg, also known as PlayerUnknown's Battlegrounds, is a very classic shooting battle royale game that has attracted a lot of players since its popularity in 2016. After the recent launch of win11 system, many players want to play it on win11. Let's follow the editor to see if win11 can play pubg. Can win11 play pubg? Answer: Win11 can play pubg. 1. At the beginning of win11, because win11 needed to enable tpm, many players were banned from pubg. 2. However, based on player feedback, Blue Hole has solved this problem, and now you can play pubg normally in win11. 3. If you meet a pub
Detailed introduction to whether i5 processor can install win11
Dec 27, 2023 pm 05:03 PM
i5 is a series of processors owned by Intel. It has various versions of the 11th generation i5, and each generation has different performance. Therefore, whether the i5 processor can install win11 depends on which generation of the processor it is. Let’s follow the editor to learn about it separately. Can i5 processor be installed with win11: Answer: i5 processor can be installed with win11. 1. The eighth-generation and subsequent i51, eighth-generation and subsequent i5 processors can meet Microsoft’s minimum configuration requirements. 2. Therefore, we only need to enter the Microsoft website and download a "Win11 Installation Assistant" 3. After the download is completed, run the installation assistant and follow the prompts to install Win11. 2. i51 before the eighth generation and after the eighth generation
Introducing the latest Win 11 sound tuning method
Jan 08, 2024 pm 06:41 PM
After updating to the latest win11, many users find that the sound of their system has changed slightly, but they don’t know how to adjust it. So today, this site brings you an introduction to the latest win11 sound adjustment method for your computer. It is not difficult to operate. And the choices are diverse, come and download and try them out. How to adjust the sound of the latest computer system Windows 11 1. First, right-click the sound icon in the lower right corner of the desktop and select "Playback Settings". 2. Then enter settings and click "Speaker" in the playback bar. 3. Then click "Properties" on the lower right. 4. Click the "Enhance" option bar in the properties. 5. At this time, if the √ in front of "Disable all sound effects" is checked, cancel it. 6. After that, you can select the sound effects below to set and click
PyCharm Beginner's Guide: Comprehensive Analysis of Replacement Functions
Feb 25, 2024 am 11:15 AM
PyCharm is a powerful Python integrated development environment with rich functions and tools that can greatly improve development efficiency. Among them, the replacement function is one of the functions frequently used in the development process, which can help developers quickly modify the code and improve the code quality. This article will introduce PyCharm's replacement function in detail, combined with specific code examples, to help novices better master and use this function. Introduction to the replacement function PyCharm's replacement function can help developers quickly replace specified text in the code
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
Detailed information on the location of the printer driver on your computer
Jan 08, 2024 pm 03:29 PM
Many users have printer drivers installed on their computers but don't know how to find them. Therefore, today I bring you a detailed introduction to the location of the printer driver in the computer. For those who don’t know yet, let’s take a look at where to find the printer driver. When rewriting content without changing the original meaning, you need to The language is rewritten to Chinese, and the original sentence does not need to appear. First, it is recommended to use third-party software to search. 2. Find "Toolbox" in the upper right corner. 3. Find and click "Device Manager" below. Rewritten sentence: 3. Find and click "Device Manager" at the bottom 4. Then open "Print Queue" and find your printer device. This time it is your printer name and model. 5. Right-click the printer device and you can update or uninstall it.
What is Dogecoin
Apr 01, 2024 pm 04:46 PM
Dogecoin is a cryptocurrency created based on Internet memes, with no fixed supply cap, fast transaction times, low transaction fees, and a large meme community. Uses include small transactions, tips, and charitable donations. However, its unlimited supply, market volatility, and status as a joke coin also bring risks and concerns. What is Dogecoin? Dogecoin is a cryptocurrency created based on internet memes and jokes. Origin and History: Dogecoin was created in December 2013 by two software engineers, Billy Markus and Jackson Palmer. Inspired by the then-popular "Doge" meme, a comical photo featuring a Shiba Inu with broken English. Features and Benefits: Unlimited Supply: Unlike other cryptocurrencies such as Bitcoin
