Angular JS1学习笔记之一简介与表达式

最新推荐文章于 2024-06-15 21:20:00 发布

香雪儿sofia

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量775

点赞数

分类专栏： Angular 文章标签： angular 扩展框架 html

本文链接：https://blog.csdn.net/sofia92/article/details/51043319

版权

Angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Angular JS简介

Angular JS是一个基于JS的框架，通过<script>标签添加到HTML页面。如：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
Angular JS通过指令扩展HTML，通过表达式绑定数据到HTML

Angular JS指令

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序，声明Angular的边界。如果你正构建一款纯Angular应用，就可以把ng-app指令写在<html>标签中，即：<html ng-app>，这样就会告诉Angular去管理页面上的所有DOM 元素。

如果你有一款现存的应用，该应用正在用其他一些技术（如Java 或Rails）来管理DOM，那么你可以让Angular 只管理页面中的一部分，只要在页面中放入一些<div> 之类的元素即可。即：<div ng-app>。

ng-model 指令把元素值（比如输入域的值）绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

Angular JS实例

<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/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>
</div>

</body>
</html>

实例讲解：
当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序 的”所有者”。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 **innerHTML**。

什么是 AngularJS？

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

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

AngularJS 指令

AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量，可指定初始值，也可不填值

<div ng-app="" ng-init="firstName='John'">
    <p>姓名为 <span ng-bind="firstName"></span></p>
</div>

HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。

<div ng-app="" data-ng-init="firstName='John'">
    <p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>

AngularJS 表达式

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

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

AngularJS 程序结果将在表达式书写的位置”输出”数据。

AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + ” ” + lastName }}

<div ng-app="">
    <p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
页面将会输出我的第一个表达式：10

AngularJS 基本类型

AngularJS 数字、字符串、对象和数组都分别与JavaScript中的一样，如下：

数字

<div ng-app="" ng-init="num1=5;num2=2">
   <p>总价为：{{num1 * num2}}</p>
</div>

之前赘述过，{{}}表达式与ng-bind指令有等同效果，所以上述表达式可改为：<p>总价为：<span ng-bind="num1 * num2"></span></p>，最终都输出：总价为：10。

字符串

<div ng-app="" ng-init="firstName='John';secondName='Doe'">
   <p>姓名：<span ng-bind="firstName+''+secondName"></span></p>
</div>

这里需注意，字符串在ng-init里以单引号包含表示这是字符串。

对象

<div ng-app="" ng-init="person={firstName:'John',secondName:'Doe'}">
   <p>姓为：{{person.firstName}}</p>
   <p>名为：<span ng-bind="person.secondName"></span></p>
</div>

在angular里，同样可使用.访问对象属性。

数组

<div ng-app="" ng-init="points=[1,4,655,33]">
   <p>第三个值为：<span ng-bind="points[2]"></span></p>
   <p>第三个值为：{{points[2]}}</p>
</div>

AngularJS 表达式与 JavaScript 表达式

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

香雪儿sofia

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Angular JS1学习笔记之一简介与表达式

Angular JS简介 Angular JS是一个基于JS的框架，通过<script>标签添加到HTML页面。如：<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> Angular JS通过指令扩展HTML，通过表达式绑定数据到HTMLAngular JS指令Angular
复制链接

扫一扫