第六期分享:前端框架之Angular

158人浏览 / 0人评论

不瞒大家所说,我本身是一个地道的后端开发者,整日混迹于数据库、架构设计和业务处理之间,压根就没有时间也没有精力去了解除此之外的东西,甚至一度以为自己往后都是从事后端工作,事实也是一直在往这个方向努力。

但是后来由于工作原因,短暂的接手了一个APP项目,在我们设计完数据库,完成接口开发和基本后台业务后,前端需要有人去做,这时候也没有空出来的同事可以接手,我就阴差阳错的开始了前端开发之路。可以简单说下这个APP项目开发模式(不知道算不算泄露机密),就是混合开发(ionic+angular+cordova,今天暂且不讲ionic和cordova ),一种介于H5和原生之间的开发模式,结合了H5应用和原生应用各自的优点,既做到了跨平台,也可以上架各大应用市场。

初识Angular:事实上在此之前我对Angular并没有什么了解,顶多算是听过,知道它的存在,仅此而已。后来我还特意问了下度娘,去看了下AngularJS的官网:https://angular.cn/。 Angular诞生于2009年,是一款优秀的前端JS框架,已经被用于Google的多款产品当中。 AngularJS有着诸多特性,最为核心的是: MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等。说白了AngularJS就是一个庞大的js库,类似于JQ uery,大多数 Angular 代码都只能用最新的 JavaScript 编写。

简单认识了Angular这个大家伙,接下来我们看看它有什么特别之处。从最直接的,代码片段开始,如何?

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
<h2>Products</h2><div *ngFor="let news of newsList">  <h3>    <a [title]="news.title">      {{ news.content }}    </a>  </h3></div>

不知道有没有人想问一句:这个{{}}是干什么用的?又或者这个*ngFor是什么鬼?哈哈哈,我开始也是这么想的,实际上,{{}}是插值语法,插值语法会把属性的值作为文本渲染出来,[]是一种属性绑定语法, ()是事件绑定语法,*ngFor和*ngIf分别是用来遍历列表和判断一定条件的语法,这样一来的话就涉及到Angular常用模板语法的五个常用特性。

语法模板了解了,我们来看看组件又是个什么 东西。 组件包含三部分: 一个组件类,它用来处理数据和功能; 一个 HTML 模板,它决定了用户的呈现方式; 组件专属的样式定义了外观和感 觉。 Angular 应用程序由一棵组件树组成,每个 Angular 组件都有一个明确的用途和责任。我们在实际工作中,也可以根据自己的实际需求来自定义组件,以此达到设计目标,让组件更好的为我们的应用服务。

讲到这里,相信大家已经对Angular有了基础的认识,除此之外,还有一些常用的CLI命令、路由、依赖注入、NgModule、国际化等一系列花里胡哨的,有空可以去官网多了解了解,最有效的还是跟着官方走一波Demo,自己创建一个项目来学习,达到更好的学习效果。

今天就到此为止,后面有机会再做分享,还有比较重要的一点,大家有什么需要的学习资料和视频教程,可以在公号留言给我,我也会在这里集中分享一下,总之,你们需要的,只要我有,大家都会有!


 


 

全部评论