angularjs_AngularJS概述

最新推荐文章于 2024-09-27 10:11:28 发布

cumubi7453

最新推荐文章于 2024-09-27 10:11:28 发布

阅读量110

点赞数

文章标签： python java javascript html vue ViewUI

原文链接：https://www.includehelp.com/angular-js/overview.aspx

版权

angularjs

AngularJS概述 (AngularJS Overview)

AngularJS (Angular 4) is a JavaScript framework. It is a JavaScript framework that is used for building single-page web applications. IT can be easily embedded to web pages using the <script> Tag. Angular 4 used HTML, JavaScript, and TypeScript to make wonderful web applications.

AngularJS(Angular 4)是一个JavaScript框架。它是一个JavaScript框架，用于构建单页Web应用程序。使用<script>标签可以将IT轻松嵌入到网页中。 Angular 4使用HTML，JavaScript和TypeScript制作了出色的Web应用程序。

AngularJS uses ng-directives to extend JavaScript in HTML WebPages. There are 3 basic directives that are most commonly used in angular 4. They are,

AngularJS使用ng指令在HTML WebPages中扩展JavaScript。在angular 4中，最常用的是3种基本指令。

ng-app

This directive defines that the control is given to angular. The tag (div, p, header, etc) that has ng-app attribute has the control of the angular code.

该指令定义将控制赋予角度。具有ng-app属性的标签(div，p，标头等)可以控制角度代码。

ng-model

ng模型

This directive binds value of html control tags to the application data. It initialises variables with the html input fields.

该指令将html控件标签的值绑定到应用程序数据。它使用html输入字段初始化变量。

ng-bind

This directive binds the application data with the html view elements. The value of the variables are fed in the html tags that define the view.

该指令将应用程序数据与html视图元素绑定。变量的值输入定义视图的html标记中。

Sample Angular 4 Code

示例Angular 4代码

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Angular Js</title>
    <script src="scripts/angular.min.js"></script>
</head>

<body>
    <div>
        <h2>Without Using Angular Js : Local </h2>
        <hr /> {{12+5}}
        <br>
        <br>
        <hr>
        <hr>
    </div>
    <div ng-app>
        <h2>Using Angular Js : Local </h2>
        <hr /> {{12+5}}
        <div>
</body>

</html>

Output

输出量

Code explanation:

代码说明：

This is a simple Html code that you are used to and have been practicing for long so no need to explain that. So we have to similar div that have the same code one heading (H2) and one simple element {{12+5}} that is treated as plain text in html. Whereas in the second div we have define the ng-app directive that defines that the code is angular code which treats {{12+5}} as an expression which is evaluated as 17 in the angular code.

这是一个简单的Html代码，您已经习惯并且已经练习了很长时间，因此无需解释。因此，我们必须将具有相同代码的一个类似的div的标题( H2 )和一个简单元素{{12 + 5}}当作html中的纯文本。而在第二个div中，我们定义了ng-app指令 ，该指令将代码定义为角度代码，将{{12 + 5}}视为在角度代码中评估为17的表达式。