AngularJS学习笔记

最新推荐文章于 2021-07-24 09:44:47 发布

EWind911

最新推荐文章于 2021-07-24 09:44:47 发布

阅读量136

点赞数

分类专栏： Angular 文章标签： angular

本文链接：https://blog.csdn.net/E_Wind802/article/details/112172513

版权

Angular 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、简介

AngularJS 是一个 JavaScript 框架。它可通过 script标签添加到 HTML 页面。
AngularJS 通过指令扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单实例</title>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
    <p ng-bind="name"></p>
</div>
</body>
</html>

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。

二、表达式

AngularJS 表达式写在双大括号内：{{ expression }}，与Vue类似。通过该表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。它很像 JavaScript 表达式：它们可以包含文字、运算符和变量。

<div ng-app="">
<p>我的第一个表达式: {{ 5 + 5 }}</p>	
</div>

输出结果：

我的第一个表达式: 10

1.数字

AngularJS 数字就像 JavaScript 数字：

<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div>

输出：

总价: 5

2.字符串

AngularJS 字符串就像 JavaScript 字符串：

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>

输出

姓名: John Doe

3.对象

同样的，AngularJS对象的使用也类似于JS。

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div>

输出

姓为 Doe

4.数组

数组也是如此：

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>

输出：

第三个值为 19

5.与JS的区别

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

三、指令

AngularJS 通过被称为指令的新属性来扩展 HTML。
AngularJS 通过内置的指令来为应用添加功能。
AngularJS 允许你自定义指令。指令参考手册<来源于菜鸟>

。。。。未完待续。。。。。

EWind911

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
AngularJS学习笔记

一、简介AngularJS 是一个 JavaScript 框架。它可通过 script标签添加到 HTML 页面。AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。AngularJS 通过 ng-directives 扩展了 HTML。ng-app 指令定义一个 AngularJS 应用程序。ng-model 指令把元素值（比如输入域的值）绑定到应用程序。ng-bind 指令把应用程序数据绑定到 HTML 视图。<!DOCTYPE html>
复制链接

扫一扫