Summary of Angularjs basic knowledge and examples_AngularJS
angularjs is a high-end front-end mvc development framework developed by Google.
Angularjs official website: https://angularjs.org/ The official website has a demo, access may require FQ
Angularjs Chinese community: http://www.angularjs.cn/ Suitable for beginners
Reference file: https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js
Be careful when using angular
Quote the angularjs library: https://github.com/litengdesign/angularjsTest/blob/master/angular-1.0.1.... You can download it from the github of the examples in this section
You need to add ng-app="appName" in the area you are using, or directly ng-app (global).
Set controller ng-controller="Ctrl".
Please note the following points when testing the example
You need to introduce angularjs code before head. The author uses angular-1.0.1.min.js. Please pay attention to the version difference.
All small examples are run in the following areas. Remember to add ng-app in the scope.
The following uses some small cases to illustrate the default common instructions and usage of angularjs.
hello world program (double data binding)
Use ng-model={{name}} to bind data
hello:{{name || 'liteng'}}
http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html
A small case of using event binding
Unit price:
Quantity:
Total price: {{(price) * (quantity)}}
- Note:
http://2.liteng.sinaapp.com/angularjsTest/event-bind.html
ng-init: attribute values can be specified by default
{{value}}
http://2.liteng.sinaapp.com/angularjsTest/ng-init.html
ng-repeat: used to iterate data similar to i for info in js
I have {{friends.length}} friends. They are
[{{$index 1}}]: {{friend.name}}’s age is: {{friend.age}}
http://2.liteng.sinaapp.com/angularjsTest/ng-repeat.html
ng-click:dom click event
<script> <br> Function ctrl($scope){<br> $scope.a='hello';<br> $scope.showMsg=function(){<br> $scope.a='world';<br> }<br> }<br> </script>
http://2.liteng.sinaapp.com/angularjsTest/ng-click.html
ng-show: Set element display
Note: ng-show="!xx": Add in front of the attribute value! Indicates confirmation of display, if not added! If unsure, do not display
ng-show="!show"
ng-show="show"
http://2.liteng.sinaapp.com/angularjsTest/ng-show.html
ng-hide: Set element to hide
ng-hide="aaa"
ng-show="!aaa"
http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html
Use ng-show to create toggle effect
http://2.liteng.sinaapp.com/angularjsTest/ng-toggle.html
ng-style: similar to the default style
Please pay attention to the writing format here: the string needs to be enclosed in quotes
box
http://2.liteng.sinaapp.com/angularjsTest/ng-style.html
filter: filter field
http://2.liteng.sinaapp.com/angularjsTest/filter.html
ng-template: Template can be loaded
tpl.html
hello
http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html
$http: An ajax-like method works well
HTTP request-method 1
{{x.Name}} {{x.Country}}
Method 2
{{y.aid}} {{y.title}}
<script><br> //Method 1<br> var TestCtrl=function($scope,$http){<br> var p=$http({<br> Method:'GET',<br> <br>url:'json/date.json'<br><a href="'json/date.json'"> });</a> p.success(function(response,status,headers,config){<br> $scope.names=response;<br> });<br> p.error(function(status){<br> console.log(status);<br> });<br> }<br> //Method 2<br> Function TestCtrl2($scope,$http){<br> $http.get('json/yiqi_article.json').success(function(response){<br> $scope.info=response;<br> });<br> }<br> </script>
All the above codes: https://github.com/litengdesign/angularjsTest
Demo implemented: http://2.liteng.sinaapp.com/angularjsTest/index.html
As for the routing (router) and directive (directive) of angularjs, I will talk about them separately next time.

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

AI Hentai Generator
Generate AI Hentai for free.

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

PHP is a widely used open source server-side scripting language that can handle all tasks in web development. PHP is widely used in web development, especially for its excellent performance in dynamic data processing, so it is loved and used by many developers. In this article, we will explain the basics of PHP step by step to help beginners from getting started to becoming proficient. 1. Basic syntax PHP is an interpreted language whose code is similar to HTML, CSS and JavaScript. Every PHP statement ends with a semicolon; Note

Javascript is a very unique language. It is unique in terms of the organization of the code, the programming paradigm of the code, and the object-oriented theory. The issue of whether Javascript is an object-oriented language that has been debated for a long time has obviously been There is an answer. However, even though Javascript has been dominant for twenty years, if you want to understand popular frameworks such as jQuery, Angularjs, and even React, just watch the "Black Horse Cloud Classroom JavaScript Advanced Framework Design Video Tutorial".

In today's information age, websites have become an important tool for people to obtain information and communicate. A responsive website can adapt to various devices and provide users with a high-quality experience, which has become a hot spot in modern website development. This article will introduce how to use PHP and AngularJS to build a responsive website to provide a high-quality user experience. Introduction to PHP PHP is an open source server-side programming language ideal for web development. PHP has many advantages, such as easy to learn, cross-platform, rich tool library, development efficiency

With the continuous development of the Internet, Web applications have become an important part of enterprise information construction and a necessary means of modernization work. In order to make web applications easy to develop, maintain and expand, developers need to choose a technical framework and programming language that suits their development needs. PHP and AngularJS are two very popular web development technologies. They are server-side and client-side solutions respectively. Their combined use can greatly improve the development efficiency and user experience of web applications. Advantages of PHPPHP

Go language is a statically typed, compiled language developed by Google. Its concise and efficient features have attracted widespread attention and love from developers. In the process of learning the Go language, mastering the basic knowledge of variables is a crucial step. This article will explain basic knowledge such as the definition, assignment, and type inference of variables in the Go language through specific code examples to help readers better understand and master these knowledge points. In the Go language, you can use the keyword var to define a variable, which is the format of the var variable name variable type.

Basic introduction to PHP: How to use the echo function to output text content. In PHP programming, you often need to output some text content to a web page. In this case, you can use the echo function. This article will introduce how to use the echo function to output text content and provide some sample code. Before starting, first make sure you have installed PHP and configured the running environment. If PHP is not installed yet, you can download the latest stable version from the PHP official website (https://www.php.net).

C language function encyclopedia: from basic to advanced, detailed explanation of how to use functions, specific code examples are required Introduction: C language is a widely used programming language, and its powerful functions and flexibility make it the first choice of many developers. In C language, function is an important concept. It can combine a piece of code into an independent module, improving the reusability and maintainability of the code. This article will introduce the use of C language functions from the basics and gradually advance to help readers master the skills of function writing. 1. Definition and calling of functions in C

With the popularity of the Internet, more and more people are using the network to transfer and share files. However, due to various reasons, using traditional methods such as FTP for file management cannot meet the needs of modern users. Therefore, establishing an easy-to-use, efficient, and secure online file management platform has become a trend. The online file management platform introduced in this article is based on PHP and AngularJS. It can easily perform file upload, download, edit, delete and other operations, and provides a series of powerful functions, such as file sharing, search,
