Pro MEAN Stack Development(Apress2016).pdf

This book teaches you to write free, open-source, cross-platform, dynamic JavaScript applications that can run anywhere. Using the MEAN stack – MongoDB, ExpressJS, AngularJS, and Node.js – you will get the tools you need to set up, write your code once, and be able to deploy your code on any device.Pro MEAN Stack DevelopmentElad elromNew YorkUSAISBN-13(pbk):978-1-4842203-6ISBN-13( electronic):978-1-4842-204-3DOI10.1007/978-1-48422044-3Library of Congress Control Number: 2016960665Copyright o 2016 by Elad elromThis work is subject to copyright. All rights are reserved by the Publisher, whether the whole or part of thematerial is concerned, specifically the rights of translation, reprinting, reuse of illustrations, recitation,broadcasting, reproduction on microfilms or in any other physical way, and transmission or information storageand retrieval, electronic adaptation, computer software, or by similar or dissimilar methodology now known orhereafter developedTrademarked names, logos, and images may appear in this book. Rather than use a trademark symbol withevery occurrence of a trademarked name, logo, or image we use the names, logos, and images only in aneditorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademarkThe use in this publication of trade names, trademarks, service marks, and similar terms, even if they arenotidentified as such, is not to be taken as an expression of opinion as to whether or not they are subject toproprietary rightsWhile the advice and information in this book are believed to be true and accurate at the date of publication,neither the authors nor the editors nor the publisher can accept any legal responsibility for any errors oromissions that may be made. The publisher makes no warranty, express or implied, with respect to thematerial contained hereinManaging Director: Welmoed SpahrAcquisitions Editor: Louise CorriganDevelopment Editor: James MarkhamTechnical reviewer: Anselm BradfordEditorial Board: Steve Anglin, Pramila Balan, Laura Berendson, Aaron Black, Louise Corrigan,Jonathan Gennick, Todd Green, Robert Hutchinson, Celestin Suresh John, Nikhil KarkalJames Markham, Susan McDermott, Matthew Moodie, Natalie Pao, Gwenan SpearingCoordinating editor: nancy chenCopy Editor: Lauren Marten ParkerCompositor: SPi globalIndexer: SPi GlobalArtist: SPi GlobalDistributed to the book trade worldwide by Springer Science+Business Media New York,233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax(201)348-4505, e-mailorders-ny@springer-sbm.comorvisitwww.springer.comApressMedia,LlcisaCaliforniaLlcandthesole member (owner ) is Springer Science Business Media Finance Inc(SSBM Finance Inc). SSBM FinanceInc is a delaware corporationForinformationontranslationspleasee-mailrights@apress.com,orvisitwww.apress.compress and friends of ed books may be purchased in bulk for academic, corporate, or promotional useeBook versions and licenses are also available for most titles. For more information, reference our SpecialBulksales-ebooklicensingwebpageatwww.apress.com/bulk-salesAny source code or other supplementary materials referenced by the author in this text are available toreadersatwww.apress.comFordetailedinformationabouthowtolocateyourbookssourcecodegotowww.apress.com/source-code/.reAderscanalsoaccesssourcecodeatSpringerlinkintheSupplementaryMaterial section for each chapterPrinted on acid-free paperContents at a glanceAbout the author■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■国■■国■■国■■■■■■About the technical reviewerAcknowledgmentsChapter 1: Code Dependencies mmmmmmmmmmmmRRRR EIaI. 1Chapter 2: Rollout Servers■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■口■■27Chapter 3: Node Modules51Chapter 4: Cordova, Phone Gap lonic mmmmmmmmm. 75Chapter 5: AngularJs mmmmamammmmmaammmammmmmnm 101Chapter 6: CSS, Bootstrap Responsive Design mmmmamamIaIIR 131Chapter 7: Write Services Once .mmmmmBBRHRBRa Ram 165Chapter 8: Angular JS SEO nani197Chapter 9: Build Scripts mmmamaamaa ammann 221Chapter 10: Platform Deployment amenaa249Index 281ContentsAbout the author■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■国■■国■■国■■■■■■About the technical reviewerAcknowledgmentsXXVIChapter 1: Code Dependencies mmmmmmmmmmmmRRRR EIaI. 1Git version controlCustomize gitDownload git libraries日a日日日面日a日自日日面日自日日a日日自日a日日a日日日面日a日自日日日自日日a日日自日面日a日日a日日日自a日自日7Git“ Hello world”Git|lW…1110Node snpmGrunt1111234GulpBower14Integrated Development Environment15Installing a free open Source iD22Installing xcode24Summary...................25Chapter 2: Rollout Servers■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■27Ubuntu server27SSH Connection and Upgrade Servers...........…………31CONTENTSStall and Update Software33Installing gitInstalling Node. js…34Installing npm.…34Creating Our Web Folder......,..,.,….,…35Linux server35Start a linux server36Create Ps and associate servers www 37Set bash Profile37Update Software….......,…………38MongoDB DatabaseConnect to Ubuntu servernstall and Configure MongoDB Database……MongoDB Hello World....................41MySQL Database42Connect to Database and dump mySQL Database4MySQL Workbench tool…Create Your first database and table47Summary…50Chapter 3: Node Modules■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■國■■■■■■■■■■■國■■■■■■■■■■■■■■■■■■■■■■51npm Node Packages51Install Node. js Modules52Caret version Option57Tilde version Option .......................................................................................................57Latest version Opti0n..................………….57Specific Version Option58Install Save Flag58Global installation58CONTENTSCreate your own first node modules59Create a gitHub Project Repository……59Create a Module projectWrite Your Module codeRun your module codeInstall Dependencies63Ignore FilesCreate Test stubs64Configure Package. json File66Run Test Stubs Using npm....Create Markdown Home Page File……..,,,,…,68Markdown Plugin in WebStorm70Publish module to github70Summary…73Chapter 4: Cordova, Phone Gap lonic■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■圆■■■■■■■■■■■■■■■■■a■■a圆■■■■■75Apache Cordova75Cordova“ Hello world”日日日自日面日日自日日面日自日面日日自日日日面日自日日日自日日面日自日日日自日日自日面日自日自日日自日自日面日自日自日日自日自76Running Your App in CordovaCordova platform deploymentCordova pluginsCordova distributionsPhone Gap Distribution86Installing Phone Gap…Install Phone Gap Mobile appStart CodingPreview Your Phone Gap App日a日日自日日自日日自日日自日日自日日自日日自日日自日日日日自日日日面日面日面日1日面日日面日面面日面面日面Phone Gap Development……,…8993lonic front-end96Add plugins in lonic…CONTENTSPreview Your App..,………,96S Simulatorlonic resources…100Summary100Chapter 5: AngularJs mammmmaaassaaaaaaaaaaaaa 101Angular seed project102Bower component.104App layout File105Partial views108Styles.aeaeaeaeat108Controllers109AngularJS Directives114Template Expanding DirectiveAngularIS Filters117Components….,,,,118esting,118Karma Testing………18Adding New Tests...,….,…,,…,……124Protractor Testing…,…124Routes128Service129Summary129Chapter 6: CSS, Bootstrap, Responsive Design mmmmmmmman an 131CSS Classes Used by AngularJS131Create a New project.....……132ng-dirty,ng- invalid, and ng- pristine…..........,………134Instal! Bootstrap.…,N日面…137UI Bootstrap…................,………138Creating a Custom Ul Bootstrap BuildV11CONTENCSS Bootstrap.…,,144Responsive CSS Media Queries..........................................147CSS Responsive Design Utilizing a Break Point...日日日日日日面日日面日日面日面日面面日面日面日面日面日面日面日面日面日日日151Bootstrap responsive TablesBootstrap CSS Common Styles160Angular- Responsive Library.......…………162Summary.164Chapter 7: Write Services Once aa165Express App…165Installing ExpressHello World express日日日a日日日日自a日日a日日目面日a日日a日日自日日a日日日面日自a日日a日日自目面日自a日自日a日日自日面日a日自日日面日自a日日面Express Generator Tool168Pugjs, Previously Known asSetting Up a Service Layer.....170Setting Up a POST Service..172MongoDB Database Integration…174Start MongoDB面日日日n日日日面日面日日日日日面日面日面日日B日n日日面日面日面日日日日日面日面日面日日日日面日面日面日日日日正日面日面日面日面日n176Create a databaseRead Results from MongoDB into our Express App178MongoDB APl178app. s…………178users」s日日日日日日日日日日自日日自日日自日日自日日自日日自日日自日日自日日自日日日日日日自日面日日面日日面日面目面日面目面日面日面日面日面日面179Express and Socket.0……180Install Socket I0180Add Socket I0 to the App180Update Users service to Include Socket. 0181Retrieve a socket.0 Event Using MongoDB Results…....………182Test Socket I0 App182rooms. s182Creating Static Service.......................185Creating MongoDB Service...........................186CONTENTSCreating a MongoDB GUI Client...…………188Connect Front-End application to Service. ........................................................................189rooms. js with Angular.…..,...,…,…,…………,193node-email-templates Library194Summary196Chapter 8: AngularJS SEOwg197■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■口■■■■■■■■■■■■■■■■■■■■■■■■■■■■■口■■■■■■■■国■口Config angularIs Redirect Settings197Start a New angularIS Seed project...….……………,197AngularJS HTML Mode and Hashbang .Snapshot203Install and config phantomS203Apply Angular-SE0 Script……204Deployment Script.…205Update htaccessSet htaccess redirect210AngularJS Metadata Tags.Update Metadata using a service Module……211Update Metadata with ngMeta.............………………213Robots instructions216Robots Meta Tags…..,…,,.,216Robots exclusion protocol216Sitemap…..............….216Social Media Meta Tags217Webmasters217Submit Pages to Google218Ensure Successful Page Submission.,,,,,,,…,…,…,…,…,………………………219Summary219Chapter 9: Build Scripts221Browserify…......,221Create a New Node js Module21Install Browserify23