Brian F爱
从专注于角图,Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
Ad ·ultimatecourses.com.
用终极课程学习角度正确的方式

均值应用:角度+材料

Part 2: Let's build an Angular app using Material.

系列

This post is part of a series onbuilding a MEAN app using TypeScript with Angular Material and Reactive programming

源代码

您可以在Github上沿源代码下载并遵循或叉叉以下内容:

首先,运行GULP任务,然后启动Node.js Express Server。

$ Gulp $chmod.+ x ./dist/bin/www $ ./dist/bin/www

然后,使用CLI服务Angular客户端:

$ ng serve

目标

我们的goals for this series are:

  1. 创建一个类似于Angular的英雄教程应用程序的简单CRUD应用程序。
  2. 使用用猫源编写的Express创建REST API,以便持续到MongoDB。
  3. Use Angular Material and Angular Flex Layout for the UI.
  4. Use Reactive Extensions for JavaScript, specifically, RxJS and ngrx.

Project Structure

In the first part of this series we built our server in the rootserverdirectory using TypeScript and Express. Our server builds using Gulp into thedist目录。

现在,让我们专注于我们的前端。我们所有的前端代码都将居住在root中client目录:

├──客户│├──(App-Routing.module.ts)│││───││├──app.component.htms├├───app.component.scsss│││───App.Component.ts│││├──App.module.ts│││├───核心│││└──服务││││├──赫索斯.Service.spec.ts││││└──赫索斯·塞尔默德││││├──英雄││││──赫索斯 - 路由..ts││││──英雄│││──赫索斯.Edfects.ts││││├──英雄.Module.ts││││──赫索斯.Reducers.ts│││││└───────索引│││├──索引。index.component.html││││TS│││──型号││││└──共享│││└──英雄创建对话框│││├──英雄创建对话框..。HTML.│ │ │ │ ├── hero-create-dialog.component.scss │ │ │ │ ├── hero-create-dialog.component.spec.ts │ │ │ │ └── hero-create-dialog.component.ts │ │ │ ├── heros-list │ │ │ │ ├── heros-list.component.html │ │ │ │ ├── heros-list.component.scss │ │ │ │ ├── heros-list.component.spec.ts │ │ │ │ └── heros-list.component.ts │ │ │ ├── layout │ │ │ │ ├── layout.component.html │ │ │ │ ├── layout.component.scss │ │ │ │ ├── layout.component.spec.ts │ │ │ │ └── layout.component.ts │ │ │ ├── shared.actions.ts │ │ │ ├── shared.module.ts │ │ │ ├── shared.reducers.ts │ │ │ └── toolbar │ │ │ ├── toolbar.component.html │ │ │ ├── toolbar.component.scss │ │ │ ├── toolbar.component.spec.ts │ │ │ └── toolbar.component.ts │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.scss │ │ └── tsconfig.app.json │ ├── tsconfig.json │ └── tslint.json ├── dist ├── gulpfile.js ├── gulpfile.ts ├── package.json └── server

评论

在系列的第一部分,我们:

  1. 使用Homebrew安装Node.js和NPM。
  2. Installed Gulp along with several plugins to automate our workflow.
  3. 已安装Express和我们应用程序的必要中间件。
  4. Created the万维网二进制以在Node.js上执行Express.
  5. Created theServerClass将创建我们的快速应用程序并加入中间件。
  6. Installed MongoDb using Homebrew.
  7. 安装了猫鼬并定义了我们的最初Herointerface, schema and model.
  8. Tested our REST API using mocha, chai, chai-http and mocha-typescript.

在本系列的第二部分,我们将:

  1. Create a new Angular application.
  2. 安装和配置角度材料。
  3. 使用SASS而不是CSS。

Install Angular

With our server setup completed, our REST API created and our tests passing, we are now ready to get into the client side of our application.

First, we need to install all of the Angular production dependencies:

$NPM.install@ Angular / Animations @最新@ Angular / Common @最新@ Angular / Compiler @最新@ Angular / Core @最新@ Angular / Forms @最新@ Angular / HTTP @最新@ Angular / platform-Browser @最新@ Angular / Platform-Browser-  innamic @最新@ Angular / Router @最新核心-JS @最新rxjs @最新zone.js@latest --save

接下来,安装角度开发依赖项:

$NPM.install@angular/cli@latest @angular/compiler-cli@latest @angular/language-service@latest @types/jasmine@latest @types/node@latest codelyzer@latest jasmine-core@latest jasmine-spec-reporter@latest karma@latest karma-chrome-launcher@latest karma-cli@latest karma-coverage-istanbul-reporter@latest karma-jasmine@latest karma-jasmine-html-reporter@latest protractor@latest ts-node@latest tslint@latest --save-dev

.angular-cli.json.

不幸的是,我们不能使用Angular CLI创建一个新项目,因为我们已经拥有此时创建的项目。因此,我们将为Angular应用程序创建所需的文件。首先,创造.angular-cli.json.文件在项目根目录中:

{“$架构”:“./node_modules/@angular/cli/lib/config/schema.json”,“项目”:{"name":"mean-material-reactive"},“应用”:[{"root":“./client/src”,“outdir”:"./dist/client",“资产”:[“资产”,“favicon.ico”],“指数”:“index.html”,“主要”:“main.ts”,“聚烯烃”:“polyfills.ts”,“测试”:"test.ts","tsconfig":“tsconfig.app.json”,"testTsconfig":"tsconfig.spec.json",“字首”:“app”,"styles":[“styles.scss”],“脚本”:[],"environmentSource":“环境/环境”,"environments":{“开发”:“环境/环境”,"prod":“环境/环境.PROD.TS”}}],“e2e”:{“Promractor”:{“配置”:"./protractor.conf.js"}},“皮棉”:[{“项目”:"src/tsconfig.app.json"},{“项目”:“src / tsconfig.spec.json”},{“项目”:“e2e / tsconfig.e2e.json”}],“测试”:{“业力”:{“配置”:“./karma.conf.js”}},“默认值”:{"styleExt":“scss”,“零件”:{}}}

几件事要注意:

  • 我更新了root值点指出./client/src.夹。
  • 其次,我更新了风格属性要使用SASS,因此文件扩展名为.scs。
  • 我也更新了样式property value to use thescss文件扩展名。

接下来,创建client/tsconfig.json文件如下:

{"compileOnSave":false,"compilerOptions":{“outdir”:"./dist/out-tsc",“baseurl”:“src”,“sourcemap”:真正,“宣言”:false,“调节化学”:“节点”,“emitdecoratormetadata”:真正,"experimentalDecorators":真正,“目标”:"es5","typeRoots":[“../node_modules/@types”],“lib”:["es2016","dom"]}}

/客户

角度应用程序将驻留在我们服务器的单独目录中。如果您与本系列一起进行关注,那么您就知道我们的项目有一个根服务器/目录。现在,让我们创建一个根client我们角度应用程序的目录:

$mkdir客户$cdclient

接下来,创建客户/ tslint.json.文件。This is just copied from the generated file when you use Angular CLI to create a new project:

{“规则指向”:[“node_modules / codelyzer”],“规则”:{“箭头返回速记”:真正,"callable-types":真正,“班级名称”:真正,“评论格式”:[真正,"check-space"],“卷曲”:真正,“eofline”:真正,“福林”:真正,"import-blacklist":[真正,“rxjs”],"import-spacing":真正,"indent":[真正,"spaces"],"interface-over-type-literal":真正,"label-position":真正,“max-line-length”:[真正,140.],“会员访问”:false,“会员订购”:[真正,“静态 - 实例”,“函数前一函数”],"no-arg":真正,“不按”:真正,“无控制台”:[真正,"debug",“信息”,"time","timeEnd","trace"],“无构造”:真正,"no-debugger":真正,“无重复 - 超级”:真正,"no-empty":false,"no-empty-interface":真正,"no-eval":真正,“禁止型型”:[真正,"ignore-params"],“无误用”:真正,“no-non-null-aspertion”:真正,“无阴影变量”:真正,“没有字符串文字”:false,"no-string-throw":真正,“没有切换案例 - 落下”:真正,“没有尾随空白”:真正,"no-unnecessary-initializer":真正,"no-unused-expression":真正,“禁止使用前申报”:真正,“no-var-kextory”:真正,"object-literal-sort-keys":false,"one-line":[真正,“检查 - 开放式”,“检查抓住”,“检查 - 别的”,“检查 - 空白”],"prefer-const":真正,"quotemark":[真正,“单”],“radix”:真正,“分号”:[“总是”],“三等于”:[真正,“允许 - 禁止检查”],“typedef-whitespace”:[真正,{"call-signature":"nospace","index-signature":"nospace",“参数”:"nospace","property-declaration":"nospace","variable-declaration":"nospace"}],“typeof-compare”:真正,“统一签名”:真正,“变量名称”:false,“空白”:[真正,"check-branch",“支票下降”,“检查运营商”,“检查分隔符”,“检查型”],"directive-selector":[真正,"attribute",“app”,“骆驼香烟盒”],“组件选择器”:[真正,“元件”,“app”,"kebab-case"],“使用-input-property-decorator”:真正,“使用-putput-property-decorator”:真正,"use-host-property-decorator":真正,“no-input-fename”:真正,“no-output-fename”:真正,"use-life-cycle-interface":真正,“使用 - 管道变换接口”:真正,"component-class-suffix":真正,“指令类 - 后缀”:真正,“无访问缺失 - 会员”:真正,“模板 - 使用-public”:真正,“调用注射”:真正}}

You can customize these linting rules for your project. As I indicated previously, these are the standard linting rules for a new Angular CLI project.

/客户/src

现在,创造client/src目录:

$mkdirSRC $cdSRC $触摸Main.ts.

该n, create our Application's客户/ src / main.ts文件:

进口{enableProdMode}'@angular/core';进口{platformBrowserDynamic}'@angular/platform-browser-dynamic';进口{appmodule.}'./app/app.module';进口{environment}'./environments/environment';if(environmentproduction){enableProdMode();}platformBrowserDynamic()bootstrapmodule.(appmodule.);

接下来,创建客户端/ src / index.html文件:

<HTML.="en"><><荟萃charset="UTF-8."/><title>平均材料反应应用title><基础HREF.="/"/><荟萃名称="视口"content="宽度=设备宽度,原价-scale=1"/><链接rel="icon"类型="图像/ X-icon"HREF.="Favicon.ico."/>><身体><App-Root.>App-Root.>身体>HTML.>

接下来,创建客户/ src / polyfills.ts文件:

/ ** *此文件包括Angular所需的PolyFill,并在应用程序之前加载。*您可以向此文件添加自己的额外聚填充物。* *此文件分为2个部分:* 1.浏览器聚填充物。这些都在加载ZONEJS之前应用,并按浏览器排序。* 2.应用程序进口。在主*文件之前应加载的zonejs导入的文件。* *当前设置适用于所谓的“常青”浏览器;* * *自动更新自己的浏览器的最后一个版本。这包括Safari> = 10,Chrome> = 55(包括Opera),* Edge> = 13在移动设备上,iOS 10和Chrome。* *在https://angular.io/docs/ts/latest/guide/browser-support.html * /中了解更多信息/ ****************************************************************************************************浏览器聚填充* // ** IE9,IE10和IE11要求所有以下聚填充物。** ///导入'core-js / es6 / symbol';//导入'core-js / es6 /对象';//导入'core-js / es6 / function';//导入'core-js / es6 / parse-int';//导入'core-js / es6 / parse-float';//导入'core-js / es6 / number';//导入'core-js / es6 / math';// import 'core-js/es6/string';// import 'core-js/es6/date';//导入'core-js / es6 / array';// import 'core-js/es6/regexp';// import 'core-js/es6/map';//导入'core-js / es6 /弱点映射';//导入'core-js / es6 / set';/ ** IE10和IE11需要以下对SVG元素的NGCLASS支持* ///导入'classlist.js';//运行`npm install --save classlist.js`。/ ** IE10和IE11需要以下内容来支持“@ Agenular / Animation”。* /// import 'web-animations-js'; // Run `npm install --save web-animations-js`./ **常绿浏览器需要这些。** /进口'core-js/es6/reflect';进口'Core-JS / ES7 /反映';/ **所有Firefox浏览器都需要以下内容来支持`@ Aggular / Animation`。** /// import 'web-animations-js'; // Run `npm install --save web-animations-js`./ ****************************************************************************************************角度本身需要区域JS。* /进口'zone.js / dist / zone';//包含角度cli。/ ****************************************************************************************************应用程序进口* // ** *日期,货币,十进制和百分比管道。*需要:除了Chrome,Firefox,Edge,IE11和Safari 10 * /// import 'intl'; // Run `npm install --save intl`./ ** *需要使用INTL导入至少一个区域设置数据。* ///导入'Intl / locale-data / jsonp / en';

该n, create the客户/ src / tsconfig.app.json文件:

{"extends":"../tsconfig.json","compilerOptions":{“outdir”:"../out-tsc/app",“模块”:"es2015",“baseurl”:"",“类型”:[]},"exclude":["test.ts",“** / *。spec.ts”]}

最后,存根了客户/ src / styles.scss文件:

$触摸STYLES.SCS

/客户/ src /环境

接下来,创建client/src/environments目录:

$mkdirenvironments $触摸Environment.Prod.Ts.$触摸environment.ts

在这内client/src/environmentsdirectory we will create two new files,Environment.Prod.Ts.environment.ts。这是什么Environment.Prod.Ts.file looks like:

exportconstenvironment={production:真正,};

而且,这是内容environment.ts文件:

exportconstenvironment={production:false,};

/客户/ src / app

接下来,创建客户/ src / app目录:

$mkdir应用程序$cd应用程序$触摸app.module.ts.

应用程序directory is where most of the code for our application will live. The first step to building an Angular application is to create theappmodule.类。要做到这一点,创造客户/ src / app / app.module.ts定义的文件appmodule.类:

进口{enableProdMode}'@angular/core';进口{platformBrowserDynamic}'@angular/platform-browser-dynamic';进口{appmodule.}'./app/app.module';进口{environment}'./environments/environment';if(environmentproduction){enableProdMode();}platformBrowserDynamic()bootstrapmodule.(appmodule.);

接下来,创建客户/ src / app / app.component.ts定义的文件AppComponent.类:

进口{Component}'@angular/core';@Component({selector:'app-root',TemplateURL.:'./app.component.html',样式堡垒:['./app.component.scss'],})exportclassAppComponent.{title='app';}

现在,我们的AppComponent.班级很空虚。请注意selectormatches the我们包含在内的元素客户端/ src / index.html文件。Also note that theTemplateURL.property references an HTML template file, and the样式堡垒属性引用SASS文件;我们都会创建两个。

让我们创造我们的客户/ src / app / app.component.html文件下:

<h1>{{title}}h1>

我们的应用程序。component.html这一点上模板非常基本。我们只是引用公众title我们定义的财产AppComponent.类。

Next, stub out the客户/ src / app / app.component.scss文件:

$触摸app.component.scss.

$ ng serve

If everything goes well, you should now be able to start up the Angular CLI development server:

$ ng serve

确保从项目的根目录运行此操作。

安装材料

Now we're ready to install Angular Material:

$NPM.install@ Angular /材质 - 筛选$NPM.install@ Angular / CDK --Save $NPM.install@ Angular / Animations --Save

接下来,我们需要打开客户/ src / app / app.module.ts文件和导入BrowseranimationsModule.模块。我们还包括对此模块的引用进口阵列。该appmodule.班级现在应该如下所示:

进口{浏览器}'@ Angular / platform-b​​rowser';进口{NgModule}'@angular/core';进口{BrowseranimationsModule.}'@ Angular / platform-b​​rowser /动画';进口{AppComponent.}'./app.component';@NgModule({宣言:[AppComponent.],进口:[BrowseranimationsModule.,浏览器],提供者:[],引导:[AppComponent.],})exportclassappmodule.{}

接下来,让我们通过将预设主题添加到的内容来为我们的应用程序导入主题客户/ src / styles.scss文件:

@import'~@angular/material/prebuilt-themes/deeppurle-amber.css';身体{边缘:0;}

最后,我们也将通过添加样式表来包括材料图标客户端/ src / index.html文件。只包括这个你的HTML模板。

<链接HREF.="https://fonts.yobet英雄联盟googleapis.com/ICON?Family=Material上传"rel="样式表"/>

Addmdtoolbarmodule.

现在我们安装了角度材料并准备好了,让我们开始构建我们的应用程序的界面。我们将首先使用directive.

首先,修改客户/ src / app / app.module.ts文件导入mdtoolbarmodule.模块:

进口{mdtoolbarmodule.}'@ Angular / Material';

然后,导入模块在您的模块appmodule.:

@NgModule({宣言:[AppComponent.],进口:[BrowseranimationsModule.,浏览器,mdtoolbarmodule.],提供者:[],引导:[AppComponent.],})exportclassappmodule.{}

Note that I added themdtoolbarmodule.to the进口property for the module decorator. We'll be doing these two steps a bunch of times as we import each module from the Angular Material library that our application needs.

然后,让我们修改我们的客户/ src / app / app.component.htmltemplate:

<MD-Toolbar.>{{title}}MD-Toolbar.>

而且,我们也会继续修改并修改title我们的财产AppComponent.in客户/ src / app / app.component.ts:

exportclassAppComponent.{title='Tour of Heros';}

Go ahead and build your app using the Angular CLI$ ng serve命令。你应该看到:

MEAN App Server Tests

Flex布局

If you are not familiar with Flex Layout, it is simply a set of static and responsive directives that we can use in our Angular application to make working with Flexbox a breeze. Let's go ahead and install Flex Layout:

$NPM.install@angular/flex-layout --save

现在我们不会导入FlexLayoutModuleinto our code. We'll see how we import this into our application's modules in the next part of this series.

Continue Series

我希望你在系列中享受了第二部分building a MEAN app using TypeScript with Angular Material and Reactive programming

接下来,在系列中的第三部分中,我们会continue to build our application using reactive programming with RxJS and ngrx

Brian F爱

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。