Angular5.x UI框架Element Ui -饿了么的Element UI支持Angualr5了

在前面我们给大家介绍过一款来自于阿里的UI框架,ant design 
“首先说说Angular5大家应该很熟悉,是谷歌公司的一款优秀的前端框架,ant design呢是我们小马(蚂蚁金服Ant Design团队)家的一款优秀的前端框UI库架支持React和Angular5。”


今天给大家带来的是一款来自饿了么公司的前端UI框架element-angular。它最早只支持Vue,现在在我们Angular5上面也可以使用了。




很多同学在想,一个稿外卖的不好好搞外卖,搞什么UI框架?


答案:得屌丝着得天下,非喜勿喷哦。


ElementUi是面向企业级的后台应用,能够帮助你快速地搭建网站,Angular5.x UI框架Element Ui 极大地减少研发的人力与时间成本。


1、ElementUi与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;



2、ElementUi简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
可控 Controllability


3、ElementUi根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。


下面我们看看angular Element Ui框架的使用。


使用Element-angular前你需要有一个angular项目。


如果你还没有一个 Angular 项目,可以考虑使用 cli 快速安装。

# install cli
npm install -g @angular/cli

# init project
ng new YOUR-PROJECT-NAME --style=scss
cd YOUR-PROJECT-NAME

# install element-angular
npm i --save element-angular

# run
ng server

根模块引入


将 element-angular 引入根模块后,可以在任意组件中使用。





import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { RouterModule } from '@angular/router'
import { AppComponent } from './app.component'

import { ElModule } from 'element-angular'

@NgModule({
  declarations: [
    ExAppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ElModule.forRoot(),
  ],
  providers: [],
  bootstrap: [ExAppComponent],
})
export class AppModule {
}

// 不同组件与指令使用请参考具体章节


在src下面的styles.css引入css



@import "~element-angular/theme/index.css";



官方文档:https://element-angular.faas.ele.me/guide/install 


如果小伙伴们还需要Angualr 移动端的UI框架请访问:


https://www.itying.com/goods-460.html