angularjs旨在减轻使用AJAX开发应用程序的复杂度，使得程序的创建、測试、扩展和维护变得easy。以下是angularjs中的一些核心概念。

1. client模板
     多页面的应用通过组装和拼接server上的数据来生成HTML，然后输出到浏览器。Angularjs不同于此的是，传递模板和数据到浏览器，然后在浏览器端进行组装。浏览器的角色编程了仅仅提供模板的静态资源和模板所须要的数据。
     
hello.html

<html ng-app>

<head>

<script src="angular.js"></script>

<script src="controllers.js"></script>

</head>

<body>

<div ng-controller='HelloController'>

<p>{{greeting.text}}, World</p>

</div>

</body>

</html>
controllers.js

function HelloController($scope) {

    $scope.greeting = { text: 'Hello' };

}


2. 模型  视图  控制器(MVC)
     MVC的核心概念是，在代码之间明白分离管理数据（模型），应程序逻辑（控制器），并将数据呈现给用户（视图）。在Angular应用中，视图就是DOM，控制器就是Javascript类，模型数据存储在对象属性中。

3. 数据绑定
     典型的DOM操作，都是先将数据处理完成之后，再通过元素上设置innerHTML将结果插入到所要的DOM中。这种工作反复性非常高，还要确保界面和javascript属性中获取到数据时正确的状态。
     而Angular中包含这中功能，只声明界面的某一部分银蛇到Javascript的属性，让它们自己主动完毕同步。
<html ng-app>

<head>

<script src="angular.js"></script>

<script src="controllers.js"></script>

</head>

<body>

<div ng-controller='HelloController'>

<input ng-model='greeting.text'>

<p>{{greeting.text}}, World</p>

</div>

</body>

</html>
controllers.js 
function HelloController($scope) {

    $scope.greeting = { text: 'Hello' };

}
input的值（用户的输入）与greeting.text绑定在一起，并及时呈如今<p>中。绑定是双向的，也可用通过设置$scope.greeting.text的值，并自己主动同步到输入框和双大括号（{{}}）中

4. 依赖注入
     $scope对象吧数据绑定自己主动通过HelloController构造函数传递给开发人员，$scope并非我们唯一须要的，还能够加入一个$location对象，如：
function HelloController($scope, $location) {

$scope.greeting = { text: 'Hello' };

// use $location for something good here...

}
通过Angular的依赖注入系统，我们可以遵循迪米特法则（最少知识原则），仅仅关注我们最须要的部分。

5. 指令
     Angular包含一个强大的DOM转换引擎，使得开发人员有能力扩展HTML语法。在之前的实例中我们看到{{}}是用绑定数据的，ng-controller是用来指定哪个控制器来服务哪个视图，ng-model将一个输入框绑定到模型部分。我们称之为HTML扩展指令。
     Angular包括非常多标识符来定义视图，这些标识符能够定义常见的视图作为模板。除此之外，开发人员还能够编写自己的标识符来扩展HTML模板。

购物车演示样例：
<!DOCTYPE html>

<html ng-app>

<head>

    <title>Your Shopping Cart</title>

</head>

<body ng-controller='CartController'>

<h1>Your Order</h1>

<div ng-repeat='item in items'>

    <span ng-bind="item.title"></span>

    <input ng-model='item.quantity'/>

    <span ng-bind="item.price | currency"></span>

    <span ng-bind="item.price * item.quantity | currency"></span>

    <button ng-click="remove($index)">Remove</button>

</div>

<script src="../js/angular-1.2.2/angular.js"></script>

<script>

    function CartController($scope) {

        $scope.items = [

            {title: 'Paint pots', quantity: 8, price: 3.95},

            {title: 'Polka dots', quantity: 17, price: 12.95},

            {title: 'Pebbles', quantity: 5, price: 6.95}

        ];

        $scope.remove = function (index) {

            $scope.items.splice(index, 1);

        }

    }

</script>

</body>

</html>
<html ng-app>

   ng-app告诉Angular管理页面的那一部分。依据须要ng-app也能够放在<div>上

<body ng-controller="CartController">

   Javascript类叫做控制器，它能够管理对应页面区域中的不论什么东西。

<div ng-repeat="item in items">

   ng-repeat代表为items数组中每一个元素拷贝一次该DIV中的DOM，同一时候设置item作为当前元素，并可在模板中使用它。

<span>{{item.title}}</span>

   表达式{{item.title}}检索迭代中的当前项，并将当前项的title属性值插入到DOM中

<input ng-model="item.quantity">

   ng-model定义输入字段和item.quantity之间的数据绑定

<span>{{item.price | currency}}</span>

<span>{{item.price * item.quantity | currency}}</span>

    单位价格和总价格式化成美元形式。通过Angular的currency过滤器进行美元形式的格式化。

<button ng-click="remove($index)"> Remove </button>

   通过ng-repeat的迭代顺序$index，移除数据和对应的DOM（双向绑定特性）

function CartController($scope) {

   CartController 管理这购物车的逻辑，$scope 就是用来把数据绑定到界面上的元素

$scope.items = [ {title: 'Paint pots', quantity: 8, price: 3.95}, {title: 'Polka dots', quantity: 17, price: 12.95}, {title: 'Pebbles', quantity: 5, price: 6.95} ];

   通过定义$scope.items，我们已经创建一个虚拟数据代表了用户购物车中物品集合，购物车是不能仅工作在内存中，也须要通知server端持久化数据。

$scope.remove = function(index) {$scope.items.splice(index, 1);};

   remove()函数可以绑定到界面上，因此我们也把它添加到$scope 中




Angularjs -- 核心概念的更多相关文章

  1. 领域驱动设计（DDD）部分核心概念的个人理解

    领域驱动设计(DDD)是一种基于模型驱动的软件设计方式.它以领域为核心,分析领域中的问题,通过建立一个领域模型来有效的解决领域中的核心的复杂问题.Eric Ivans为领域驱动设计提出了大量的最佳实践 ...

  2. Javascript本质第一篇：核心概念

    很多人在使用Javascript之前都至少使用过C++.C#或Java,面向对象的编程思想已经根深蒂固,恰好Javascript在语法上借鉴了Java,虽然方便了Javascript的入门,但要深入理 ...

  3. [程序设计语言]-[核心概念]-02:名字、作用域和约束(Bindings)

    本系列导航 本系列其他文章目录请戳这里. 1.名字.约束时间(Binding Time) 在本篇博文开始前先介绍两个约定:第一个是“对象”,除非在介绍面向对象语言时,本系列中出现的对象均是指任何可以有 ...

  4. spring技术核心概念纪要

    一.背景 springframework 从最初的2.5版本发展至今,期间已经发生了非常多的修正及优化.许多新特性及模块的出现,使得整个框架体系显得越趋庞大,同时也带来了学习及理解上的困难. 本文阐述 ...

  5. ElasticSearch学习笔记-01 简介、安装、配置与核心概念

    一.简介 ElasticSearch是一个基于Lucene构建的开源,分布式,RESTful搜索引擎.设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便.支持通过HTTP使用JSON进 ...

  6. Playmaker Input篇教程之引入的核心概念

    Playmaker Input篇教程之引入的核心概念 Playmaker Input引入的核心概念 Playmaker引入了4个核心概念:状态机.动作.变量和事件.了解它们是学习操作Playmaker ...

  7. Maven的几个核心概念

    POM (Project Object Model) 一个项目所有的配置都放置在 POM 文件中:定义项目的类型.名字,管理依赖关系,定制插件的行为等等.比如说,你可以配置 compiler 插件让它 ...

  8. 刀哥多线程GCD核心概念gcd

    GCD GCD 核心概念 将任务添加到队列,并且指定执行任务的函数 任务使用 block 封装 任务的 block 没有参数也没有返回值 执行任务的函数 异步 dispatch_async 不用等待当 ...

  9. cocos2d-x一些核心概念截杀

    Cocos2d-x中有很多概念,这些概念很多来源于动画.动漫和电影等行业,例如:导演.场景和层等概念,当然也有些有传统的游戏的概念.Cocos2d-x中核心概念:导演, 场景,层,节点,精灵,菜单动作 ...

随机推荐

  1. cocos2dx-2.x CCFileUtils文件管理分析（2）

    于1于,我只是对整体结构进行了分析,然后,2于,我会在一些我们经常使用的分析功能. //获取给定文件名称的全路径 //以下这非常长一段凝视.通过举样例,像我们说明cocos2dx获取文件全路径的规则. ...

  2. 2015最新iherb海淘攻略-图文入门教程

    IHerb是美国最热门的海淘海购网站之中的一个,适合不爱担心,怕麻烦的朋友入门海淘,由于它有中文页面,可直邮中国,上千个母婴用品.化妆品.保健品品牌,最重要的是!首次下单,价值$40及以上的订单会马上 ...

  3. C语言标准库函数qsort具体解释

    1 函数简单介绍 功 能: 使用高速排序例程进行排序 头文件:stdlib.h 用 法: void qsort(void *base,int nelem,int width,int (*fcmp)(c ...

  4. 【原创】构建高性能ASP.NET站点 第五章—性能调优综述（后篇）

    原文:[原创]构建高性能ASP.NET站点 第五章-性能调优综述(后篇) 构建高性能ASP.NET站点 第五章—性能调优综述(后篇) 前言:本篇主要讲述如何根据一些简单的工具和简单的现象来粗布的定位站 ...

  5. C/C++数据对齐汇总

     C/C++数据对齐汇总  这里用两句话总结数据对齐的原则: (1)对于n字节的元素(n=2,4,8,...),它的首地址能被n整除,才干获得最好的性能: (2)如果len为结构体中长度最长的变量,s ...

  6. SSL探03

    本文探讨了Openssl的Engine机械.Openssl硬件引擎(Engine)可以使用户比較easy地将自己的硬件增加到openssl中去,替换其提供的软件算法. ENGINE 是 OPENSSL ...

  7. ext Window点击右上角的关闭（Xbutton）加入监控事件

    使用场景:关闭window的时候添加监听事件. 正确的使用方式: addwin = new Ext.Window({ title : '新增', closable : true, width : 50 ...

  8. （4）通过调用hadoop的java api实现本地文件上传到hadoop文件系统上

    (1)首先创建java project 选择eclipse菜单上File->New->Java Project. 并命名为UploadFile. (2)加入必要的hadoop jar包 右 ...

  9. C#枚举数和迭代器

    大道至简,始终认为简洁是一门优秀的编程语言的一个必要条件.相对来说,C#是比较简洁的,也越来越简洁.在C#中,一个关键字或者语法糖在编译器层面为我们做了很多乏味的工作,可能实现的是一个设计模式,甚至是 ...

  10. COC+RTS+MOR游戏开发 一（游戏特色分析，和实践）

    本场比赛的临时名称 游戏特色(-):COC风格 ,塔防养成类游戏.          一款史诗般的战斗策略游戏.玩家须要建立村庄,成千上万的网友训练玩家的军队和战斗. 游戏中玩家须要不断的提高军队的作 ...