Angular.JS
AngularJS是什么?
完全使用 JavaScript编写的客户端技术。同其他历史悠久的 Web技术（ HTML、 CSS 和JavaScript）配合使用，使Web应用开发比以往更简单、更快捷。
<div ng-app="" data-ng-init="name='Kavlez'">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
{{name}}
{{6+8}}
</div>
- ng-app:定义一个AngularJS应用，被其包含的内容都属于该应用。
- ng-init:初始化应用数据。
- ng-model:将数据绑定到当前应用。
- ng-bind:将应用中定义的变量在该标签中显示
AngularJS的指令都是以ng开头，或者也可以使用data-ng开头。 AngularJS的表达式用两个大括号表示:{{expression}}
这便是AngularJS最基本的功能：数据绑定。
Controllers
我们用controller对一个AngularJS应用进行控制。
用ng-controller定义一个controller，声明所有被它包含的元素都属于这个控制器。
例如：
<div ng-app="" ng-controller="personController">
<h1>{{ person.name +' is a(an) '+person.job }}</h1>
<h1>{{ person.sayHi() }}</h1>
</div>
<script>
function personController($scope) {
$scope.person = [];
$scope.person.name='Kavlez'
$scope.person.job='brogrammer'
$scope.person.sayHi = function(){
return "Hi! I'm "+ $scope.person.name + ", I'm a(an) " + $scope.person.job;
}
}
</script>
Module
到目前为止，定义一个Angular app都用ng-app=""的方式。
可行，但是这个app下的变量和函数都是global的，而且会造成controller污染(pollute)。
而通常，我们用module把app组织起来。
我们可以通过ng-app="名称"或angular.modele()来声明一个module。
该方法有两个参数：
- 模块的名称
- 依赖列表
比如，之前的例子可以改为：
<div ng-app="myApp" ng-controller="fighterController">
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("fighterController", function($scope) {
//..
}
</script>
</div>
如果将app和controller放到两个文件分别定义，则：
<div ng-app="myApp" ng-controller="fighterController">
<script src="myApp.js"></script>
<script src="myAppControllers.js"></script>
</div>
myApp.js：
var myApp = angular.module("myApp",[]);
myAppControllers.js:
myApp.controller("fighterController", function($scope) {
//..
}
Filter
这个东西可以加在表达式里面，改变表达式的输出格式。
我们可以用以下Filters：
| Filter | Description |
|---|---|
| uppercase | 转大写 |
| lowercase | 转小写 |
| currency | 转货币格式 |
| orderBy | 按指定属性排序 |
| filter | 按指定关键字进行过滤 |
前3种可以直接用在表达式中，比如：
{{name | uppercase}}
{{name | lowercase}}
{{total | currency}}
filter和orderBy通常用于数组：
<div ng-app="" ng-controller="fighterController">
<input ng-model="search"/>
<ul>
<li ng-repeat="f in fighters|filter:search">
{{ f }}
</li>
</ul>
<script>
function fighterController($scope) {
$scope.fighters = [
{name:'Ryu',country:'Japan'},
{name:'Ken',country:'USA'},
{name:'Chun Li',country:'China'},
{name:'GuiLe',country:'USA'},
{name:'Zangief',country:'Russia'}
];
}
</script>
</div>
当然，数据不会这样放在一个controller里。
我们可以通过$http来请求数据并进行绑定。
上面的例子可以改为：
function fighterController($scope,$http) {
var url = '请求地址';
$http.get(url).success(function(response) {
$scope.fighters = response;
})
}
标记ng-app告诉AngularJS处理整个HTML页并引导应用：
<html ng-app>
AngularJS应用的解析
本节描述AngularJS应用程序的三个组成部分，并解释它们如何映射到模型-视图-控制器设计模式：
模板（Templates）
模板是您用HTML和CSS编写的文件，展现应用的视图。 您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！
应用程序逻辑（Logic）和行为（Behavior）
应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。
模型数据（Data）
模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。
AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。
Angular.JS的更多相关文章
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...
- (翻译)Angular.js为什么如此火呢？
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- angular.js写法不规范导致错误
以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...
- Angular.js实现折叠按钮的经典指令.
var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...
- Angular.js通过bootstrap实现经典的表单提交
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- Angular JS 学习之Bootstrap
1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...
- Angular.js 的初步认识
MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控 ...
随机推荐
- hexo问题篇(偶尔抽抽疯)
hexo安安稳稳的跑了很久,然后 ....让人心碎的hexo问题,华丽丽的摔倒在坑里,只因update了hexo version最是哪一句 hexo server让人欲哭无泪 -问题场景 设备: Ma ...
- 以下css可以清除浮动
.clearfix:after { content: ""; clear: both; visibility: hidden; display: block; height: 0p ...
- Gunicorn 文档翻译
服务器模式 Gunicorn 基于 pre-fork 模式,这意味着有一个主进程管理工作的子进程.主进程对客户端的工作业务有了解.所有的请求和响应都是工作子进程处理. 主进程 主进程是一个简单的循环, ...
- iOS开发——网络篇——文件下载(NSMutableData、NSFileHandle、NSOutputStream)和上传、压缩和解压（三方框架ZipArchive），请求头和请求体格式，断点续传Range
一.小文件下载 NSURL *url = [NSURL URLWithString:@"http://120.25.226.186:32812/resources/images/minion ...
- iOS开发——UI基础-UIButton、UIImageView、UILabel的选择
1.UILabel - UILabel的常见属性 @property(nonatomic,copy) NSString *text; 显示的文字 @property(nonatomic,retain) ...
- leetcode 102. Binary Tree Level Order Traversal
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
- 使用 Intel HAXM 为 Android 模拟器加速，媲美真机
http://www.cnblogs.com/beginor/archive/2013/01/13/2858228.html
- keepalived和heartbeat区别
<1>Keepalived使用的vrrp协议方式,虚拟路由冗余协议 (Virtual Router Redundancy Protocol,简称VRRP):Heartbeat是基于主机或网 ...
- 【GoLang】golang垃圾回收 & 性能调优
golang垃圾回收 & 性能调优 参考资料: 如何监控 golang 程序的垃圾回收_Go语言_第七城市 golang的垃圾回收(GC)机制 - 两只羊的博客 - 博客频道 - CSDN.N ...
- Binary Tree Upside Down
Given a binary tree where all the right nodes are either leaf nodes with a sibling (a left node that ...