[Fronthub 2016] Константин Макарычев: "Не быстрый старт с Angular 2"
•Download as PPTX, PDF•
0 likes•144 views
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to [Fronthub 2016] Константин Макарычев: "Не быстрый старт с Angular 2"
Similar to [Fronthub 2016] Константин Макарычев: "Не быстрый старт с Angular 2" (20)
More from Provectus
More from Provectus (20)
Recently uploaded
Recently uploaded (20)
[Fronthub 2016] Константин Макарычев: "Не быстрый старт с Angular 2"
- 1. Константин Макарычев для FrontHub
- 3. Angular2
- 4. Зачем?
- 7. App Component Center Component List Component List Item Component List Item Component List Item Component List Item Component List Item Component List Item Component YetAnotherComponent
- 9. import { Component } from '@angular/core'; @Component({ selector: 'app', styles: [ require('./app.style.css') ], template: require('./app.template.html') }) export class App {}
- 11. :host { display: flex; flex-flow: row wrap; justify-content: space-around; padding: 50px 15px 50px 15px; height: 80vh; width: 90vw; background-color: #4B87CB; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .text { flex: 1 100%; text-align: center; margin-bottom: 10px; } center { flex: 2 0px; } list, yet-another-component { flex: 1 0px; margin: 0 15px 0 15px; }
- 12. src index.js app.module.js components app.component.js app.template.html app.style.css list list.component.js list.template.html list.style.css item center
- 13. import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { App } from './components/app/app.component'; import { Center } from './components/app/center/center.component'; import { List } from './components/app/list/list.component'; import { Item } from './components/app/list/item/item.component'; @NgModule({ imports: [ BrowserModule ], declarations: [ App, Center, List, Item, YetAnotherComponent ], bootstrap: [ App ], }) export class AppModule { }
- 14. Сборка: gulp + babel + browserify
- 15. npm install --save @angular/common @angular/compiler @angular/core @angular/platform-browser @angular/platform- browser @angular/platform-browser-dynamic babel- cli babel-plugin-transform-function-bind babel- preset-angular2 babel-preset-es2015 babel-register babelify browserify del gulp gulp-sourcemaps gulp- util object-assign rxjs stringify vinyl-buffer vinyl- source-stream watchify zone.js
- 16. gulp.task('build', () => { const b = browserify('ui/src/index.js') .transform(stringify({ appliesTo: { includeExtensions: ['.html', '.css'] } })) .transform(babelify); return bundle(b); }); function bundle(b) { return b.bundle() .on('error', (e) => { gutil.log(e); }) .pipe(source('bundle.js')) .pipe(buffer()) .pipe(sourcemaps.init({ loadMaps: true })) .pipe(sourcemaps.write('./')) .pipe(gulp.dest('ui/build')); }
- 17. <!doctype html> <html> <head> <title>FrontHub: Angular2 example</title> </head> <body> <app>Loading</app> <script src="/ui/build/bundle.js"></script> </body> </html>
- 19. Ложка дёгтя
Editor's Notes
- 1995 – VanillaJS 2005 – расцвет вэба (youtube, facebook, stackoverflow; rails, django): jQuery, Prototype, YUI 2013 – react, web components 2010 – backbone, angular1
- Большой фреймворк от google, бла-бла-бла
- Раньше: мигание кнопок; Сейачс: приложения типа Google Music, Telegram/Slack, Office 365, etc
- Размер, документация, observable