您的位置：首页 > Web前端 > AngularJS

Angular 从0到1 （一）初识AngularJS

2016-01-07 11:00 507 查看

2015悄然飞逝，2016悄悄来临。

从事软件开发4年多，一直都偏于后台开发，对于前台开发接触较少。2016希望自己有所改变，有个新的气象，增添新的知识。看了些资料，分析选择AngularJS前台框架来学习。原因主要考虑是该框架具有java架构的思维，同时结合ionic能够比较好的应用与开发移动端，这也是我所需求的。

下面是学习过程中，通过查询资料总结出来的学习笔记，通过博客的方式保留备忘，同时希望能够在这相互交流学习：

    ① AngularJS相关介绍

什么是AngularJS？
Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。

AngularJS来历？
AngularJS在2009 年起先由Miško Hevery 和AdamAbron 开发，作为在线JSON 存储服务的软件，是以兆字节来计价，从而便于成为企业的应用。这个风投是以网络域名”GetAngular.com”注册的, 有些注册用户，在两人决定放弃这个商业想法之前，它作为一个开源库Angular许可发行。Abrons离开了这个计划，但在Google工作的Hevery和一些谷歌员工IgorMinár和Vojta
Jína等继续开发和维护这个库。

AngularJS的设计理念？
AngularJS是建立在这样的信念上的：即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。框架采用并扩展了传统 HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步。因此，AngularJS 使得对DOM 的操作不再重要并提升了可测试性。

AngularJS的设计目标？
将应用逻辑与对DOM的操作解耦，这会提高代码的可测试性。
将应用程序的测试看的跟应用程序的编写一样重要，代码的构成方式对测试的难度有巨大的影响。
将应用程序的客户端与服务器端解耦，允许客户端和服务器端的开发可以齐头并进，并且让双方的复用成为可能。
指导开发者完成构建应用程序的整个历程: 从用户界面的设计，到编写业务逻辑，再到测试。
Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合。通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。

    ②Angularjs 使用优点和缺点

优点

模板功能强大丰富，并且是声明式的，自带了丰富的 Angular 指令。
是一个比较完善的前端MV*框架，包含模板，数据双向绑定，路由，模块化，服务，依赖注入等所有功能。
自定义 Directive，比 jQuery 插件还灵活，但是需要深入了解 Directive 的一些特性，简单的封装容易，复杂一点官方没有提供详细的介绍文档，我们可以通过阅读源代码来找到某些我们需要的东西，如：在 directive 使用 $parse
ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助，我们的项目从上线到目前，UI变化很大，在摸索中迭代产品，但是js的代码基本上很少改动
Angular支持单元测试和e2e-testing

缺点
验证功能错误信息显示比较薄弱，需要写很多模板标签，没有JQuery Validate方便。 ngView只能有一个，不能嵌套多个视图，虽然有 angular-ui/ui-router · GitHub 解决，但是貌似ui-router 对于URL的控制不是很灵活，必须是嵌套式的。
对于特别复杂的应用场景，容易内存泄漏问题。
这次从1.0.X升级到1.2.X，貌似有比较大的调整，没有完美兼容低版本，升级之后可能会导致一个兼容性的BUG，具体详细信息参考官方文档 AngularJS ，对应的中文版本：Angular 1.0到1.2 迁移指南
ng提倡在控制器里面不要有操作DOM的代码，对于一些JQuery 插件的使用，如果想不破坏代码的整洁性，需要写一些directive去封装一下JQ插件，但是现在有很多插件的版本已经支持Angular了，如：jQuery File Upload Demo
Angular 太笨重了，没有让用户选择一个轻量级的版本，当然1.2.X后，Angular也在做一些更改，比如把route，animate等模块独立出去，让用户自己去选择

   ③AngularJS 示例

<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angualr Study</title>
<script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body>
<p>Name: <input ng-model="name" type="text" placeholder="Your Name"></p>
<h1>Hello, {{name}}</h1>
</body>
</html>

效果：

④AngularJS小结

功能性：作为构建应用的基础，框架必须具备一些重要的功能。比如，视图绑定、双向绑定、筛选、可计算属性（computed property）、脏属性（dirty attribute）、表单验证，等等。还能罗列出一大堆来。下面比较了一些我认为MVC框架中比较重要的功能：
可观察对象：可以被监听是否发生变化的对象。
路由：把变化通过浏览器URL的参数反映出来，并监听这些变化以便执行相应的操作。
视图绑定：在视图中使用可观察对象，让视图随着可观察对象的变化而自动刷新。
双向绑定：让视图也能把变化（如表单输入）自动推送到可观察对象。
部分视图：包含其他视图的视图。
筛选列表视图：用于显示根据某些条件筛选出来的对象的视图。

灵活性：Angular还算灵活，对件的支持较好。
上手难度：Angular一开始会让人大呼过瘾，因为可以利用它干好多意想不到的事，比如双向绑定，而且学习难度不高。乍一看让人觉得很简单。可是，进了门之后，你会发现后面的路还很长。应该说这个框架比较复杂，而且有不少标新立异之处。想看着它的文档上手并不现实，因为Angular制造的概念很多，而文档中的例子又很少。
开发效率：熟悉Angular之后，你的效率会非常高。
社区支持 : AngularJS是谷歌开发的开源框架，背靠这样的公司，可想思考。。。
生态系统：Angular的生态圈加上Angular UI还是很令人瞩目的。
成熟度：Angular稳定性较好，验证的示例也更多。
内存泄漏隐患：只要你守规矩，Angular能把这个问题帮你解决好。

学习的过程会持续，等待继续进步。。。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angular java 框架 js

相关文章推荐

新的分享

章节导航

Angular 从0到1 （一） 初识AngularJS

Angular 从0到1 （一）初识AngularJS