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。
该方法有两个参数:

  1. 模块的名称
  2. 依赖列表

比如,之前的例子可以改为:

<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的更多相关文章

  1. 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 的目的是 ...

  2. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  3. (翻译)Angular.js为什么如此火呢?

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  4. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  5. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  6. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  7. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  8. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  9. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

  10. Angular.js 的初步认识

    MVC模式 模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控 ...

随机推荐

  1. Javascript高级程序设计——this、闭包、函数表达式

    在javascript中函数声明会被提升,而函数表达式不会被提升.当函数执行时,会创建一个执行环境和相应的作用域链,然后利用arguments和其他的命名参数的值来初始化函数的活动对象,作用域链链中所 ...

  2. sass跨文件重写变量

    利用变量默认值: !default 你可以在变量尚未赋值前,通过在值的末尾处添加 !default 标记来为其指定. 也就是说,如果该变量已经被赋值, 就不会再次赋值, 但是,如果还没有被赋值,就会被 ...

  3. HDU 5073 Galaxy(2014鞍山赛区现场赛D题)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5073 解题报告:在一条直线上有n颗星星,一开始这n颗星星绕着重心转,现在我们可以把其中的任意k颗星星移 ...

  4. BZOJ4411——[Usaco2016 Feb]Load balancing

    1.题意: 给出N个平面上的点.保证每一个点的坐标都是正奇数. 你要在平面上画两条线,一条是x=a,一条是y=b,且a和b都是偶数. 直线将平面划成4个部分,要求包含点数最多的那个部分点数最少. 2. ...

  5. [TimusOJ1057]Amount of Degrees

    [TimusOJ1057]Amount of Degrees 试题描述 Create a code to determine the amount of integers, lying in the ...

  6. delay() .split()

    delay(500) 延时多少秒后执行,结合animate()使用 delay(500).animate({},时间) .split() stringObject.split(separator,ho ...

  7. opencv删除二值图中较小的噪点色块

    CvSeq* contour = NULL; double minarea = 100.0; double tmparea = 0.0; CFileDialog dlg(true); if (dlg. ...

  8. caffe学习系列(6):其他层介绍

    主要包括softmax-loss层(与softmax有区别),全连接层(Inner Prouduct),accuracy层,reshape层, Dropout层. softmax: layers { ...

  9. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  10. Majority Number I & || && |||

    Majority Number Given an array of integers, the majority number is the number that occurs more than ...