AngularJS开发下一代Web应用笔记(一)
一、写在最前
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对象会把数据绑定自动传递给我们;我们不需要通过调用任何函数来创建他。只是通过将他防止在控制器的构造器中来请求它。 |
数据绑定 | |
该过程,没有在输入字段上注册一个改变值的事件监听器。 |
指令 | 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应用笔记(一)的更多相关文章
- 《AngularJS开发下一代Web应用》读书笔记与感想
该书一共130页打算四天读完,边读边记录. 1. 2.学习MogoDB 3. 4. 5. 创建标识符的一段简单伪码模板: var myModule = angular.module(...); myM ...
- 用AngularJS开发下一代Web应用 系列入门基础教程
开篇介绍 AngularJS是什么东西?我觉得不用再描述了.可自行去充电一下.按照惯例,让我们先看看一个Hello World的开门简介吧. <!doctype html> <htm ...
- [已读]用Angularjs开发下一代web应用
屯了很久了,貌似是国内出现的第一本讲angularjs的书...上上周看完的时候,angular2都要出来了...angular的双向绑定很赞,因为之前公司后台系统我都用tmodjs做,模板语法什么的 ...
- 用angularjs开发下一代web应用(二):angularjs应用骨架(二)
1.浅谈非入侵式JavaScript <div ng-click="doSomething()">...</div>这些指令和原来的事件处理器有下面不同之处 ...
- 使用AngularJS开发下一代Web应用
原版的:https://github.com/edagarli/AngularJSWeb 来源书:https://github.com/shyamseshadri/angularjs-book 版权声 ...
- AngularJS开发指南16:AngularJS构建大型Web应用详解
AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇 ...
- 有了 Docker,用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取
点这里 阅读目录 用 AngularJS(以及其它 JavaScript 框架)开发的 Web 站点不支持爬虫的抓取 解决方案 为什么公开我们的解决方案 实现 AngularJS 服务 结论 Pr ...
- crawler_Docker_解决用 JavaScript 框架开发的 Web 站点抓取
[转载,后续补上实践case] 有了 Docker,用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取 [编者的话]Prerender 服务能够为网络爬虫提供预先渲染的 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
随机推荐
- Struts2的一个问题: 找不到struts.xml的路径问题
一. 最近在学习Struts2的一些知识,在使用Struts2搭建框架的时候,部署到服务器上的时候出现上面的问题: 三月 19, 2016 1:43:24 下午 org.apache.tomcat.u ...
- Linux下 config/configure/Configure、make 、make test/make check、sudo make install 的作用
转自Linux下 config/configure/Configure.make .make test/make check.sudo make install 的作用 这些都是典型的使用GNU的AU ...
- 年度十佳 DevOps 博客文章(前篇)
如果说 15 年你还没有将 DevOps 真正应用起来,16 年再不实践也未免太落伍了.国内 ITOM 领军企业 OneAPM 工程师为您翻译整理了,2015 年十佳 DevOps 文章,究竟是不是深 ...
- POJ 1364 King
http://poj.org/problem?id=1364 题意 :给出一个序列a1,a2,a3,a4.....ai,......at ;然后给你一个不等式使得ai+a(i+1)+a(i+2)+.. ...
- 优化 Android 线程和后台任务开发
在 Android 开发中,你不应该做任何阻碍主线程的事情.但这究竟意味着什么呢?在这次海湾 Android 开发者大会讲座中,Ari Lacenski 认为对于长时间运行或潜在的复杂任务要特别小心. ...
- HDU 4009 不定根最小树形图
讲一下建图过程,首先建立一个超级源点S,对于这个源点,向每个HOUSE连一条有向边,权值为该HOUSE建立WELL的费用,即高度*X. 然后每个可以连边的WELL之间,费用为曼哈顿距离*Y,然后考虑两 ...
- Oracle系列之序列
涉及到表的处理请参看原表结构与数据 Oracle建表插数据等等 语法结构:创建序列 create sequence sequence_name start with num increment by ...
- 【C++】计算所有小于N的勾股数组合,可以写入txt文件保存,每组占一行。
#ifndef PYTHAGOREAN_H_ #define PYTHAGOREAN_H_ #include <iostream> class Pythagorean { public: ...
- PHP数组排列
一.先看最简单的情况.有两个数组: $arr1 = array(1,9,5);$arr2 = array(6,2,4); array_multisort($arr1,$arr2); print_r($ ...
- Linux上构建一个RADIUS服务器详解
作为一名网络管理员,您需要为您所需管理的每个网络设备存放用于管理的用户信息.但是网络设备通常只支持有限的用户管理功能.学习如何使用Linux上的一个外部RADIUS服务器来验证用户,具体来说是通过一个 ...