一、写在最前

AngularJS是Google推出的一款Web应用开发框架。它提供了一系列兼容性良好并且可扩展的服务，包括数据绑定、DOM操作、MVC设计模式和模块加载等。

现在网上JS框架茫茫多，真不知道是到底要学习什么框架，学习了这个框架，说不定还没用在项目，又有更好的js框架出来了。前端就是不断折腾新东西，生命在于折腾~

是的，这么多的前端框架，是不是真的都要学习？？答案当然不是，看所要完成的项目。这是带我的前端前辈告诉我，具体使用什么框架还是不用框架，

看项目需求，一切都以按时按质完成作为选择的标准。但是新的东西要学习，不学习就落后。

二、AngularJS的几个重要概念有什么

客户端模板   举个栗子：hello.html

模型/视图/控制器(MVC)

数据绑定

依赖注入

路由管理

指令（Angular的灵魂）

示例：购物车（源码在最后）

三、对这些概念的理解　　

插个曲，Angular最适合用来做单页web应用。在百度上查了单页web应用的概念。如表：

单页web应用（qq音乐）

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。

单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。
优点：
1).良好的交互体验（用户不需要重新晒新页面，获取数据都是通过ajax异步获取）
2).良好的前后端分离
3).减轻服务器压力（服务器只用出数据， 不用管展示逻辑和页面合成，吞吐能力会提高几倍）

4)..共用一套后端程序代码（不用修改后端程序代码就可以同时用于Web界面、手机、平板等多种客户端）
缺点：
1).SEO难度较高
2).前进、后退管理（ 所有的页面切换需要自己建立堆栈管理）
3).初次加载耗时多（代码合并、CDN）

像游戏开发，频繁操作DOM也不适合使用Angular
 
客户端模板  
多页面 单页面
通过装配和链接服务器上数据来创建HTML，然后将构建好的HTML页面发送到浏览器。 Angular将模板和数据推送到浏览器中装配他们，然后服务器角色只是为模板提供静态资源以及为模板提供数据
 
 
模型/视图/控制器(MVC)  

M 代码中清晰的分离数据管理 (模型 )

V 及给用户呈现数据 (视图 )

C  应用程序逻辑 (控制器 )
Angular中的
M  模型中的数据便是存储在对象中的属性 (属性值
V   文档对象模型 (DOM)
C   控制器是 JavaScript类
 
C和V之间的纽带就是$scope
 
 
数据绑定 双向绑定
ng-model 所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。
 
 
依赖注入 举个栗子
程序运行过程中，如需另一个对象协作(调用它的方法、访问他的属性)时，无须在代码中创建被调用者，而是依赖于外部容器的注入


在HelloController控制器中，$scope对象会把数据绑定自动传递给我们；我们不需要通过调用任何函数来创建他。只是通过将他防止在控制器的构造器中来请求它。
 
 
控制器helloController单词首字母大写
数据绑定  
该过程，没有在输入字段上注册一个改变值的事件监听器。
 
 
指令 Angular之可以可以编写模板如HTML一样，是因为框架核心包含了一个强大的DOM解析引擎。
扩展指令 例如：ng-controller。在HTML模板看到不属于HTML规范的新属性，这称为HTML扩展指令
自定义指令  自己定义自己需要的指令（据说指令是Angular的灵魂）
 
 
附购物车源码：

<!DOCTYPE html>

<html ng-app>

<head>

    <meta charset="UTF-8">

    <title>购物车</title>

</head>

<body ng-controller="CartController">

    <h1>Your order</h1>

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

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

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

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

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

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

    </div>

</body>

<script src="../assets/js/angular-1.3.0.js"></script>

<script>

function CartController($scope){

    // currency是过滤器，用来转换文本

    // $index参数   包含了它在ng-repeat的索引值

    //splice()   arrayObject.splice(index,howmany,item1,.....,itemX)

    // 定义一个一维数组存放对象

    $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>

</html>
 运行后结果：
 
 
 
 
 
 
 
 
 
 
 
自定义指令的图解：
 
 
 
 
 
 
 
 
 
 

AngularJS开发下一代Web应用笔记（一）的更多相关文章

  1. 《AngularJS开发下一代Web应用》读书笔记与感想

    该书一共130页打算四天读完,边读边记录. 1. 2.学习MogoDB 3. 4. 5. 创建标识符的一段简单伪码模板: var myModule = angular.module(...); myM ...

  2. 用AngularJS开发下一代Web应用 系列入门基础教程

    开篇介绍 AngularJS是什么东西?我觉得不用再描述了.可自行去充电一下.按照惯例,让我们先看看一个Hello World的开门简介吧. <!doctype html> <htm ...

  3. [已读]用Angularjs开发下一代web应用

    屯了很久了,貌似是国内出现的第一本讲angularjs的书...上上周看完的时候,angular2都要出来了...angular的双向绑定很赞,因为之前公司后台系统我都用tmodjs做,模板语法什么的 ...

  4. 用angularjs开发下一代web应用（二）：angularjs应用骨架（二）

    1.浅谈非入侵式JavaScript <div ng-click="doSomething()">...</div>这些指令和原来的事件处理器有下面不同之处 ...

  5. 使用AngularJS开发下一代Web应用

    原版的:https://github.com/edagarli/AngularJSWeb 来源书:https://github.com/shyamseshadri/angularjs-book 版权声 ...

  6. AngularJS开发指南16：AngularJS构建大型Web应用详解

    AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇 ...

  7. 有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取

    点这里 阅读目录 用 AngularJS(以及其它 JavaScript 框架)开发的 Web 站点不支持爬虫的抓取 解决方案 为什么公开我们的解决方案 实现 AngularJS 服务 结论   Pr ...

  8. crawler_Docker_解决用 JavaScript 框架开发的 Web 站点抓取

    [转载,后续补上实践case] 有了 Docker,用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取 [编者的话]Prerender 服务能够为网络爬虫提供预先渲染的 ...

  9. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

随机推荐

  1. 在Unity中高效工作（下）

    原地址:http://www.unity蛮牛.com/thread-20005-1-1.html Tips for Creating Better Games and Working More Eff ...

  2. android ExpandableListActivity的使用

    package com.example.keKuoZhanLieBiao; import android.app.ExpandableListActivity; import android.os.B ...

  3. android 小米手机连接到电脑adb无法识别 解决方案

    下载并安装小米手机助手 它会自动帮你安装驱动程序 安装成功后重启一下adb服务 应该就可以了

  4. ANDROID_MARS学习笔记_S02_006_APPWIDGET3_AppWidget发送广播及更新AppWidget

    一.简介 二.代码1.xml(1)example_appwidget.xml <?xml version="1.0" encoding="utf-8"?& ...

  5. ARM的NEON协处理器是什么

    ARM的NEON协处理器是什么 何谓多媒体扩展指令集?由于原理复杂坚涩,小编就简单的打个比方:厂商们分析平时处理器干哪些事情最慢.又最经常用到,然后把这些最消耗时间的事情固化成电路,做成一个额外的部分 ...

  6. Android ServiceConnection

    绑定到一个Service 应用组件(客户端)可以调用bindService()绑定到一个service．Android系统之后调用service的onBind()方法,它返回一个用来与service交 ...

  7. python描述符descriptor(二)

    python内置的描述符 python有些内置的描述符对象,property.staticmethod.classmethod,python实现如下: class Property(object): ...

  8. Etcd学习（二）集群搭建Clustering

    1.单个etcd节点(测试开发用) 之前我一直开发测试一直是用的一个Etcd节点,然后启动命令一直都是直接打一个etcd(我已经将etcd安装目录的bin目录加入到PATH环 境变量中),然后启动信息 ...

  9. Xcode6新建的工程没有Frameworks文件夹了?!原来是这样

    http://stackoverflow.com/questions/24181062/default-frameworks-missing-in-xcode-6-beta They are impo ...

  10. RMAN综合学习之备份

    rman是最经济实惠的oracle备份工具,在这里做一个rman的整体学习. 文章中大多是rman命令的语法,还是最好做做实验,以便印象深刻,因为大多数数据库的备份就是按时跑脚本,恢复也不是经常能遇到 ...