Home Web Front-end JS Tutorial Summary of Angularjs basic knowledge and examples_AngularJS

Summary of Angularjs basic knowledge and examples_AngularJS

May 16, 2016 pm 04:18 PM
angularjs Base

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

Copy code The code is as follows:





hello:{{name || 'liteng'}}

http://2.liteng.sinaapp.com/angularjsTest/helloangularjs.html

A small case of using event binding

Copy code The code is as follows:


Unit price:
Quantity:


Total price: {{(price) * (quantity)}}

Note:

Input involving html5: http://www.w3school.com.cn/html5/att_input_type.asphttp://www.w3school.com.cn/html5/att_input_type.asp">http://www.w3school.com.cn/ html5/att_input_type.asp>
ng-init: Set initial value



http://2.liteng.sinaapp.com/angularjsTest/event-bind.html

ng-init: attribute values ​​can be specified by default

Copy code The code is as follows:

{{value}}


http://2.liteng.sinaapp.com/angularjsTest/ng-init.html

ng-repeat: used to iterate data similar to i for info in js

Copy code The code is as follows:


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

Copy code The code is as follows:




<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

Copy code The code is as follows:


ng-show="!show"


ng-show="show"

http://2.liteng.sinaapp.com/angularjsTest/ng-show.html

ng-hide: Set element to hide

Copy code The code is as follows:


ng-hide="aaa"


ng-show="!aaa"

http://2.liteng.sinaapp.com/angularjsTest/ng-hide.html

Use ng-show to create toggle effect

Copy code The code is as follows:

toggle


Show logo

http://liteng.org/sites/default/files/logo.png" alt="">

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

Copy code The code is as follows:


box


http://2.liteng.sinaapp.com/angularjsTest/ng-style.html

filter: filter field

Copy code The code is as follows:

{{9999|number}}

{{9999 1 |number:2}}

{{9*9|currency}}

{{'hello world' | uppercase}}

http://2.liteng.sinaapp.com/angularjsTest/filter.html

ng-template: Template can be loaded

Copy code The code is as follows:


tpl.html

Copy code The code is as follows:

hello



http://2.liteng.sinaapp.com/angularjsTest/show-tpl.html

$http: An ajax-like method works well

Copy code The code is as follows:


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>


http://2.liteng.sinaapp.com/angularjsTest/ajax.html

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.

Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

PHP Basics Tutorial: From Beginner to Master PHP Basics Tutorial: From Beginner to Master Jun 18, 2023 am 09:43 AM

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

The latest 5 angularjs tutorials in 2022, from entry to mastery The latest 5 angularjs tutorials in 2022, from entry to mastery Jun 15, 2017 pm 05:50 PM

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".

Use PHP and AngularJS to build a responsive website to provide a high-quality user experience Use PHP and AngularJS to build a responsive website to provide a high-quality user experience Jun 27, 2023 pm 07:37 PM

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

Build web applications using PHP and AngularJS Build web applications using PHP and AngularJS May 27, 2023 pm 08:10 PM

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

Learn the basics of Go language variables Learn the basics of Go language variables Mar 22, 2024 pm 09:39 PM

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.

Introduction to PHP Basics: How to use the echo function to output text content Introduction to PHP Basics: How to use the echo function to output text content Jul 30, 2023 pm 05:38 PM

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).

Detailed explanation of C language functions: basic to advanced, comprehensive analysis of the use of functions Detailed explanation of C language functions: basic to advanced, comprehensive analysis of the use of functions Feb 18, 2024 pm 02:25 PM

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

Use PHP and AngularJS to develop an online file management platform to facilitate file management Use PHP and AngularJS to develop an online file management platform to facilitate file management Jun 27, 2023 pm 01:34 PM

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,

See all articles