一、写在最前

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. POJ 2375 Cow Ski Area[连通分量]

    题目链接:http://poj.org/problem?id=2375题目大意:一片滑雪场,奶牛只能向相邻的并且不高于他当前高度的地方走.想加上缆车是的奶牛能从低的地方走向高的地方,求最少加的缆车数, ...

  2. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  3. IBM

    http://www.ibm.com/developerworks/cn/data/library/techarticle/dm-1306mongodb2/

  4. 深入WSGI，并按样例实现一个

    感觉WSGI确实和SERVLET相似,为PYTHON提供了运行和管理环境.WSGI服务器和PYTHON的WEB框架一起,实现WEB响应. 步骤: 首先,服务器启动并加载一个由Web框架/应用提供的可调 ...

  5. Maven如何手动添加jar包到本地Maven仓库

    Apache Maven,是一个软件(特别是Java软件)项目管理及自动构建工具,由Apache软件基金会所提供.基于项目对象模型(缩写:POM)概念,Maven利用一个中央信息片断能管理一个项目的构 ...

  6. UVA 10896 Sending Email

    这个题目真是伤透脑筋了,一直RE,连着改了好几个版本,又是spfa,又是单调队列dijkstra+单调队列,总是不过,后来发现M开小了,双向边应该开m的两倍,悲剧啊!!!以后不管怎样,数组一定要尽量开 ...

  7. ruby Mixin用法

    module My NA="China" attr:name attr:age def set_name(name) @name=name end def get_name ret ...

  8. HDU 4288 Coder 【线段树+离线处理+离散化】

    题意略. 离线处理,离散化.然后就是简单的线段树了.需要根据mod 5的值来维护.具体看代码了. /* 线段树+离散化+离线处理 */ #include <cstdio> #include ...

  9. APP-PAY-06153 When Trying To Open Organization Definition Form (文档 ID 1323165.1)

    In this Document Symptoms Cause Solution Applies to: Oracle Inventory Management - Version 11.5.10.2 ...

  10. poj2029Get Many Persimmon Trees(最大矩阵和)

    链接 类似最大矩阵 sum存下 枚举最大就是 #include <iostream> #include<cstdio> #include<cstring> #inc ...