Angular.js入门笔记(1)

转载 2015年11月20日 15:34:54

AngularJS 简介


AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。

AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。


AngularJS 是一个 JavaScript 框架

AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。

AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

Note 我们建议把脚本放在 <body> 元素的底部。
这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。

AngularJS 扩展了 HTML

AngularJS 通过 ng-directives 扩展了 HTML。

ng-app 指令定义一个 AngularJS 应用程序。

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

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

AngularJS 实例

<!DOCTYPE html>
<html>
<body>

<div ng-app="">
  <p>在输入框中尝试输入:</p>
  <p>姓名:<input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

</body>
</html>

实例讲解:

当网页加载完毕,AngularJS 自动开启。

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

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

什么是 AngularJS?

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

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

AngularJS 指令

正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。

ng-init 指令初始化 AngularJS 应用程序变量。

AngularJS 实例

<div ng-app="" ng-init="firstName='John'">

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

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

带有有效的 HTML5:

AngularJS 实例

<div data-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 }}

AngularJS 实例

<!DOCTYPE html>
<html>
<body>

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

<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>

</body>
</html>


AngularJS 应用

AngularJS 模块(Module) 定义了 AngularJS 应用。

AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

ng-app指令定义了应用, ng-controller 定义了控制器。

AngularJS 实例

<div ng-app="myApp" ng-controller="myCtrl">

名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

AngularJS 模块定义应用:

AngularJS 模块

var app = angular.module('myApp', []);

AngularJS 控制器控制应用:

AngularJS 控制器

app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

应用解析:

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller="myCtrl" 是一个 AngularJS 指令。用于定义一个控制器。

myCtrl 函数是一个 JavaScript 函数。

AngularJS 使用$scope 对象来调用控制器。

在 AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。

控制器的 $scope (相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。

控制器在作用域中创建了两个属性 (firstName 和 lastName)。

ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。


Angularjs 学习笔记(一)基础

1.简介: Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 Ang...
  • qq_25178609
  • qq_25178609
  • 2016年10月02日 16:13
  • 519

Python3萌新入门笔记(1)

在之前的教程中,我们已经学会了安装Python以及PyCharm。在这里,我们打开PyCharm,它是一种Python IDE(集成开发环境)。在这个软件中,我们来学习Python的基础知识。首先,我...
  • xingbb99
  • xingbb99
  • 2018年01月29日 09:28
  • 58

Docker 入门笔记 1 - 安装docker

Docker 入门笔记
  • misterchi
  • misterchi
  • 2017年12月22日 19:06
  • 67

Python 之 Scrapy笔记(1)- 入门篇

Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架。可以应用在包括数据挖掘, 信息处理或存储历史数据等一系列的程序中。其最初是为了页面抓取(更确切来说,网络抓取)所设计的, 也可以应用...
  • VIP_WangSai
  • VIP_WangSai
  • 2016年08月11日 14:04
  • 330

类与对象的基本定义——学习笔记(根据李兴华老师《Java8编程开发入门》网课记录)

网课来源http://study.163.com/course/courseLearn.htm?courseId=1455026#/learn/video?lessonId=1740178&cours...
  • weixin_40574148
  • weixin_40574148
  • 2018年01月25日 10:40
  • 36

JDBC入门——笔记

1. JDBC的简介 1.1 jdbc:Java DataBase Connectivity,Java数据库的连接 1.2 比如有一台电脑,想在电脑上安装显卡,需要显卡的驱动,由显卡生产厂商提供 1....
  • zy_tiger
  • zy_tiger
  • 2016年07月13日 16:03
  • 2492

Angular.js入门

简介 AngularJS 是一款来自 Google 的前端 JavaScript 框架,也是 SPA(single-page-application,单页应用)框架。AngularJS 框架的体...
  • wzt_000
  • wzt_000
  • 2014年11月21日 16:52
  • 1389

Java基础入门笔记-新建类

Java基础入门笔记-新建类
  • qq78442761
  • qq78442761
  • 2018年01月03日 14:32
  • 175

NuttX的学习笔记 1

NuttX系统
  • yt454287063
  • yt454287063
  • 2016年11月14日 19:02
  • 1966

MySQL入门之操作笔记

管理机制 数据类型 int类型:细分种类更多 大文件类型 日期格式:时间和日期分开!更详细!多一点!但是对于日期的计算比较麻烦! 可以先按照Oracle数据库里面的几张表,创建MySQL下的表进行试...
  • lzjsqn
  • lzjsqn
  • 2017年01月12日 17:16
  • 647
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Angular.js入门笔记(1)
举报原因:
原因补充:

(最多只允许输入30个字)