铳梦 發表於 2022-3-19 11:01:00

Angular介绍

<h2 class="md-focus"><span class="md-expand">Angular 是什么？</span></h2>
<p><span class="md-expand"><img src="https://img2022.cnblogs.com/blog/1731789/202203/1731789-20220319105308357-1212958304.png" alt="" loading="lazy" style="display: block; margin-left: auto; margin-right: auto"></span></p>
<p><span class="md-expand">Angular（读音['æŋgjʊlə]）是一套用于构建用户界面的 JavaScript 框架。由 Google 开发和维护，主要被用来开发单页面应用程序。</span></p>
<ul>
<li>
<p><span class="md-line"><span>类似于 <span>Vue.js</span></span></span></p>
<ul>
<li>
<p><span class="md-line"><span>MVVM（数据驱动视图思想）</span></span></p>
</li>
<li>
<p><span class="md-line"><span>组件化</span></span></p>
</li>
<li>
<p><span class="md-line"><span>模块化</span></span></p>
</li>
<li>
<p><span class="md-line"><span>指令</span></span></p>
</li>
<li>
<p><span class="md-line"><span>......</span></span></p>
</li>
</ul>
</li>
<li>
<p><span class="md-line"><span>由 Google 开发和维护</span></span></p>
</li>
<li>
<p><span class="md-line md-focus"><span class="md-expand">开发单页面应用程序（SPA） </span></span></p>
</li>
</ul>
<h2 class="md-focus"><span>特性</span></h2>
<ul>
<li>
<p><span class="md-line"><span>MVVM</span></span></p>
</li>
<li>
<p><span class="md-line"><span>组件化</span></span></p>
</li>
<li>
<p><span class="md-line"><span>模块化</span></span></p>
</li>
<li>
<p><span class="md-line"><span>指令</span></span></p>
</li>
<li>
<p><span class="md-line"><span>服务</span></span></p>
</li>
<li>
<p><span class="md-line"><span>依赖注入</span></span></p>
</li>
<li>
<p><span class="md-line"><span>TypeScript</span></span></p>
</li>
</ul>
<h2 class="md-focus"><span>发展历史</span></h2>
<h3><span>起源</span></h3>
<p><span class="md-line"><span>2009年，Misko hevery 和 Adam abrons 在业余时间打造了 <span><code>GetAngular</code></span></span></span></p>
<p><span class="md-line"><img src="https://img2022.cnblogs.com/blog/1731789/202203/1731789-20220319105513689-1727974020.png" alt="" loading="lazy" style="display: block; margin-left: auto; margin-right: auto"></span></p>
<p><span class="md-line md-focus"><span>Misko Hevery 接手了 Google 内部的一个项目 <span><code>Feedback</code><span> ，该项目经过6个月的迭代代码量已经达到了17000行。项目的开发和维护已经变得非常的困难。所有 Misko 就决定用 <span><code>GetAngular</code><span> 重写这个项目。</span></span></span></span></span></span></p>
<p><span class="md-line"><span>结果就是小伙子成功了，使用 <span><code>`GetAngular</code><span> 之后该项目从17000行缩减到了1500行，前后仅仅使用了三周时间。</span></span></span></span></p>
<p><span class="md-line md-focus"><span>Misko 领导一看，小伙子厉害啊，同时也看到了 <span><code>GetAngular</code><span> 所带来的商业价值，所以决定把 <span><code>GetAngular</code><span> 正式立项，组织专职团队开发和维护。</span></span></span></span></span></span></p>
<p><span class="md-line"><span>Abrons 后来离开了这个计划，但在 Google 工作的 Hevery 和一些谷歌员工如 Igor Minár 和 Vojta Jína 等则继续开发维护此库。</span></span></p>
<p><span class="md-line"><span>由于已不再是个人项目，所以开发团队将 <span><code>GetAngular</code><span> 重新命名为了 <span><code>AngularJS</code><span> 。</span></span></span></span></span></span></p>
<p><span class="md-line"><img src="https://img2022.cnblogs.com/blog/1731789/202203/1731789-20220319105625232-1199582578.png" alt="" loading="lazy" style="display: block; margin-left: auto; margin-right: auto"></span></p>
<p><span class="md-line md-focus"><span>至此，AngularJS 就进入了漫长的发展迭代阶段。</span></span></p>
<ul>
<li>
<p><span class="md-line"><span>经过了3年的发展，AngularJS 在2012年6月份，<span><code>1.0.0</code><span> 版本正式推出。</span></span></span></span></p>
</li>
<li>
<p><span class="md-line"><span>AngularJS 在1.2之后的版本不再支持 IE 6和7</span></span></p>
</li>
<li>
<p><span class="md-line"><span>AngularJS 在 1.3 之后不再支持 IE8</span></span></p>
</li>
<li>
<p><span class="md-line"><span class="md-expand">AngularJS 在 1.5 增加了类似组件化的开发方式</span></span></p>
<ul>
<li>
<p><span class="md-line"><span>为过渡到 Angular2 做铺垫</span></span></p>
</li>
</ul>
</li>
<li>
<p><span class="md-line"><span>AngularJS <span><code>1.x.x</code><span> 当前已发布到了 <span><code>1.6.x</code></span></span></span></span></span></p>
</li>
</ul>
<h3 class="md-focus"><span>困境</span></h3>
<ul>
<li>
<p><span class="md-line"><span>饱受诟病的性能问题</span></span></p>
<ul>
<li>
<p><span class="md-line"><span>脏检查</span></span></p>
</li>
</ul>
</li>
<li>
<p><span class="md-line"><span>落后于当前 Web 发展理念</span></span></p>
<ul>
<li>
<p><span class="md-line"><span>例如组件化</span></span></p>
</li>
<li>
<p><span class="md-line"><span>模块化支持不好</span></span></p>
</li>
</ul>
</li>
<li>
<p><span class="md-line"><span class="md-expand">对移动端支持不够友好</span></span></p>
</li>
</ul>
<h3><span>Angular 2 横空出世</span></h3>
<p><span class="md-line"><span>Angular 1.x 由于问题太多，历史包袱太重，重构几乎不可能。</span></span></p>
<p><span class="md-line"><span>不过早在2014年3月，官方博客就有提及开发新版本 Angular 的计划。</span></span></p>
<p><span class="md-line"><span>2014年9月下旬一个大会上，<span><code>Angular2</code><span> 正式亮相。</span></span></span></span></p>
<p><span class="md-line"><span>2016年9月15号，<span><code>Angular2</code><span> 正式发布。</span></span></span></span></p>
<p><span class="md-line"><span>由于 ng2 几乎完全重写了 ng1 ，所以官方把2之后的版本都称之为 Angular。</span></span></p>
<p><span class="md-line"><img src="https://img2022.cnblogs.com/blog/1731789/202203/1731789-20220319105719455-2051112658.png" alt="" loading="lazy" style="display: block; margin-left: auto; margin-right: auto"></span></p>
<p><span class="md-line">Angular 2 之后的正式 Logo：</span></p>
<p><span class="md-line"><span class="md-line"><img src="https://img2022.cnblogs.com/blog/1731789/202203/1731789-20220319105750967-1448250118.png" alt="" loading="lazy" style="display: block; margin-left: auto; margin-right: auto"></span></span></p>
<p><span class="md-line"><span class="md-line">新版本发布了，那用户如何从 1 升级到 2 呢？</span></span></p>
<p><span class="md-line"><span class="md-line"><span class="md-line"><span class="md-line"><img src="https://img2022.cnblogs.com/blog/1731789/202203/1731789-20220319105818338-1792498919.png" alt="" loading="lazy" style="display: block; margin-left: auto; margin-right: auto"></span></span></span></span></p>
<p><span class="md-line"><span class="md-line"><span class="md-line"><span class="md-line">那到底要不要更新呢？</span></span></span></span></p>
<h3 class="md-focus"><span>ng2 相比 ng1</span></h3>
<ul>
<li>
<p><span class="md-line"><span>移除了 controller+$scope 的设计方式，改用了当前主流的组件化构建</span></span></p>
</li>
<li>
<p><span class="md-line"><span>相比 ng1 性能更好</span></span></p>
</li>
<li>
<p><span class="md-line"><span>优先为移动端设计</span></span></p>
</li>
<li>
<p><span class="md-line"><span>更贴合未来标准</span></span></p>
<ul>
<li>
<p><span class="md-line"><span>EcmaScript 6</span></span></p>
</li>
<li>
<p><span class="md-line"><span>Web Component</span></span></p>
</li>
</ul>
</li>
<li>
<p><span class="md-line"><span>TypeScript</span></span></p>
</li>
<li>
<p><span class="md-line"><span>反正就是更现代化，更好了......</span></span></p>
</li>
</ul>
<h3><span>现状</span></h3>
<ul>
<li>
<p><span class="md-line"><span>自 Angular 2 之后，官方承诺之后的版本都会兼容到 Angular 2</span></span></p>
</li>
<li>
<p><span class="md-line"><span>当前 Angular 最新发布版为 <span><code>5.x.x</code></span></span></span></p>
</li>
<li>
<p><span class="md-line"><span>新版的 Angular 在 Github 上也已收获了 3万+ ☆</span></span></p>
</li>
<li>
<p><span class="md-line"><span>使用量低于 React 和 Vue</span></span></p>
</li>
</ul>
<h2 class="md-focus"><span>那我为什么要学习使用 Angular ？</span></h2>
<p><span class="md-line"><span class="md-expand">任何一种技术或者框架，一定要有自己的特色，如果跟别人的完全一样，解决的问题也和别人一样，那存在的意义和价值就会遭到质疑。</span></span></p>
<ul>
<li>
<p><span class="md-line"><span>企业需求</span></span></p>
</li>
<li>
<p><span class="md-line"><span>增加职业竞争力</span></span></p>
</li>
<li>
<p><span class="md-line"><span>技术的本质思想都是一样的，也许你在其它技术中无法理解的事物，在这门课程中你能找到答案。</span></span></p>
</li>
</ul>
<p><span class="md-line"><span>这里我们要明白技术只是工具，主要目的还是用来帮助我们解决业务问题。<span class="md-line"><span>作为开发人员，我们对待技术的态度应该博学开放，多学习和了解不同技术。<span class="md-line"><span>只有当你见得东西多了才能有自己的想法，才不会人云亦云，不至于迷失在技术更新迭代的浪潮之中！</span></span></span></span></span></span></p>
<h2 class="md-focus"><span class="md-expand">学习 Angular 的一些建议</span></h2>
<ul>
<li>
<p><span class="md-line md-focus"><span>读官方文档</span></span></p>
</li>
<li>
<p><span class="md-line"><span>写 demo 测试</span></span></p>
</li>
<li>
<p><span class="md-line"><span>写小项目练手</span></span></p>
</li>
<li>
<p><span class="md-line"><span>参与实际项目开发经验</span></span></p>
</li>
<li>
<p><span class="md-line"><span class="md-expand">日积月累......</span></span></p>
</li>
</ul>
<p><span class="md-line"><span>这是一个知识开放的时代，我们每个人都拥有一本《九阴真经》，至于你如何利用它产生价值则需要一些方式。我们学习技术就像武侠练功一样，希望大家像郭靖一样拥有坚韧不拔的精神，锲而不舍的探索下去，终成一代大侠。</span></span></p>
<h2 class="md-focus"><span class="md-expand">相关链接</span></h2>
<ul>
<li>
<p><span class="md-line"><span><span>维基百科 - Angular</span></span></span></p>
</li>
<li>
<p><span class="md-line"><span>AngularJS 1.x.x 官网</span></span></p>
</li>
<li>
<p><span class="md-line"><span>Angular 官网</span></span></p>
</li>
<li>
<p><span class="md-line"><span>Angular Github</span></span></p>
</li>
<li>
<p><span class="md-line"><span>Angular 官方文档</span></span></p>
</li>
<li>
<p><span class="md-line"><span>Angular 官方教程</span></span></p>
</li>
<li>
<p><span class="md-line md-focus"><span>Angular APi文档</span></span></p>
</li>
</ul>
<p><span class="md-line md-focus"><span>&nbsp;</span></span></p><br><br>
来源：https://www.cnblogs.com/yangjiaoshou/p/16025722.html
頁: [1]
查看完整版本: Angular介绍