什么是 Angularjs

AngularJS 最初由 Misko Hevery 和 Adam Abrons 于 2009 年开发，后来成为了
Google 公司的项目。 AngularJS 弥补了 HTML 在构建应用方面的不足， 其通过使用标识
符（ directives）结构，来扩展 Web 应用中的 HTML 词汇，使开发者可以使用 HTML 来声
明动态内容，从而使得 Web 开发和测试工作变得更加容易。
Misko Hevery
Angularjs 版本简介
https://github.com/angular/angular.js/releases/
AngularJS 功能：
AngularJS 是专门为应用程序设计的 HTML。
AngularJS 使得开发现代的单一页面应用程序（ SPAs： Single Page Applications）变得更加容易。
1 AngularJS 把应用程序数据绑定到 HTML 元素。
2 AngularJS 可以克隆和重复 HTML 元素。
3 AngularJS 可以隐藏和显示 HTML 元素。
4 AngularJS 可以在 HTML 元素"背后"添加代码。
5 AngularJS 支持输入验证
Angularjs 号称 下一代 web 应用 主要特性如下：
1.MVC
2.模块化与依赖注入
3.双向数据绑定
4.指令与 UI 控件

Angularjs 资源：
http://Angularjs.org 官方网站正常打不开 但是打不开 大家都懂的
http://www.angularjs.cn/
http://docs.angularjs.cn/api
http://www.ngnice.com/
https://github.com/angular
Angularjs 下载：
http://www.bootcdn.cn/angular.js/
通过 nodejs 下载： npm install angular

为了使用 Angular，所有应用都必须首先做两件事情

1. 下载加载 angular.js 库
2. 使用 ng-app 指令告诉 angular 应该管理 DOM 中的哪一些部分

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="angular-1.3.0.js"></script>
</head>
<body>
<div ng-app="">
<p>在输入框中尝试输入： </p>
<p>姓名： <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>

Angularjs 中常用名词 也就是所说的常用指令
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效
俗话说 下面的指令可以在开头加上 data- 例如 ng_app 等同于 data _ng_app


1. ng_app ng_bind ng_model {{}}案例演示
ng_app：
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。
ng-model 指令：
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以：
为应用程序数据提供类型验证（ number、 email、 required）。
为应用程序数据提供状态（ invalid、 dirty、 touched、 error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。
ng_bind 指令 等同于{{}}
绑定 HTML 元素到应用程序数据.

示例 1：
<!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="angular.min.js"></script>
</body>
</html>

示例 2： {{}}等同于 ng_bind
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>在输入框中尝试输入： </p>
<p>姓名： <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
实例讲解：
当网页加载完毕， AngularJS 自动开启。
ng-app 指令告诉 AngularJS， <div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
2. ng_init
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。
<div ng-app="" ng-init="firstName=‘John‘">
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>

3.data-指令 data-ng-init 与 ng-init 等价
<div data-ng-app="" data-ng-init="firstName=‘John‘">
<p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>
6. Angularjs 表达式
AngularJS 表达式写在双大括号内： {{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>

AngularJS 数字
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价： {{ quantity * cost }}</p>
</div>
AngularJS 字符串
<div ng-app="" ng-init="firstName=‘John‘;lastName=‘Doe‘">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
AngularJS 对象
<div ng-app="" ng-init="person={firstName:‘John‘,lastName:‘Doe‘}">
<p>姓为 {{ person.lastName }}</p>
</div>

AngularJS 数组
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三个值为 {{ points[2] }}</p>
</div>
7. Angularjs 控制器
AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
控制器的 $scope 是控制器所指向的应用程序 HTML 元素。
angular 中$scope 是连接 controllers(控制器)和 templates(模板 view/视图)的主要胶合体。
我们可以把我们的 model 存放在 scope 上，来达到双向你绑定。
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<div 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>
</div>
<script>
function personController($scope) { //不建议这样写
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
实例讲解：
AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
ng-controller 指令把控制器命名为 object。
函数 personController 是一个标准的 JavaScript 对象的构造函数。
控制器对象有一个属性： $scope.person。
person 对象有两个属性： firstName 和 lastName。
ng-model 指令绑定输入域到控制器的属性（ firstName 和 lastName）。
<!DOCTYPE html>
<html>
<body>
<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 = $scope.person;
return x.firstName + " " + x.lastName;
}
};
}
</script>

<script src="angular.min.js"></script>
</body>
</html>
ng-repeat 指令结合 ng-controller
<div ng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names">
{{ x.name + ‘, ‘ + x.country }}
</li>
</ul>
</div>
<script src="namesController.js"></script>
<script>
function namesController($scope) {
$scope.names = [
{name:‘Jani‘,country:‘Norway‘},
{name:‘Hege‘,country:‘Sweden‘},
{name:‘Kai‘,country:‘Denmark‘}
];
}
</script>

8. Angularjs $http 请求数据
1. get 请求
<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://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
$http get 实例 1：
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php").success(function
(response) {$scope.names = response;});
$http get 实例 2：
$http.get(url,{params:{id:‘5‘}}) .success(function(response) {
$scope.names = response;
}).error(function(data){
//错误代码
});
$http post 实例：
var postData={text:‘这是 post 的内容‘};
var config={params:{id:‘5‘}}
$http.post(url,postData,config) .success(function(response) {
$scope.names = response;
}).error(function(data){
//错误代码
});
$http Jsonp 实例：
myUrl =
"http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_
CALLBACK";
$http.jsonp(myUrl).success(
function(data){
$scope.portalcate = data.result;
}
).error(function(){
alert(‘shibai‘);
});
9. Angularjs 过滤器
AngularJS 过滤器
AngularJS 过滤器可用于转换数据：
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
向表达式添加过滤器
过滤器可以通过一个管道字符（ |）和一个过滤器添加到表达式中。
（下面的两个实例，我们将使用前面章节中提到的 person 控制器）
uppercase 过滤器格式化字符串为大写：
<div ng-app="" ng-controller="personController">
<p>姓名为 {{ person.lastName | uppercase }}</p>
</div>
lowercase 过滤器格式化字符串为小写：
<div ng-app="" ng-controller="personController"">
<p>姓名为 {{ person.lastName | lowercase }}</p>
</div>
currency 过滤器
currency 过滤器格式化数字为货币格式：
<div ng-app="" ng-controller="costController">
数量： <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>
<div>
过滤输入
输入过滤器可以通过一个管道字符（ |）和一个过滤器添加到指令中，该过滤器后跟一个冒
号和一个模型名称。
filter 过滤器从数组中选择一个子集：
<div ng-app="" ng-controller="namesController">
<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>
10.Angularjs 模块
1. 为什么要使用模块
控制器污染了全局命名空间
http://baike.baidu.com/view/4174721.htm
本教程中，截至目前为止的所有实例都使用了全局函数。
在所有的应用程序中，都应该尽量避免使用全局变量和全局函数。
全局值（变量或函数）可被其他脚本重写或破坏。
为了解决这个问题， AngularJS 使用了模块。
2. 普通的控制器 和 AngularJS 模块
AngularJS 普通的控制器
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
function myCtrl($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
使用一个由 模块 替代的控制器：
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
3. AngularJS 应用程序文件
现在您已经知道模块是什么以及它们是如何工作的，现在您可以尝试创建您自己的应用程序文件。
您的应用程序至少应该有一个模块文件，一个控制器文件。
首先，创建模块文件 "myApp.js"：
var app = angular.module("myApp", []);
然后，创建控制器文件。本实例中是 "myCtrl.js"：
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
最后，编辑 HTML 引入模块：
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>

时间： 2024-08-02 11:03:13

什么是 Angularjs的相关文章

angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){   $scope.className = "change2"; } <div clas

Node.js 使用angularjs取得Nodejs http服务端返回的JSON数组示例

server.js代码: // 内置http模块,提供了http服务器和客户端功能(path模块也是内置模块,而mime是附加模块) var http=require("http"); // 创建服务器,创建HTTP服务器要调用http.createServer()函数,它只有一个参数,是个回调函数,服务器每次收到http请求后都会调用这个回调函数.服务器每收到一条http请求,都会用新的request和response对象触发请求函数. var server=http.createS

Bootstrap + AngularJS+ Ashx + SQL Server/MySQL

去年年底12月,为适应移动端浏览需求,花了1个月时间学习Bootstrap,并将公司ASP网站重构成ASP.NET. 当时采取的网站架构: Bootstrap + jQuery + Ashx + SQL Server 时间紧,没人带,只能硬着头皮,最后如期完成,但是也遗留了几个问题. 问题: 1.页面查询条件太复杂,太多的checkbox,jQuery操作DOM虽然方便,但是组合成json提交给后端还是比较麻烦,有没有天然支持json的前端框架或者脚本语言? html控件做的任何修改,都自动保存

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

前端angularJS利用directive实现移动端自定义软键盘的方法

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如

AngularJs自定义过滤器filter

AngularJs自带有很多过滤器,现在Insus.NET演示一个自定义的过滤器,如实现一个数据的平方. 本演示是在ASP.NET MVC环境中进行. 创建一个app: 创建一个控制器: 接下来是重点,创建一个过滤器,例子中的过滤器是实现一个数值的平方. 以上的所指的App,控制器和过滤器均是依Angularjs而言. 下面是ASP.NET MVC的视图,实现数据过滤: 程序运行结果:

AngularJS:directive自定义的指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script

Angularjs[补21] - 显示注入，隐示注入

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div ng-app="myApp"> <div ng-controller="secondController"> &

AngularJs的关于路由问题

初学AngularJs一些天,发现AngularJs到最后的时候会很难.刚刚开始的时候特别不容易适应,到中间的部分,还是比较简单,到最后的时候就发现特别难.我看到了网站上说到了AngularJs中,学习路线是比较奇怪的,有些诡异.我想想不知道是不是对的.今天我在学习AngularJs路由知识点的时候,遇到了一些问题,就是路由不到.以下是刚刚开始写的代码. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4

angularJs项目实战！01：模块划分和目录组织

近日来我有幸主导了一个典型的web app开发.该项目从产品层次来说是个典型的CRUD应用,故而我毫不犹豫地采用了grunt + boilerplate + angularjs + bootstrap + D3 + requirejs 的架构来实现它.angularjs早在去年6月份我就有所接触,将它应用在实验室项目的个别页面中,11月份在新浪的时候也将其推荐给了所在云事业部项目组.项目组老大程辉等人都是很有技术敏感性的人,大胆地采纳了我的建议,将之应用于原本使用dojo开发的项目前端模块上.然