Download as PDF, PPTX
![Component
import {Component, OnInit} from 'angular2/core'
import {QuizService} from './quiz-service'
@Component({
selector: 'quiz',
templateUrl: './templates/quiz.html',
providers: [QuizService]
})
export class QuizComponent implements OnInit {
quizList: IQuizList[];
constructor(private _quizService:QuizService) {
}
ngOnInit() {
this.getQuiz();
}
getQuiz() {
this.quizList = this._quizService.getQuizzes();
}
}](https://image.slidesharecdn.com/meanstackwarmup-160929220828/75/MEAN-Stack-Warm-up-37-2048.jpg)
![Data Binding
C/D Attribute Binding type
—> {{ value }} one-way
—> [property] = “value” property
<— (event) = “handler” event
<—> [(ng-model)] = “property” two-way](https://image.slidesharecdn.com/meanstackwarmup-160929220828/75/MEAN-Stack-Warm-up-39-2048.jpg)
![Directive
import {Directive, ElementRef, Renderer, Input, OnInit} from 'angular2/core';
@Directive({
selector: '[sizer]'
})
export class Sizer implements OnInit {
@Input() sizer:string;
element:ELementRef;
renderer:Renderer;
constructor(element:ElementRef, renderer:Renderer) {
this.element = element;
this.renderer = renderer;
}
ngOnInit() {
this.renderer.setElementStyle(this.element.nativeElement,
'fontSize', this.sizer + '%');
}
}](https://image.slidesharecdn.com/meanstackwarmup-160929220828/75/MEAN-Stack-Warm-up-42-2048.jpg)
![Component + Directive
import {Directive, Component, ElementRef, Renderer} from ‘@angular/core';
import {Sizer} from './sizer'
@Component({
selector: 'my-app',
providers: [],
template: `
<div>
<p [sizer]="200">Butter{{name}}</p>
</div>
`,
directives: [Sizer]
})
export class App {
constructor() {
this.name = 'Monkey'
}
}](https://image.slidesharecdn.com/meanstackwarmup-160929220828/75/MEAN-Stack-Warm-up-43-2048.jpg)
Uploaded byTroy Miles
MEAN Stack Warm-up
The document provides an overview of the MEAN stack, a JavaScript software stack for building dynamic web applications. It details the components of MEAN, including MongoDB, Express, Angular, and Node.js, along with resources and workshops for learning. The document emphasizes the benefits of using isomorphic JavaScript and highlights various use cases and best practices for developers.
More Related Content
MEAN Stack Warm-up
- 1. MEAN Stack Warmup PeopleSpace29 Nov 2016
- 2. Troy Miles • TroyMiles aka the RocknCoder • Over 37 years of programming experience • Speaker and author • bit.ly/rc-jquerybook • rockncoder@gmail.com • @therockncoder • Now a lynda.com Author!
- 3. Build Mobile Apps! •Develop mobile apps with Ionic and AngularJS • Learn the Ionic CLI • Fetch data via ajax • Deploy your app to Android & iOS • bit.ly/ionicvideo
- 4. Affordable JavaScript Weekend Workshops@PeopleSpace • MEAN Stack / Jan 28 + 29 Create Full Stack Web Apps in JavaScript • Intro to React / Feb 18 + 19 Deep dive into the Super Popular Library for Build UIs • Angular 2 / Mar 11 + 12 A Deep Dive into the Latest Version of the Popular Front End Framework by Google
- 5. 20% off 24Hours Only code: ROCKNCODER20 Expires 11/30/2016 meanstackweekend.eventbrite.com
- 6. Tonight’s Agenda • Whatis the MEAN Stack? • Heroku • MongoDB • NodeJS + Express • Angular 2 • Some code
- 7. What is theMEAN Stack? • MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications. • Term coined by Valeri Karpov
- 8. MongoDB • MongoDB isan open-source, document database designed for ease of development and scaling. • v3.2 • Initial release - 2009 • https://www.mongodb.org/
- 9. Express • Fast, unopinionated,minimalist web framework for Node.js • v4.14 • http://expressjs.com/
- 10. Angular • HTML enhancedfor web apps! • v2.2.3 • https://angular.io/
- 11. NodeJS • Node.js® isa platform built on Chrome's V8 JavaScript runtime for easily building fast, scalable network applications. • v7.2.0 • https://nodejs.org/
- 12. Git + GitHub •Free and open source distributed version control system • v2.8 • https://git-scm.com/ • https://github.com/
- 13. Benefits of theMEAN Stack • Isomorphic JavaScript • Open Source / Community Driven • Performance • Low Cost
- 14. Isomorphic JavaScript • Onelanguage all the way thru • Client/Server JavaScript • JSON as the data transport format • BSON as the data storage format • JavaScript to control Mongo DB
- 15. Why is JavaScriptBeautiful? • It is a Functional Language - Closer to Lisp and Scheme than Java or C • First Class Functions • Dynamic Objects • Loose Typing • and more...
- 16. ECMAScript Versions Version Date ES1June 1997 ES2 June 1998 ES3 December 1999 ES4 DOA 2006 ES5 December 2009 ES6/ES2015 June 2015 ES2016 2016
- 17. How to useES6 today? • Use only the latest browsers • Use a transpiler: Babel, Traceur, Closure, TypeScript • Use Node.js • https://kangax.github.io/compat-table/es6/
- 18.
- 19. Installation • Create afree heroku account at: • https://www.heroku.com • Download + install heroku toolbelt at: • https://toolbelt.heroku.com/ • (the account is free, no credit card necessary)
- 20. Deploy to Heroku •heroku login • heroku create <app-name> • (must be unique) • git push heroku master • heroku open
- 21.
- 22. Top DB Engines 1.Oracle 2. MySQL 3. MS SQL Server 4. MongoDB 5. PostgreSQL 6. DB2 7. MS Access 8. Cassandra 9. Redis 10.SQLite
- 23. Who Uses It? •Craigslist • eBay • Foursquare • SourceForge • Viacom • Expedia • LinkedIn • Medtronic • eHarmony • CERN • and more
- 24. When to UseMongo? • Document Database • High Performance • High Availability • Easy Scalability • Geospatial Data
- 25. What is aDocument? • An ordered set of keys and values • Like JavaScript objects • No duplicate keys allowed • Type and case sensitive • Field order is not important nor guaranteed
- 26.
- 27. Node v7 • Mergedwith the io.js project, which was at 3.x • New version of Chrome V8 • Supports ES6 • Faster • node -v
- 28. Node Package Manager •Or npm for short • version: npm -v • upgrade npm: npm install npm -g
- 29. package.json • required properties(error if missing) • name & version • optional properties (warning if missing) • description, repository, & license • other properties • scripts, dependencies, config, etc.
- 30. Using Environment Vars •process.env object holds environment vars • Reading: var dbConnect = process.env.dbConnect; • Writing: process.env.mode = ‘test’;
- 31.
- 32. Installation • npm installexpress-generator -g • express <app name> • cd <app name> • npm install • npm start
- 33.
- 34. Angular 2 mainconcepts • Component • Data binding • Service • Directive • Dependency injection • Module
- 35. Metadata • Metadata isextra information which gives angular more info • @Component tells angular the class is a component • @Directive tells angular the class is a directive
- 36. Component • A classwith component metadata • Responsible for a piece of the screen referred to as view. • Template is a form HTML that tells angular how to render the component. • Metadata tells Angular how to process a class
- 37. Component import {Component, OnInit}from 'angular2/core' import {QuizService} from './quiz-service' @Component({ selector: 'quiz', templateUrl: './templates/quiz.html', providers: [QuizService] }) export class QuizComponent implements OnInit { quizList: IQuizList[]; constructor(private _quizService:QuizService) { } ngOnInit() { this.getQuiz(); } getQuiz() { this.quizList = this._quizService.getQuizzes(); } }
- 38. Template/View • Is away to describe a view using HTML • Templates can be included with the component • Or as a URL link to an HTML file • Best practice is to use an HTML file
- 39. Data Binding C/D AttributeBinding type —> {{ value }} one-way —> [property] = “value” property <— (event) = “handler” event <—> [(ng-model)] = “property” two-way
- 40. Service • “Substitutable objectsthat are wired together using dependency injection (DI)” • Used to share code across an app • Lazily instantiated • Angular has no “Service” defined type
- 41. Directive • A classwith directive metadata • Two kinds: attribute & structural • Attribute directives alter the look or behavior of an existing element • Structural directives alter the layout by adding, removing, and replacing elements in the DOM • A component is a directive with a view
- 42. Directive import {Directive, ElementRef,Renderer, Input, OnInit} from 'angular2/core'; @Directive({ selector: '[sizer]' }) export class Sizer implements OnInit { @Input() sizer:string; element:ELementRef; renderer:Renderer; constructor(element:ElementRef, renderer:Renderer) { this.element = element; this.renderer = renderer; } ngOnInit() { this.renderer.setElementStyle(this.element.nativeElement, 'fontSize', this.sizer + '%'); } }
- 43. Component + Directive import{Directive, Component, ElementRef, Renderer} from ‘@angular/core'; import {Sizer} from './sizer' @Component({ selector: 'my-app', providers: [], template: ` <div> <p [sizer]="200">Butter{{name}}</p> </div> `, directives: [Sizer] }) export class App { constructor() { this.name = 'Monkey' } }
- 44. Dependency Injection • Away to supply a new instance of a class with the fully-formed dependencies it needs • Most dependencies are services • Angular know which services a components by looking at the types of its constructor parameters • Services are injected by an Injector which uses a Provider to create the service
- 45. Module • Modules areoptional but a best practice • export tells TypeScript that the resource is a module available for other modules • import tells TypeScript the resource in a module • Angular ships a collection library modules
- 46. Links • https://www.mongodb.org/ • http://expressjs.com/ •https://angular.io/ • https://nodejs.org/ • http://mongoosejs.com/ • https://www.heroku.com/
- 47. Summary • The MEANStack build web apps and APIs • It is composed of four main components • Allows development in JavaScript throughout