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),控 ...

随机推荐

迟来的Android的Camera开发总结
这是好久前写的项目,但一直没有去总结.刚好在准备找工作这段时间来总结自己做过的东西,学到的东西. 写Android的自定义的相机应用时,首先要知道一些Camera开发必须知道的尺寸,不然在调试的时候, ...
ion-slide-box，无限循环
ion-slide-box网络加载图片,及时更新,无限循环 does-continue:是否循环切换,开头的幻灯页只能向左滑动,最后的幻灯页只能向右滑动. 将does-continue属性值设为tru ...
新技能get——斜率优化
好久没写博客了……我终于回来了…… dp总是令我很头疼的问题之一,然而我还是要学一下怎么优化它. 下面请看一道题吧: [bzoj3675][Apio2014]序列分割试题描述小H最近迷上了一个分割 ...
JavaScript判断是否是手机mobile登录
在页面代码中加入以下js,即可利用JavaScript判断是否是手机mobile登录! <script type="text/javascript" src="${ ...
Lucene4.1 视频学习
1.将路径建立在内存中 Directory d = new RAMDirectiry(); 2.Filed Index(索引选项):Index.ANALYZED:进行分词和索引,适应于标题,内容等In ...
winkawaks模拟器
Winkawaks (温科沃克斯)win+ka(日文)+wa(也是日文)+k+s 最好的街机模拟器之一,与Nebula和MAME齐名,支持的游戏的有CAPCOM公司的CPS1,CPS2所有游戏,如三国 ...
Http Request
function getSend($url,$param) { $ch = curl_init($url."?".$param); curl_setopt($ch,CURLOPT_ ...
ZJOI day1总结
虽然没人看,虽然滚了大粗,但还是这样勉励一下自己.. 今年大约是进队无望了. before ZJOI 感觉自己时间很充裕,与lyx大爷一起颓颓颓.. day -3 到xj. day -2 听课.感觉洲 ...
MappingJacksonHttpMessageConverter过期
最新在做一个SSM整合学习项目,maven加上jackson库,spring配置json,tomcat不能正常部署启动 Maven配置 <!-- 引入jackson,防止ajax调用返回json ...
C++数学、信号处理相关库
1.Eigen 是一个线性算术的C++模板库,包括:vectors, matrices, 以及相关算法.功能强大.快速.优雅以及支持多平台. http://www.oschina.net/p/arma ...