angular初体验

angular入门初体验-1

在开始学习 AngularJS 之前,您需要具备以下基础知识:
1 HTML
2 CSS
3 JavaScript

angula是什么?

  • 首先不得不说angular是一款非常优秀和高端的JavaScript框架. 它是2009年起,由 Miško Hevery 和 Adam Abron 开发的,后被 Google 收购,用于其多款产品.有一个全职的开发团队继续开发和维护这个库.
  • angular可以帮助我们轻松地构建SPA应用程序,通过指令扩展了HTML,通过表达式绑定数据到HTML.ang就是一个高级的模板引擎.最大程度上解放了DOM的操作,构建更为动感的HTML应用程序

###angular的核心

  • AngularJS是为了克服HTML在构建应用上的不足而设计的。有着诸多特性,
    最为核心的是:
    1 MVC(或者MV*)
    2 模块化
    3 自动化双向数据绑定
    4 语义化标签、依赖注入等等

为什么使用Angular

  • 演示 Demo 中的 compare

使用angula之前我们是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html lang="en">
<head>
<meta charset="UTF-8">
<title>传统页面操作数据操作方式</title>
</head>
<body>
<input id="txt_value" type="number">
<input id="btn_add" type="button" value="增加">
<script>
(function(window, document) {
var txt = document.querySelector('#txt_value');
var btn = document.querySelector('#btn_add');
btn.addEventListener('click', function(e) {
var now = txt.value - 0;
now = now + 1;
txt.value = now;
});
})(window, document);
</script>
</body>
</html>

使用angular以后将会是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用AngularJS实现自增功能</title>
</head>
<body ng-app>
<input type="number" ng-model="value">
<input type="button" ng-click="value=value+1" value="增加">
<script src="../bower_components/angular/angular.js"></script>
</body>
</html>

  • AngularJS
    让更少的代码,实现更强劲的功能,当然不仅仅是这些,这些只是皮毛,背后带来的价值才是巨大的,
    带领前端进入了MV* 的时代
    又是一场革命,Angular 引领了前端工业革命
    从 Angular 2009 年之后,前端市场越来越火爆了

AngularJS 优缺点

  • 优点:
  1. AngularJS模板功能强大丰富,自带了极其丰富的angular指令。
  2. AngularJS是完全可扩展的,与其他库的兼容效果很好,每一个功能可以修改或更换,以满足开发者独特的开发流程和功能的需求。
  3. AngularJS是一个比较完善的前端MVC框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;
  4. AngularJS是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。
  • 缺点:
  1. AngularJS强约束导致学习成本较高,对前端不友好。但遵守 AngularJS 的约定时,生产力会很高,对 后台服务器开发程序员友好。
  2. AngularJS不利于SEO,因为所有内容都是动态获取并渲染生成的,搜索引擎没法爬取。
  3. AngularJS作为 MVVM 框架,因为实现了数据的双向绑定,对于大数组、复杂对象会存在性能问题。

AngularJS 使用场景

  • 单页面应用程序
  • 复杂的后台管理系统
    • CRUD(增加 Create、查询 Retrieve、更新 Update、删除 Delete)
    • 繁杂的 DOM 操作处理的页面

Angular 是一个类 MVC 类结构的 JavaScript 框架,建议构建 CRUD 类型应用的时候使用它,
而对于那些图形编辑、游戏开发等应用,使用 Angular 就不如调用其它 JavaScript 类库方便,
如 jQuery。

学习资源推荐

关于版本

  • Angular 1
  • Angular 1 - Github
  • Angular 2

  • 版本 1.0 是在 2012 年发布的。

  • AngularJS在1.2之后的版本不再支持Internet Explorer 6和7.
  • 在1.3之后的版本停止对Internet Explorer 8的支持.
  • ng2 已经在2016年8月份正式发布了,现在公司里面用的不太多
  • ng4 将要在 2017年3月份正式发布
  • ng1 对于一些老项目还非常的多,ng1 已经在逐渐的走向没落了
    • ng 是第一个真正意义上把前端从刀耕火种的年代带到了工业时代
    • 目前市面上基本上会使用 Vue 或 React 的开发人员都多多少少会一点 Angular
    • 思想经典

结尾

之所以学习 Angular 1.x.x ,最经典,主要以体会前端框架思想为主,
市面上大部分会 Vue、React 的都会 Angular,而且很多书本中都会拿新框架和 Angular 做对比。

新东西虽然层出不穷,但是这些框架的开发思路、流程大抵都是相通的。