What is angularJs? Introduction to angularjs (selected version)-JS Tutorial-php.cn

Table of Contents

1 What is AngularJS?

4 AngularJS 表达式

5 AngularJS 应用

Home

Web Front-end

JS Tutorial

What is angularJs? Introduction to angularjs (selected version)

寻∝梦

Sep 08, 2018 pm 03:13 PM

angularjs html

This article mainly introduces an introduction to angularjs, angularjs extends HTML, and an introduction to angularjs instructions, expressions, and applications. Now let’s take a look at this article together

Introduction to AngularJS

1 What is AngularJS?

AngularJS makes it easier to develop modern single page applications (SPAs: Single Page Applications).

AngularJS binds application data to HTML elements.
AngularJS can clone and repeat HTML elements.
AngularJS can hide and show HTML elements.
AngularJS can add code "behind" HTML elements.
AngularJS supports input validation.

AngularJS is a JavaScript framework. It can be added to HTML pages via the <script> tag. </script>

AngularJS extends HTML through Directives and binds data to HTML.

AngularJS is a JavaScript framework. It is a library written in JavaScript.

AngularJS is published as a JavaScript file, which can be added to web pages through the script tag:

scriptsrc="http://cdn.static.runoob.com/libs/angular.js/ 1.4.6/angular.min.js">script>This will improve page loading speed because HTML loading is not subject to script loading.

Download each angular.js version: https://github.com/angular/angular.js/releases

2 AngularJS extends HTML

AngularJS Pass ng-directives Extends HTML. The

ng-app directive defines an AngularJS application.

ng-model directive binds element values (such as input field values) to the application.

ng-bind directive binds application data to an HTML view.

3 AngularJS Directives

As you can see, AngularJS directives start with ng HTML attribute as prefix.

ng-init directive initializes AngularJS application variables.

<png-app=""ng-init="firstName=&#39;John&#39;">
<p>姓名为<spanng-bind="firstName"></span></p>
</p>

Copy after login

We recommend placing the script at the bottom of the element.

#HTML5 allows extended (homemade) attributes to ## It starts with #data-

4 AngularJS 表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<scriptsrc="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></head>
<body>
<png-app=""><p>我的第一个表达式：
 {{ 5 + 5 }}</p></p>
</body>
</html>

Copy after login

5 AngularJS 应用

AngularJS 模块（Module）定义了 AngularJS 应用。

AngularJS 控制器（Controller）用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。（想看更多就到PHP中文网AngularJS开发手册中学习）

png-app="myApp"ng-controller="myCtrl"> 名: inputtype="text"ng-model="firstName">br>姓:inputtype="text"ng-model="lastName">br>br>姓名: {{firstName " " lastName}}p>##script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe";});script>

AngularJS module definition application:

var app =angular.module('myApp',[]) ;

AngularJS controller control application:

app.controller('myCtrl',function($scope) { $scope.firstName="John"; $scope.lastName="Doe" ;});

This article ends here (want to see more Just go to the PHP Chinese website AngularJS User Manual to learn). If you have any questions, you can leave a message below.

	. AngularJS attributes start with ng- , but you can use data-ng- to make the page valid for HTML5.

The above is the detailed content of What is angularJs? Introduction to angularjs (selected version). For more information, please follow other related articles on the PHP Chinese website!

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