angularjs框架_5个AngularJS框架可快速启动和运行应用

既然您已经掌握了基础知识，那么该开始使用AngularJS构建自己的Web应用程序了 。 AngularJS使用所谓的指令使构建基于Javascript的应用程序更加直观，该指令与HTML标记紧密配合。

如果您从头开始构建Web应用程序似乎不知所措，请不必担心。 一些非常慷慨的开发人员改编了一些前端框架来支持AngularJS 。 像典型的框架一样，它们带有预构建的Web组件。 这些使该框架成为需要启动Web应用程序并快速运行的任何人的理想工具。

您可以使用以下5个框架使用AngularJS启动基于Web的应用程序。

1. AngularUI引导程序

顾名思义， AngularUI Bootstrap建立在最流行的前端框架之一Bootstrap之上。 该框架包含一组Bootstrap组件，例如Carousel，Alert和Collapse，以及一些附加功能，例如Rating和TimePicker。

所有这些组件都已移植为使用AngularJS指令（ ng-repeat和ng-controller ）和自定义HTML元素 。 例如，您可以使用更“有意义的”自定义元素<carousel>和<slide>而不是使用<div>包裹<carousel> ：

<carousel interval="slideInterval">
  <slide ng-repeat="slide in slides" active="slide.active">
    <img ng-src="{{slide.image}}">
  </slide>
</carousel>

如果您是Bootstrap的忠实拥护者，同时又享受AngularJS提供的功能和性能，那么这可能是框架的理想选择。

2.角基

Foundation也已移植为使用AngularJS的另一个流行框架是Foundation，它简称为“ Angular Foundation”。

同样，此框架修改了Foundation组件以采用AngularJS的指令和自定义HTML元素，因此您现在可以使用语义上更命名HTML元素（如<top-bar> ， <accordion>和<pagination> ）来构建Web应用程序，而不是模棱两可的<div> 。 这是一个如何使用<alert>元素添加Alert组件的示例：

<div ng-controller="alertArea">
  <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>

如果您更喜欢Foundation而不是Bootstrap，则可以使用该框架。 在此页面上下载Angular Foundation，或者通过Github repo保持最新的项目开发。

3.离子框架

Ionic带有一些坚固的构建基块，使开发移动应用程序变得轻松快捷。 Ionic框架中的每个组件都针对移动体验进行了优化，而移动体验基本上取决于触摸和手势。 这些UI组件也由自定义HTML元素组成。 例如，在部署选项卡式导航时，您将使用<ion-tabs> ：

<ion-tabs class="tabs-default tabs-icon-only">
  <ion-tab title="Home" icon-on="ion-ios-home" icon-off="ion-ios-home-outline">
  </ion-tab>
  <!-- The rest of the tabs go here -->
</ion-tabs>

为了使构建应用程序变得更加轻松快捷，您可以使用Ionic Creator ，该Ionic Creator允许您通过拖放操作构建应用程序。 因此，如果性能和速度对您很重要，那么Ionic是最好的框架。

4.移动角度UI

移动Angular UI是一个移动UI框架，它是Bootstrap框架的扩展，旨在构建移动应用程序。 它使用了大多数Bootstrap 3语法，并添加了一些特定的移动组件，例如开关，覆盖，侧边栏和可滚动区域。 它仅依赖于AngularJS，您可以通过添加提供CSS轻松地将当前的Web应用程序引入移动版本，以使您的内容响应并启用触摸。

5. UI网格

UI网格是使用Angular处理网格或表的最佳方法。 它具有丰富的功能，可以在网格上显示简单的，复杂的大型数据集。 UI Grid设计为仅在需要时才执行复杂的功能，从而使核心保持较小。 使用UI Grid，您可以将单元格绑定到复杂的属性/功能，运行列排序和过滤，就地编辑数据等等。 要更改数据网格显示的样式，请使用Customizer 。

翻译自: https://www.hongkiat.com/blog/angularjs-frameworks/