沉淀，再出发：AngularJS初探
沉淀，再出发：AngularJS初探
一、前言
知识的学习需要形成一个闭环，在这个闭环之内可以自圆其说，从而触类旁通，加以理想创造，从而产生灵感。关于前端的知识，我已经写得差不多了，但是还有一个知识点AngularJS没有说过，那么为什么会出现这个技术呢，是解决什么问题呢？让我们来看一下。
二、AngularJS本质
2.1、什么是AngularJS？
AngularJS 通过新的属性和表达式扩展了 HTML。AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。AngularJS 学习起来非常简单。AngularJS 是比较新的技术，版本 1.0 是在 2012 年发布的，AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。这是一个非常好的构想，该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护这个库。
AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。
AngularJS 是专门为应用程序设计的 HTML。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素"背后"添加代码。
AngularJS 支持输入验证。
AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
ng-init 指令初始化 AngularJS 应用程序变量。
实例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app="">
<p>在输入框中尝试输入：</p>
<p>姓名：<input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div> <script src="https://libs.baidu.com/angular.js/1.2.5/angular.min.js"></script>
</body>
</html>
HTML5 允许扩展的（自制的）属性，以 data- 开头。AngularJS 属性以 ng- 开头，但是可以使用 data-ng- 来让网页对 HTML5 有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
<script src="https://libs.baidu.com/angular.js/1.2.5/angular.min.js"></script>
</body>
</html>
2.2、AngularJS 表达式
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
AngularJS 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> <div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
<script src="https://libs.baidu.com/angular.js/1.2.5/angular.min.js"></script>
</body>
</html>
AngularJS 数字、字符串、实例、对象、数组和JavaScript 类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div>
<!--
<div id='m2' ng-app="m2" ng-init="quantity=1;cost=5">
<p>总价： <span ng-bind="quantity * cost"></span></p>
</div> <div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div> <div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p>
</div> <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 {{ person.lastName }}</p>
</div> <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓为 <span ng-bind="person.lastName"></span></p>
</div> <div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div> <div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 <span ng-bind="points[2]"></span></p>
</div>
--> <script src="https://libs.baidu.com/angular.js/1.2.5/angular.min.js"></script>
</body>
</html>
在AngularJS学习中，对于ng-app初始化一个AngularJS程序属性的使用需要注意，在一个页面中AngularJS自动加载第一个ng-app，其他ng-app会忽略。
2.3、AngularJS 指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
<div ng-app="" ng-init="quantity=1;price=5">
<h2>价格计算器</h2>
数量： <input type="number" ng-model="quantity">
价格： <input type="number" ng-model="price">
<p><b>总价：</b> {{ quantity * price }}</p>
</div>
重复 HTML 元素：ng-repeat 指令会重复一个 HTML 元素。
<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
<p>使用 ng-repeat 来循环数组</p>
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
<div>
ng-repeat 指令用在一个对象数组上：
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
AngularJS 完美支持数据库的 CRUD（增加Create、读取Read、更新Update、删除Delete）应用程序。
ng-app 指令
2 ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。 ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了初始值。通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。 ng-model 指令
ng-model 指令绑定 HTML 元素 到应用程序数据。
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。 ng-repeat 指令
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。
2.4、AngularJS 控制器
AngularJS 控制器控制 AngularJS 应用程序的数据，是常规的 JavaScript 对象。ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script>
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性：$scope.person。
person 对象有两个属性：firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。
控制器也可以把函数作为对象属性：
<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.fullName()}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
var x;
x = $scope.person;
return x.firstName + " " + x.lastName;
}
};
}
</script>
控制器也可以带有方法：
<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{fullName()}}
</div> <script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe",
};
$scope.fullName = function() {
var x;
x = $scope.person;
return x.firstName + " " + x.lastName;
};
}
</script>
外部文件中的控制器
在大型的应用程序中，通常是把控制器存储在外部文件中。只需要把 <script> 标签中的代码复制到名为 personController.js 的外部文件中即可：
<div ng-app="" ng-controller="personController">
名： <input type="text" ng-model="person.firstName"><br>
姓： <input type="text" ng-model="person.lastName"><br>
<br>
姓名： {{person.firstName + " " + person.lastName}}
</div>
<script src="personController.js"></script>
下面的实例我们将创建一个新的控制器文件：
2.5、过滤器
AngularJS 过滤器可用于转换数据：
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
uppercase 过滤器格式化字符串为大写,
lowercase 过滤器格式化字符串为小写,
currency 过滤器格式化数字为货币格式：
<div ng-app="" ng-controller="personController">
<p>姓名为 {{ person.lastName | uppercase }}</p>
<p>姓名为 {{ person.lastName | lowercase }}</p>
数量：<input type="number" ng-model="quantity">
价格：<input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
orderBy 过滤器根据某个表达式排列数组,输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
<div ng-app="" ng-controller="namesController">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<br>
<p>输入过滤：</p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
<div>
2.6、$http
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。以下是存储在web服务器上的 JSON 文件：
<?php header("Access-Control-Allow-Origin: *"); ?>
[
{
"Name" : "Alfreds Futterkiste",
"City" : "Berlin",
"Country" : "Germany"
},
{
"Name" : "Berglunds snabbköp",
"City" : "Luleå",
"Country" : "Sweden"
},
{
"Name" : "Centro comercial Moctezuma",
"City" : "México D.F.",
"Country" : "Mexico"
},
{
"Name" : "Ernst Handel",
"City" : "Graz",
"Country" : "Austria"
},
{
"Name" : "FISSA Fabrica Inter. Salchichas S.A.",
"City" : "Madrid",
"Country" : "Spain"
},
{
"Name" : "Galería del gastrónomo",
"City" : "Barcelona",
"Country" : "Spain"
},
{
"Name" : "Island Trading",
"City" : "Cowes",
"Country" : "UK"
},
{
"Name" : "Königlich Essen",
"City" : "Brandenburg",
"Country" : "Germany"
},
{
"Name" : "Laughing Bacchus Wine Cellars",
"City" : "Vancouver",
"Country" : "Canada"
},
{
"Name" : "Magazzini Alimentari Riuniti",
"City" : "Bergamo",
"Country" : "Italy"
},
{
"Name" : "North/South",
"City" : "London",
"Country" : "UK"
},
{
"Name" : "Paris spécialités",
"City" : "Paris",
"Country" : "France"
},
{
"Name" : "Rattlesnake Canyon Grocery",
"City" : "Albuquerque",
"Country" : "USA"
},
{
"Name" : "Simons bistro",
"City" : "København",
"Country" : "Denmark"
},
{
"Name" : "The Big Cheese",
"City" : "Portland",
"Country" : "USA"
},
{
"Name" : "Vaffeljernet",
"City" : "Århus",
"Country" : "Denmark"
},
{
"Name" : "Wolski Zajazd",
"City" : "Warszawa",
"Country" : "Poland"
}
]
myjson.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div ng-app="" ng-controller="customersController">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://localhost/zyr_project/myjson.php")
.success(function(response) {$scope.names = response;});
}
</script>
<script src="https://libs.baidu.com/angular.js/1.2.5/angular.min.js"></script>
</body>
</html>
三、总结
可以看到angularjs对于单个页面的数据操纵，过滤，控制，单个元素的强大的处理能力，并且还能和远程交互完成一些任务，非常的方便。
沉淀，再出发：AngularJS初探的更多相关文章
- 沉淀再出发:OpenStack初探
沉淀再出发:OpenStack初探 一.前言 OpenStack是IaaS的一种平台,通过各种虚拟化来提供服务.我们主要看一下OpenStack的基本概念和相应的使用方式. 二.OpenStack的框 ...
- 沉淀再出发：kafka初探
沉淀再出发:kafka初探 一.前言 从我们接触大数据开始,可能绕在耳边的词汇里面出现的次数越来越多的就包括kfaka了.kafka的设计初衷是希望作为一个统一的信息收集平台,能够实时的收集反馈信息, ...
- 沉淀再出发：ELK使用初探
沉淀再出发:ELK使用初探 一.前言 ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心套件,但并非全部. 最近ElasticSearch可以说是非常火的一款开源软 ...
- 沉淀再出发:dubbo的基本原理和应用实例
沉淀再出发:dubbo的基本原理和应用实例 一.前言 阿里开发的dubbo作为服务治理的工具,在分布式开发中有着重要的意义,这里我们主要专注于dubbo的架构,基本原理以及在Windows下面开发出来 ...
- 沉淀再出发：jvm的本质
沉淀再出发:jvm的本质 一.前言 关于jvm,使用的地方实在是太多了,从字面意思上我们都能明白这也是一个虚拟机,那么其他的虚拟机都会用来运行别的操作系统的,而jvm却是实现了可以在不用的操作系统之上 ...
- 沉淀再出发：再谈java的多线程机制
沉淀再出发:再谈java的多线程机制 一.前言 自从我们学习了操作系统之后,对于其中的线程和进程就有了非常深刻的理解,但是,我们可能在C,C++语言之中尝试过这些机制,并且做过相应的实验,但是对于ja ...
- 沉淀再出发:用python画各种图表
沉淀再出发:用python画各种图表 一.前言 最近需要用python来做一些统计和画图,因此做一些笔记. 二.python画各种图表 2.1.使用turtle来画图 import turtle as ...
- 沉淀再出发:在python3中导入自定义的包
沉淀再出发:在python3中导入自定义的包 一.前言 在python中如果要使用自己的定义的包,还是有一些需要注意的事项的,这里简单记录一下. 二.在python3中导入自定义的包 2.1.什么是模 ...
- 沉淀再出发:java中的equals()辨析
沉淀再出发:java中的equals()辨析 一.前言 关于java中的equals,我们可能非常奇怪,在Object中定义了这个函数,其他的很多类中都重载了它,导致了我们对于辨析其中的内涵有了混淆, ...
- 沉淀再出发:web服务器和应用服务器之间的区别和联系
沉淀再出发:web服务器和应用服务器之间的区别和联系 一.前言 关于后端,我们一般有三种服务器(当然还有文件服务器等),Web服务器,应用程序服务器和数据库服务器,其中前面两个的概念已经非常模糊了,但 ...
随机推荐
- CodeForces 1060 B Maximum Sum of Digits
Maximum Sum of Digits You are given a positive integer n. Let S(x)S(x) be sum of digits in base 10 r ...
- 我与ARM的那些事儿2JINLK烧录nor flash
前言 最近在研究mini2440的友善之臂,但是我拿着的是实验室早期买的开发板,在做裸机开发的过程中老是不能很好地使用最新版的minitools进行烧录,因而各种不爽,因为生成了bin文件不能很好地传 ...
- [Mysql 查询语句]——查询字段
查询所有字段 select * from 表名; 可以用 * 号代表所有字段 select * from vendors; +---------+----------------+--- ...
- spark2.4+elasticsearch６.1.1搭建一个推荐系统
目录 整体框架 安装相关的组件 elasticsearch安装 spark安装 下载es-hadoop中间件 安装计算向量相似度的elasticsearch插件 运行 结果展示 参考博客 本博文详细记 ...
- 虚拟机下的zookeeper集群安装
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...
- TLD（Tracking-Learning-Detection）一种目标跟踪算法
原文:http://blog.csdn.net/mysniper11/article/details/8726649 视频介绍网址:http://www.cvchina.info/2011/04/05 ...
- laravel数据迁移
创建数据库迁移: php artisan make:migration create_表名_table 回车后就会创建迁移版本 回滚数据库迁移: php artisan migrate 会将数据按 ...
- [转]MONTHS_BETWEEN Function - Oracle to SQL Server Migration
本文转自:http://www.sqlines.com/oracle-to-sql-server/months_between In Oracle, MONTHS_BETWEEN(date1, dat ...
- SQL Serever学习15——进阶
特别说明:在sqlserver2014中,不区分大小写,也就是说,SQL是大小写不敏感的 数据库模型3类: 层次模型 网状模型 关系模型 关系型数据库语言3种: DDL数据定义语言 CREATE(创建 ...
- jQuery基础---动画效果
内容摘要: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 发文不易,转载请注明出处~ 一．显示.隐藏 jQuery 中显示方法 ...