什么是AngularJS【双向数据绑定:从界面的操作能实时反映到数据,数据的变更能实时展现到界面。】?
1.AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。
2.AngularJS 把应用程序数据绑定到 HTML 元素。
3.AngularJS 可以克隆和重复 HTML 元素。
4.AngularJS 可以隐藏和显示 HTML 元素。
5.AngularJS 可以在 HTML 元素"背后"添加代码。
6.AngularJS 支持输入验证。

AngularJS 应用组成如下:
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。

AngularJS历史:
AngularJS 是由 Google 的员工 xx 从 2009 年开始着手开发。
AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。
这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这个库。

AngularJS的基础:HTML, CSS, JavaScript

AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。

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

AngularJS通过 指令(directives) 扩展了HTML
例如:

 <div ng-app=""></div>

ng-app 指令定义一个AngularJS应用程序
ng-model="变量名" 指令把元素的值(比如输入域的值)绑定到应用程序,即获取输入框的值存在变量中
ng-bind 指令把应用程序数据绑定到HTML视图

把脚本script放在<body>元素的底部,当网页加载完毕,AngularJS 自动开启。
ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。
ng-model 指令把输入域的值绑定到应用程序变量 name。
ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

AngularJS指令
AngularJS指令是以 ng 作为前缀的 HTML 属性
ng-init 指令初始化 AngularJS 应用程序变量

 <div ng-app="" ng-init="firstname='qiuchen'">
 <p>FirstName: <span ng-bind="firstname"></span></p>
 </div>

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

AngularJS表达式
AngularJS 表达式写在双大括号里 {{ expression }},expression一般是变量名
AngularJS 表达式把数据绑定到HTML,这与 ng-bind 指令有异曲同工之妙
AngularJS 将在表达式书写的位置“输出”数据
AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量
比如

 {{ 5 + 5 }} 

{{ firstName + " " + lastName }}

AngularJS 应用
包括:
1.AngularJS 模块(Module)
2.AngularJS 控制器 (Controller)

AngularJS 模块

// myApp 是 ng-app="myApp" 里的变量名( "myApp" 参数对应执行应用的 HTML 元素。 )
// 代表新建模块,空数组代表该模块不依赖其他模块
var app = angular.module("myApp", []);

AngularJS 控制器

 <!-- ng-controller 指令定义了应用程序控制器 -->
 <div ng-app="" ng-controller="myCtrl"></div>
 // myCtrl 是一个JavaScript函数
 app.controller('myCtrl', function($scope){
 $scope.firstName = 'qiuchen';
 $scope.lastName = 'liu';
 });

ng-model 的作用:

 <input type="text" ng-model="firstName" />

1.实时得到当前输入框里的内容
2.定义变量名firstName并存储某值,页面或控制器里方便调用此变量并修改变量的内容,实时输出到被定义ng-model的元素上

ng-repeat 指令
ng-repeat 指令对于集合中(数组中)的每个项会 克隆一次 HTML 元素。

ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

【双向绑定】
含有ng-model属性的输入框,修改其值的时候,调用ng-model里变量名的值也会改变

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

 <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
 Email:
 <input type="email" name="myAddress" ng-model="myText" required></p>
 <h1>状态</h1>
 如果输入的值是合法的则为 {{myForm.myAddress.$valid}}
 如果值改变则为 {{myForm.myAddress.$dirty}}
 如果通过触屏点击则为 {{myForm.myAddress.$touched}}
 </form>

状态
如果输入的值是合法的则为 true。
如果值改变则为 true。
如果通过触屏点击则为 true。

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类:

 <style>
 input.ng-invalid {
 background-color: lightblue;
 }
 </style>
 <body>

 <form ng-app="" name="myForm">
 输入你的名字:
 <input name="myAddress" ng-model="text" required>
 </form>

ng-show 指令,当ng-show="true"的时候标签里的数据才会显示

 <form ng-app="" name="myForm">
 Email:
 <input type="email" name="myAddress" ng-model="text">
 <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
 </form>

AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象,有可用的方法和属性。
Scope 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递:

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

 app.controller('myCtrl', function($scope) {
 $scope.carname = "Volvo";
 });

当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。
视图中,你不需要添加 $scope 前缀, 只需要添加属性名即可,如: {{carname}}。

AngularJS 应用组成如下:
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

Scope 作用范围
所有的应用都有一个 $rootScope,它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值,可以在各个 controller 中使用。

AngularJS 控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。

ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
也可以把控制器定义到外部js文件中

AngularJS过滤器(非常赞,非常好用!)
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。

输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集

 <!DOCTYPE html>
 <html>
 <head lang="zh-cn">
 <meta charset="UTF-8">
 <title>在浏览器中运行程序,输入年龄,查看筛选过滤的效果</title>
 </head>
 <body>

 <!-- 过滤器 -->
 <div ng-app="myApp" ng-controller="myCtrl">
 <p>输入过滤:<input type="text" ng-model="test" /></p>
 <ul>
 <li ng-repeat="x in names | filter:test | orderBy:'age'">
 {{x.name + x.age}}
 </li>
 </ul>
 </div>

 <!-- 引入AngularJS -->
 <script src="angular.min.js"></script>
 <script src="personController.js"></script>

 </body>
 </html>

personController.js文件:

//实例化Angular应用程序对象
var app = angular.module('myApp', []);
//定义控制器
app.controller('myCtrl', function($scope){
$scope.firstName = 'QiuChen';
$scope.lastName = 'Liu';
$scope.fullName = function () {
return $scope.firstName + $scope.lastName;
};
$scope.names = [
{'name':'alice','age':17},
{'name':'burgess','age':26},
{'name':'QQ','age':23},
{'name':'userB','age':33},
{'name':'userC','age':19},
{'name':'userD','age':20},
{'name':'userE','age':47},
{'name':'userF','age':28}
];
});

AngularJS(一)的更多相关文章

  1. 通过AngularJS实现前端与后台的数据对接(二)——服务(service,$http)篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  2. AngularJs之九(ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  3. AngularJS过滤器filter-保留小数,小数点-$filter

    AngularJS      保留小数 默认是保留3位 固定的套路是 {{deom | number:4}} 意思就是保留小数点 的后四位 在渲染页面的时候 加入这儿个代码 用来精确浮点数,指定小数点 ...

  4. Angular企业级开发(1)-AngularJS简介

    AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...

  5. 模拟AngularJS之依赖注入

    一.概述 AngularJS有一经典之处就是依赖注入,对于什么是依赖注入,熟悉spring的同学应该都非常了解了,但,对于前端而言,还是比较新颖的. 依赖注入,简而言之,就是解除硬编码,达到解偶的目的 ...

  6. 步入angularjs directive(指令)--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  7. 玩转spring boot——结合AngularJs和JDBC

    参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...

  8. 玩转spring boot——结合jQuery和AngularJs

    在上篇的基础上 准备工作: 修改pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  9. 通过AngularJS实现前端与后台的数据对接(一)——预备工作篇

    最近,笔者在做一个项目:使用AngularJS,从而实现前端与后台的数据对接.笔者这是第一次做前端与后台的数据对接的工作,因此遇到了许多问题.笔者在这些问题中,总结了一些如何实现前端与后台的数据对接的 ...

  10. AngularJS 系列 学习笔记 目录篇

    目录: AngularJS 系列 01 - HelloWorld和数据绑定 AngularJS 系列 02 - 模块 (持续更新)

随机推荐

  1. Codeforces Round #382 (Div. 2) 继续python作死 含树形DP

    A - Ostap and Grasshopper zz题能不能跳到  每次只能跳K步 不能跳到# 问能不能T-G  随便跳跳就可以了  第一次居然跳越界0.0  傻子哦  WA1 n,k = map ...

  2. CDN在中国的发展的九个年头的点点滴滴

    对于发展快速的互联网行业来说,8年时间已经足够让一个产业跌宕起伏.但CDN在国内的发展却没有大红大紫,直到2005... 对于发展快速的互联网行业来说,8年时间已经足够让一个产业跌宕起伏.但CDN在国 ...

  3. 关于MAC系统的DNSCrypt的设置教程

    DNSCrypt的设计完全是为了解决某些网站DNS系统被污染的问题. 如图是查看本地的DNS DNS系统是一个主要领域的安全保障,因为受损数据从一个DNS服务器会导致你的系统或者无法找到需要的服务器需 ...

  4. CoreLocation框架的使用---地理编码

    #import "ViewController.h" #import <CoreLocation/CoreLocation.h> @interface ViewCont ...

  5. 【转】jquery validate验证框架与kindeditor使用需二次提交的问题

    原文:http://blog.csdn.net/wlsyn/article/details/11536399在使用jquery的验证框架对kindeditor富文本编辑器进行验证的过程中,发现提 交时 ...

  6. MVC过滤器

    MVC的每一个请求都会给相应的控制器的对应行为方法处理,那么想在这些处理的前 前后后增加一些额外的逻辑处理,因此过滤器的作用就来了 MVC支持的过滤器类型有四种,分别是:Authorization(授 ...

  7. python基础语法(3)

    七.面向对象编程 python支持面向对象编程:类和对象是面向对象编程的两个主要方面,类创建一个新的类型,对象是这个类的实例. 对象可以使用普通的属于对象的变量存储数据,属于对象或类的变量被称为域:对 ...

  8. php安装gearman扩展实现异步分步式任务

    参考: 1.小喵爱你的博客 2.PHP Manual 依赖 1.gcc44 2.boost >=1.39 3.libevent 4.php5.3+ 5.update ld.so.conf 安装依 ...

  9. Codeforces #259 Div.2

    A. Little Pony and Crystal Mine 模拟题. 用矩阵直接构造或者直接根据关系输出 B. Little Pony and Sort by Shift 模拟题. 通过提供的操作 ...

  10. RHEL5.8使用yum安装X Window System

    硬件配置:4C+16GB 操作系统:Red Hat Enterprise Linux Server release 5.8 (Tikanga) 服务器中使用的是RHEL5.8操作系统,只安装了基本的功 ...