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

Home

Web Front-end

JS Tutorial

What is angularJs? Introduction to angularjs (selected version)

寻∝梦

Sep 08, 2018 pm 03:13 PM

angularjshtml

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>

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>

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

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

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

使用PHP和AngularJS构建Web应用May 27, 2023 pm 08:10 PM

随着互联网的不断发展，Web应用已成为企业信息化建设的重要组成部分，也是现代化工作的必要手段。为了使Web应用能够便于开发、维护和扩展，开发人员需要选择适合自己开发需求的技术框架和编程语言。PHP和AngularJS是两种非常流行的Web开发技术，它们分别是服务器端和客户端的解决方案，通过结合使用可以大大提高Web应用的开发效率和使用体验。PHP的优势PHP