摘要：入门一前言目前来说相对于现在流行的高版本以及来说实属是老套的前端框架了，当然这都不重要，没有完美的框架，只有不断优化的代码。通过使用我们称为指令的结构，让浏览器能够识别新的语法。使用作为输入，而不是字符串，是区别于其它的框架的最大原因。
AngularJs 入门（一） 前言
AngularJs目前来说相对于现在流行的高版本ng2、ng4,以及Vue2.0、React来说实属是老套的前端框架了，当然这都不重要，没有完美的框架，只有不断优化的代码。其实只是符合公司水平要求才这么整的啊。。话不多说，开搞吧。
一、什么是AngularJs
1、AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。
通常，我们是通过以下技术来解决静态网页技术在构建动态应用上的不足：
1> 类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等。
2> 框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。
AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为指令(directives)的结构，让浏览器能够识别新的语法。例如：
使用双大括号{{}}语法进行数据绑定；
使用DOM控制结构来实现迭代或者隐藏DOM片段；
支持表单和表单的验证；
能将逻辑代码关联到相关的DOM元素上；
能将HTML分组成可重用的组件。
还有很多事情，这里大概提一下。到了模块介绍和具体项目中会详细讲解。
二、特性
1>双向的数据绑定。
它能够帮助你避免书写大量的初始代码从而节约开发时间。一个典型的web应用可能包含了80%的代码用来处理，查询和监听DOM。数据绑定是的代码更少，你可以专注于你的应用。我们想象一下Model是你的应用中的简单事实。你的Model是你用来读取或者更新的部分。数据绑定指令提供了你的Model投射到view的方法。这些投射可以无缝的，毫不影响的应用到web应用中。传统来说，当model变化了。
开发人员需要手动处理DOM元素并且将属性反映到这些变化中。这个一个双向的过程。一方面，model变化驱动了DOM中元素变化，另一方面，DOM元素的变化也会影响到Model。这个在用户互动中更加复杂，因为开发人员需要处理和解析这些互动，然后融合到一个model中，并且更新View。这是一个手动的复杂过程，当一个应用非常庞大的时候，将会是一件非常费劲的事情。这里肯定有更好的解决方案！那就是AngularJS的双向数据绑定，能够同步DOM和Model等等。
2> 一个模板就是一个HTML文件。
但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。我们要理解AuguarJS并不把模板当做String来操作。输入AngularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。最大的好处是为设计师和开发者创建了一个紧密的工作流。设计师可以像往常一样开发标签，然后开发者拿过来添加上功能，通过数据绑定将会使得这个过程非常简单。
3> 服务和依赖注入
AngularJS拥有内建的依赖注入（DI）子系统，可以帮助开发人员更容易的开发，理解和测试应用。DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。为了而得到核心的AngularJS服务，只需要添加一个简单服务作为参数，AngularJS会侦测并且提供给你。
4>指令（Directives）
指令是我个人最喜欢的特性。你是不是也希望浏览器可以做点儿有意思的事情？那么AngularJS可以做到。指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。然后，你可以使用这个自定义的directive来使用：使用一系列的组件来创建你自己的应用将会让你更方便的添加，删除和更新功能。
5>模块化设计
模块是提供一些特殊服务的功能块，比如本地化模块负责文字本地化，验证模块负责数据验证。一般来说，服务在模块内部，当我们需要某个服务的时候，是先把模块实例化，然后再调用模块的方法。但Angular模块和我们通常理解的模块不一样，Angular模块只保留服务的声明，服务的实例化是由服务注入器完成的，实例化之后服务就留在了服务注入器中，和模块没有关系了，这就是为什么我们使用的服务全部来自注入器的原因。每调用一次angular.boostrap()方法会创建一个新的Angular应用和一个新的服务注入器，因此，每个应用都对应一个服务注入器，彼此互不冲突。
在angular中，模块可以是对象、方法（如果是数组，数组的最后一个元素必须是方法，前面的元素都是方法按顺序排列的参数名称）。后面讲的模块属性和方法，都属于通过angular.module()定义的模块对象。如果模块是方法，是不需要经过angular.module()定义的，只需写入依赖数组（就是说依赖数组的元素可以是方法），模块在加载依赖关系的时候直接执行了。
注意：通过angular.module()方法定义的模块是唯一的，如果重复定义就会覆盖前面的定义。
高内聚低耦合法则
1)官方提供的模块：ng、ngRoute、ngAnimate、ngTouch
2)用户自定义的模块：angular.module("模块名",[ ])
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92506.html
摘要：在跟着中文社区的入门教程一开始学习就发现了纰漏。。。启动服务，运行命令，过程需要等待几分钟。中文社区此处使用命令，会报错，错误提示翻看路径确实没有文件。所以改用命令即可解决错误成功启动服务。 前言 众所周知，AngularJS已成为前端的一大热框架，AngularJS已然成为Web应用开发世界里最受欢迎的开源JavaScript框架。但虽然AngularJS 2也发布了蛮久的但相关的学...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
摘要：下面围绕的这样的目的，即左右知乎网页上屏幕截图功能的实现前端掘金背景最近注意到知乎的屏幕截图反馈功能，感觉非常不错。正如你期望的，文中的闯关记之垃圾回收和内存管理前端掘金题图来源，授权基于协议。 微信小程序实战学习 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序？大场景? 微信小程序本质上来说就是一个 HTML 5（移动网页） 应用，用view、scoll-view代替了div标...
阅读 902·2021-11-15 18:11
阅读 2940·2021-09-22 15:33
阅读 3314·2021-09-01 11:42
阅读 2519·2021-08-24 10:03
阅读 3498·2021-07-29 13:50
阅读 2834·2019-08-30 14:08
阅读 1119·2019-08-28 17:56
阅读 2119·2019-08-26 13:57
