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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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

Can I learn Linux from scratch? What do I need to learn? Can I learn Linux from scratch? What do I need to learn? Feb 19, 2024 pm 12:57 PM

If you want to work in the IT industry, but do you want to learn programming, which technology should you choose? Of course it is Linux operation and maintenance. Linux is a very popular technology on the market, with a wide range of applications and good employment prospects, and is liked by many people. So the question is, can I learn Linux operation and maintenance with zero basic knowledge? In the server market, Linux system has a market share of up to 80% because of its advantages such as stability, security, free open source, efficiency and convenience. From this, it can be seen that Linux applications are very popular. Extensive. Whether now or in the future, learning Linux is a very good choice. As for whether it is possible to learn from scratch? My answer is of course. Oldboy Education Linux face-to-face class is specially designed for people with zero basic knowledge

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

Build a single-page web application using Flask and AngularJS Build a single-page web application using Flask and AngularJS Jun 17, 2023 am 08:49 AM

With the rapid development of Web technology, Single Page Web Application (SinglePage Application, SPA) has become an increasingly popular Web application model. Compared with traditional multi-page web applications, the biggest advantage of SPA is that the user experience is smoother, and the computing pressure on the server is also greatly reduced. In this article, we will introduce how to build a simple SPA using Flask and AngularJS. Flask is a lightweight Py

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.

See all articles