AngularJS学习笔记（2）

最新推荐文章于 2022-12-09 16:14:24 发布

liweiwei1419

最新推荐文章于 2022-12-09 16:14:24 发布

阅读量961

点赞数

分类专栏： angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/lw_power/article/details/44759471

版权

angularjs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

AngularJS 通过【指令】扩展了 HTML，且通过【表达式】绑定数据到 HTML 。
我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。

AngularJS 扩展了 HTML
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。

实例 1 ：
这里写图片描述
实例讲解：
当网页加载完毕，AngularJS 自动开启。
ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的”所有者”。这个指令很重要，就相当于 main 方法。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML 。

注意：如果移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果。

这里我们要再来解释一下什么是 AngularJS？
“AngularJS 是专门为应用程序设计的 HTML。”
AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

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

AngularJS 指令

首先，我们先明确指令的概念，AngularJS 指令是以 ng 作为前缀的 HTML 属性。
ng-init 指令初始化 AngularJS 应用程序变量。和 ng-app 在同级使用。

<body>
    <div ng-app="" ng-init="firstName='liwei'">
        <p>您输入的文字是：<span ng-bind="firstName"></span></p>
    </div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.5/angular.js"></script>
</body>

注意：应用程序变量起名的时候，不能带中划线“-”，我在练习的时候试过，控制台会报错。

小惊喜：Sublime 编辑器 ctrl + shift + 上箭头， ctrl + alt + 上箭头这些快捷键自己可以试一试，都是非常有用的。
ctrl + shift + k ：在 Sublime 编辑器里面删除光标所在的这一行。（使用该快捷键的时候，百度输入法不能在中文状态下。）

这里再扩展一个小知识点：HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
这句话的意思是，如果你写 data-ng- ，可以同时让 HTML5 认识你的代码，同时 AngularJS 也认识你的代码，看下面的例子：

<body>
    <!-- 这里我在指令前面加上了 data- 前缀，AnjularJS 照样可以识别，兼顾了 HTML5 的特性。 -->
    <div ng-app="" data-ng-init="firstName='wudi'">
        <p>您输入的文字是：<span data-ng-bind="firstName"></span></p>
    </div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.5/angular.js"></script>
</body>

AngularJS 表达式

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

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
笔者注：这种感觉有点像 EL 表达式的 ${}。
AngularJS 将在表达式书写的位置”输出”数据。
AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例： {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}。
示例：

<body>
    <div ng-app="" data-ng-init="firstName='wudi'">
        <p>我的第 1 个表达式：{{ 5 + 5 }}。</p>
    </div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.2.5/angular.js"></script>
</body>

至此，AngularJS 第 2 天的学习就到此告一个段落了。只想说，太不习惯了，看慕课网的视频看得我内牛满面啊。

liweiwei1419

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习笔记（2）

[TOC] AngularJS 通过【指令】扩展了 HTML，且通过【表达式】绑定数据到 HTML 。我们建议把脚本放在 <body> 元素的底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。AngularJS 扩展了 HTML AngularJS 通过 ng-directives 扩展了 HTML。 ng-app 指令定义一个 AngularJS 应用程序。 n
复制链接

扫一扫

专栏目录