book

AngularJS: Maintaining Web Applications

by Rodrigo Branas, Chandermani, Matt Frisbie, Amos Q. Haviv

April 2016

Intermediate to advanced

1010 pages

22h 16m

English

Packt Publishing

Read now

Unlock full access

Lesson 1: Getting Started with AngularJSIntroduction to AngularJSArchitectural conceptsSetting up the frameworkOrganizing the codeFour ways to organize the codeThe inline styleThe stereotyped styleThe specific styleThe domain style
What is a directive?Using AngularJS built-in directivesThe ngApp directiveThe ngController directiveNested controllersThe ngBind directiveThe ngBindHtml directiveThe ngRepeat directiveThe ngModel directiveThe ngClick directive and other event directivesThe ngDisable directiveThe ngClass directiveThe ngOptions directiveThe ngStyle directiveThe ngShow and ngHide directivesThe ngIf directiveThe ngInclude directiveRefactoring application organizationCreating our own directivestemplatetemplateUrlreplacerestrictscopetranscludelinkrequirecontrollercompileAnimationHow it works?Animating ngRepeatAnimating ngHideAnimating ngClass
ExpressionsFiltersBasic usage with expressionscurrencydatefilterjsonlimitTolowercasenumberorderByuppercaseUsing filters in other placesCreating filtersForm validationCreating our first formBasic validationUnderstanding the $pristine and $dirty propertiesThe $error object
Dependency injectionCreating servicesCreating services with the factoryCreating services with the serviceCreating services with the providerUsing AngularJS built-in servicesCommunicating with the backendHTTP, REST, and JSONAJAXCreating an HTTP facadeHeadersCachingInterceptorsCreating a single-page applicationInstalling the moduleConfiguring the routesRendering the content of each viewPassing parametersChanging the locationResolving promisesLoggingTimeoutAsynchronous with a promise-deferred patternThe deferred APIThe promise API

Two-way data binding$apply and $watchBest practices using the scopeThe $rootScope objectScope Broadcasting
Creating modulesThe UI moduleThe search moduleThe parking application moduleRecommended modules
Lesson 1: Building Our First App – 7 Minute WorkoutWhat is 7 Minute Workout?Downloading the codebaseCode organizationOrganizing the JavaScript codeThe 7 Minute Workout modelAdding app modulesThe app controllerDependency injectionDependency Injection 101Dependency injection in AngularHandling minificationDependency annotationsController implementationsTracking the duration of an exercise using the $interval serviceVerifying the implementationImplementing exercise transitionsUsing $watch to watch the models changesExploring $watchImplementing transitions using $watchUsing the AngularJS Promise API for exercise transitionsThe basics of promisesThe 7 Minute Workout viewImage path binding with ng-srcUsing ng-style with the Bootstrap progress barAdding start and finish pagesUnderstanding SPAsView layouts for SPAs using ng-viewDefining 7 Minute Workout routesThe config/run phase and module initializationView navigation in the controller using $locationWorking with the $location serviceLearning more about an exerciseAdding descriptions and video panelsWorking with ng-includeWorking with ng-repeatDisplaying the remaining workout time using filtersCreating a seconds-to-time filterUnderstanding AngularJS filtersImplementing the secondsToTime filterAdding the next exercise indicator using ng-if
Formatting the exercise stepsUnderstanding ng-bind-htmlUsing ng-bind-html with data of the exercise stepsTracking exercise progress with audio clipsImplementing audio supportImplementing WorkoutAudioControllerExploring the audio synchronization issueAngularJS dirty checking and digest cyclesSummarizing our learningsFixing the next-up exercise's audio synchronization issuePausing exercisesImplementing pause/resume in WorkoutControllerAdding the view fragment for pausing/resumingPausing/resuming overlays using mouse eventsPausing/resuming overlays with plain CSSCSS class manipulation using ng-classStopping audio on pauseUsing the keyboard to pause/resume exercisesEnhancing the workout video panelRefactoring the video panel and controllerVideo playback in the pop-up dialogIntegrating the ui.bootstrap modal dialogAnimations with AngularJSAngularJS CSS animationAngularJS JavaScript animationAdding animation to 7 Minute WorkoutWorkout history tracking using Angular servicesAngularJS services primerCreating AngularJS servicesCreating services with the constant and value servicesCreating services using a serviceCreating services with a factory serviceCreating services with a provider serviceImplementing workout history trackingThe WorkoutHistoryTracker serviceServices and scopesService implementation continued...Integrating the WorkoutHistoryTracker service with a controllerAdding the workout history viewAngularJS eventingEnriching history tracking with AngularJS eventingPersisting workout history in browser storageFiltering workout historyFiltering and ordering using ng-repeatThe filter object of AngularJS filtersThe AngularJS orderBy filterSpecial ng-repeat properties
The Personal Trainer app – the problem scopePersonal Trainer requirementsThe Personal Trainer modelSharing the workout modelThe model as a serviceThe Personal Trainer layoutThe Personal Trainer navigation with routesIntegrating left and top navigationImplementing the workout and exercise listWorkoutService as a workout and exercise repositoryExercise and workout list controllersExercise and workout list viewsBuilding a workoutBuilding left navAdding the WorkoutBuilderService serviceAdding exercises using exercise navImplementing WorkoutDetailControllerRoute resolvingResolving routes not found!Implementing WorkoutDetailController continued…Implementing the workout builder viewAngularJS formsAngularJS form constructsThe ng-model directiveUsing ng-model with input and textareaUsing ng-model with selectControlling model updates with ng-model-options (Angular 1.3)ng-model – beyond data bindingUnderstanding NgModelControllerImplementing a decimal-to-integer formatter and parserAngularJS validationThe AngularJS model stateWorkout builder validationHow validation works (pre-Angular 1.3)How validation works (Angular 1.3)Managing validation error messages with ng-messages (Angular 1.3)Custom validation for an exercise countSaving the workoutThe AngularJS form directive and form validationThe FormController APIFixing the saving of forms and validation messagesFixing unwarranted model updatesResetting the formAngularJS $routeParamsDynamically generated inputs and formsValidating exercise duration with ng-formRevisiting Angular scopes
AngularJS and server interactionsSetting up the persistence storeSeeding the database$http service basicsPersonal Trainer and server integrationLoading exercise and workout dataLoading exercise and workout lists from a serverImplementing the WorkoutService providerMapping server data to application modelsUnderstanding promise chainingLoading exercise and workout data from the serverFixing workout and exercise detail pagesCreating and resolving custom promisesThe $q "when" functionFixing workout and exercise detail pages continued…Route resolutions and promisesPerforming CRUD on exercises/workoutsFixing and creating a new workoutCross-domain access and AngularJSUsing JSONP to make cross-domain requestsCross-origin resource sharingGetting started with $resourceRESTful API services$resource basicsUnderstanding $resource actions$resource action invocationUsing $resource to access exercise dataThe hidden cost of hiding asynchronicityExercising CRUD with $resourceThe $resource service with non-RESTful endpointsRequest/response interceptorsUsing an interceptor to pass the API keyAngularJS request/response transformersHandling routing failure for rejected promisesHandling workouts not foundFixing the 7 Minute Workout app
Directives – an introductionAnatomy of a directiveCreating a workout-tile directiveExploring the ng-click directiveBuilding a remote validation directive to validate the workout nameThe remote-validator directive (for v1.3 or less)The require directive definitionThe link functionThe remote-validator directive in Angular 1.3Model update on blurUsing priority to affect the order of execution of the compile and link functionsLife cycle of a directiveThe priority and multiple directives on a single elementImplementing a remote validation clues directiveAngular $compile serviceDirective controller functionInter-directive communication – integrating busy-indicator and remote-validatorFixing remote-validator – pre-Angular 1.3Fixing remote-validator (Angular 1.3)Injecting HTML in the directive compile functionUnderstanding directive templates and transcludeUnderstanding directive-isolated scopesCreating the AJAX button directiveAngularJS jQuery integrationIntegrating the Carousel jQuery plugin with Workout RunnerTunneling jQuery events with directives
Lesson 1: Maximizing AngularJS DirectivesIntroductionBuilding a simple element directiveHow to do it…How it works…There's more…Working through the directive spectrumHow to do it…The element directiveThe attribute directiveThe class directiveThe comment directiveHow it works…There's more…See alsoManipulating the DOMHow to do it…How it works…There's more…See alsoLinking directivesHow to do it…How it works…There's more…See alsoInterfacing with a directive using isolate scopeGetting readyHow to do it…How it works…There's more…See alsoInteraction between nested directivesGetting readyHow to do it…How it works…See alsoOptional nested directive controllersGetting readyHow to do it…How it works…Directive scope inheritanceGetting readyHow to do it…How it works…See alsoDirective templatingGetting readyHow to do it…How it works…See alsoIsolate scopeGetting readyHow to do it…How it works…See alsoDirective transclusionHow to do it…How it works…See alsoRecursive directivesGetting readyHow to do it…The $compile serviceThe angular.element() methodThe $templateCacheHow it works…There's more…See also
IntroductionUsing the uppercase and lowercase filtersHow to do it…How it works…There's more…See alsoUsing the number and currency filtersGetting ready…How to do it…How it works…There's more…See also…Using the date filterGetting ready…How to do it…How it works…There's more…Debugging using the json filterGetting ready…How to do it…How it works…There's more…Using data filters outside the templateGetting readyHow to do it…How it works…There's more…Using built-in search filtersGetting readyHow to do it…How it works…See alsoChaining filtersGetting readyHow to do it…How it works…There's more…Creating custom data filtersHow to do it…How it works…There's more…Creating custom search filtersGetting readyHow to do it…Filtering with custom comparatorsGetting readyHow to do it…How it works…See alsoBuilding a search filter from scratchGetting readyHow to do it…How it works…There's more…See alsoBuilding a custom search filter expression from scratchHow to do it…How it works…There's more…Using service values and constantsHow to do it…Service valueService constantHow it works…See alsoUsing service factoriesHow to do it…How it works…See alsoUsing servicesHow to do it…How it works…See alsoUsing service providersHow to do it…How it works…There's more…See alsoUsing service decoratorsHow to do it…How it works…See also
IntroductionCreating a simple fade in/out animationGetting readyHow to do it…How it works…There's more…Keeping things cleanNo more boilerplate animation stylingSee alsoReplicating jQuery's slideUp() and slideDown() methodsGetting readyHow to do it…How it works…See alsoCreating enter animations with ngIfGetting readyHow to do it…CSS3 transitionCSS3 animationJavaScript animationHow it works…There's more…See alsoCreating leave and concurrent animations with ngViewGetting readyHow to do it…CSS3 transitionCSS3 animationJavaScript animationHow it works…See alsoCreating move animations with ngRepeatGetting readyHow to do it…CSS3 transitionCSS3 animationJavaScript animationHow it works…There's more…See alsoCreating addClass animations with ngShowGetting readyHow to do it…CSS transitionsCSS animationJavaScript animationHow it works…See alsoCreating removeClass animations with ngClassGetting readyHow to do it…CSS transitionsCSS animationJavaScript animationHow it works…See alsoYour Coding ChallengeStaggering batched animationsGetting readyHow to do it…How it works…There's more…See also
IntroductionManually bootstrapping an applicationGetting readyHow to do it…How it works…There's more…Using safe $applyGetting readyHow to do it…How it works…There's more…Anti-pattern awarenessApplication file and module organizationGetting readyHow to do it…One module, one file, and one nameKeep your related files close, keep your unit tests closerGroup by feature, not by component typeDon't fight reusabilityAn example directory structureHiding AngularJS from the userGetting readyHow to do it…How it works…There's more…Managing application templatesGetting readyHow to do it…The string templateRemote server templatesInline templates using ng-templatePre-defined templates in the cacheHow it works…There's more…The "Controller as" syntaxGetting readyHow to do it…How it works…There's more…
IntroductionConfiguring and using AngularJS eventsHow to do it…Broadcasting an eventEmitting an eventDeregistering an event listenerManaging $scope inheritanceGetting readyHow to do it…How it works…There's more…Troublemaker built-in directivesngControllerngIncludengViewngRepeatngIfngSwitchWorking with AngularJS formsHow to do it…What the form offers youTracking the form stateValidating the formBuilt-in and custom validatorsHow it works…Working with <select> and ngOptionsGetting readyHow to do it…Populating with an arrayExplicitly defining the option valuesExplicitly defining the option model assignmentImplementing option groupsNull optionsPopulating with an objectExplicitly defining option valuesHow it works…There's more…Building an event busGetting readyHow to do it…Basic implementationCleanupEvent bus as a serviceEvent bus as a decoratorHow it works…There's more…
IntroductionConfiguring and running your test environment in Yeoman and GruntHow to do it…Using the right tools for the jobHow it works…There's more…See alsoUnderstanding ProtractorHow it works…There's more…See alsoIncorporating E2E tests and Protractor in GruntGetting readyHow to do it…InstallationSelenium's WebDriver managerModifying your GruntfileSetting your Protractor configurationRunning the test suiteHow it works…See alsoWriting basic unit testsGetting readyHow to do it…Initializing the unit testsCreating the unit testsHow it works…Initializing the controllerInitializing the HTTP backendFormally running the unit testsThere's more…Writing basic E2E testsGetting readyHow to do it…How it works…There's more…See alsoSetting up a simple mock backend serverHow to do it…How it works…There's more…See alsoWriting DAMP testsHow to do it…There's more…See alsoUsing the Page Object test patternHow to do it…How it works…There's more…See also
IntroductionRecognizing AngularJS landminesHow to do it…Expensive filters in ng-repeatDeep watching a large objectUsing $watchCollection when the index of change is neededKeeping template watchers under controlThere's more…See alsoCreating a universal watch callbackHow to do it…How it works…There's more…See alsoInspecting your application's watchersHow to do it…How it works…There's more…See alsoDeploying and managing $watch types efficientlyHow to do it…Watch as little of the model as possibleKeep watch expressions as lightweight as possibleUse the fewest number of watchers possibleKeep the watch callbacks small and lightCreate DRY watchersSee alsoOptimizing the application using reference $watchHow to do it…How it works…There's more…See alsoOptimizing the application using equality $watchHow to do it…How it works…There's more…See alsoOptimizing the application using $watchCollectionHow to do it…How it works…There's more…See alsoOptimizing the application using $watch deregistrationHow to do it…How it works…See alsoOptimizing template-binding watch expressionsHow to do it…How it works…There's more…See alsoOptimizing the application with the compile phase in ng-repeatGetting readyHow to do it…How it works…There's more…See alsoOptimizing the application using track by in ng-repeatHow to do it…How it works…See alsoTrimming down watched modelsHow to do it…How it works…There's more…See also
IntroductionUnderstanding and implementing a basic promiseHow to do it…How it works…Basic components and behavior of a promiseDeferredsPromisesSee alsoChaining promises and promise handlersGetting readyHow to do it…Data handoff for chained handlersRejecting a chained handlerHow it works…There's more…Promise handler treesThe catch() methodThe finally() methodSee alsoImplementing promise notificationsHow to do it…How it works…There's more…Your Coding ChallengeImplementing promise barriers with $q.all()How to do it…How it works…There's more…See alsoCreating promise wrappers with $q.when()How to do it…How it works…There's more…See alsoUsing promises with $httpHow to do it…How it works…See alsoUsing promises with $resourceHow to do it…How it works…See alsoUsing promises with RestangularHow to do it…How it works…See alsoIncorporating promises into native route resolvesHow to do it…How it works…There's more…See alsoImplementing nested ui-router resolvesHow to do it…State promise inheritanceSingle-state promise dependenciesHow it works…See also
Lesson 1: Getting Started with Node.jsIntroduction to Node.jsJavaScript event-driven programmingNode.js event-driven programmingJavaScript closuresNode modulesCommonJS modulesNode.js core modulesNode.js third-party modulesNode.js file modulesNode.js folder modulesDeveloping Node.js web applicationsMeet the Connect moduleConnect middlewareUnderstanding the order of Connect middlewareMounting Connect middleware
Introduction to ExpressInstalling ExpressCreating your first Express applicationThe application, request, and response objectsThe application objectThe request objectThe response objectExternal middlewareImplementing the MVC patternApplication folder structureHorizontal folder structureVertical folder structureFile-naming conventionsImplementing the horizontal folder structureHandling request routingAdding the routing fileConfiguring an Express applicationEnvironment configuration filesRendering viewsConfiguring the view systemRendering EJS viewsServing static filesConfiguring sessions
Introduction to NoSQLIntroducing MongoDBKey features of MongoDBThe BSON formatMongoDB ad hoc queriesMongoDB indexingMongoDB replica setMongoDB shardingMongoDB shellMongoDB databasesMongoDB collectionsMongoDB CRUD operationsCreating a new documentCreating a document using insert()Creating a document using update()Creating a document using save()Reading documentsFinding all the collection documentsUsing an equality statementUsing query operatorsBuilding AND/OR queriesUpdating existing documentsUpdating documents using update()Updating documents using save()Deleting documentsDeleting all documentsDeleting multiple documentsDeleting a single document
Introducing MongooseInstalling MongooseConnecting to MongoDBUnderstanding Mongoose schemasCreating the user schema and modelRegistering the User modelCreating new users using save()Finding multiple user documents using find()Advanced querying using find()Reading a single user document using findOne()Updating an existing user documentDeleting an existing user documentExtending your Mongoose schemaDefining default valuesUsing schema modifiersPredefined modifiersCustom setter modifiersCustom getter modifiersAdding virtual attributesOptimizing queries using indexesDefining custom model methodsDefining custom static methodsDefining custom instance methodsModel validationPredefined validatorsCustom validatorsUsing Mongoose middlewareUsing pre middlewareUsing post middlewareUsing Mongoose DBRef
Introducing PassportInstalling PassportConfiguring PassportUnderstanding Passport strategiesUsing Passport's local strategyInstalling Passport's local strategy moduleConfiguring Passport's local strategyAdapting the User modelCreating the authentication viewsModifying the user controllerDisplaying flash error messagesInstalling the Connect-Flash moduleConfiguring Connect-Flash moduleUsing Connect-Flash moduleWiring the user's routesUnderstanding Passport OAuth strategiesSetting up OAuth strategiesHandling OAuth user creationUsing Passport's Facebook strategyInstalling Passport's Facebook strategyConfiguring Passport's Facebook strategyWiring Passport's Facebook strategy routesUsing Passport's Twitter strategyInstalling Passport's Twitter strategyConfiguring Passport's Twitter strategyWiring Passport's Twitter strategy routesUsing Passport's Google strategyInstalling Passport's Google strategyConfiguring Passport's Google strategyWiring Passport's Google strategy routes
Introducing AngularJSKey concepts of AngularJSThe core module of AngularJSThe angular global objectAngularJS modulesApplication modulesExternal modulesThird-party modulesTwo-way data bindingDependency injectionDependency injection in AngularJSAngularJS directivesCore directivesCustom directivesBootstrapping an AngularJS applicationAutomatic bootstrapManual bootstrapInstalling AngularJSMeeting the Bower dependencies managerConfiguring the Bower dependencies managerInstalling AngularJS using BowerConfiguring AngularJSStructuring an AngularJS applicationBootstrapping your AngularJS applicationAngularJS MVC entitiesAngularJS viewsAngularJS controllers and scopesAngularJS routingInstalling the ngRoute moduleConfiguring the URL schemeAngularJS application routesAngularJS servicesAngularJS prebundled servicesCreating AngularJS servicesUsing AngularJS servicesManaging AngularJS authenticationRendering the user objectAdding the Authentication serviceUsing the Authentication service
Introducing CRUD modulesSetting up the Express componentsCreating the Mongoose modelSetting up the Express controllerThe error handling method of the Express controllerThe create() method of the Express controllerThe list() method of the Express controllerThe read() middleware of the Express controllerThe update() method of the Express controllerThe delete() method of the Express controllerImplementing an authentication middlewareImplementing an authorization middlewareWiring the Express routesConfiguring the Express applicationIntroducing the ngResource moduleInstalling the ngResource moduleUsing the $resource serviceImplementing the AngularJS MVC moduleCreating the AngularJS module serviceSetting up the AngularJS module controllerThe create() method of the AngularJS controllerThe find() and findOne() methods of the AngularJS controllerThe update() method of the AngularJS controllerThe delete() method of the AngularJS controllerImplementing the AngularJS module viewsThe create-article viewThe view-article viewThe edit-article viewThe list-articles viewWiring the AngularJS module routesFinalizing your module implementation
Introducing WebSocketsIntroducing Socket.ioThe Socket.io server objectSocket.io handshakingThe Socket.io configuration middlewareThe Socket.io client objectSocket.io eventsHandling eventsEmitting eventsSocket.io namespacesSocket.io server namespacesSocket.io client namespacesSocket.io roomsJoining and leaving roomsEmitting events to roomsInstalling Socket.ioConfiguring the Socket.io serverConfiguring the Socket.io sessionInstalling the connect-mongo and cookie-parser modulesConfiguring the connect-mongo moduleConfiguring the Socket.io sessionBuilding a Socket.io chatSetting the event handlers of the chat serverCreating the Socket serviceCreating the chat controllerCreating the chat viewAdding chat routesFinalizing the chat implementation
Introducing JavaScript testingTDD, BDD, and unit testingTest frameworksAssertion librariesTest runnersTesting your Express applicationIntroducing MochaIntroducing Should.jsIntroducing SuperTestInstalling MochaInstalling the Should.js and SuperTest modulesConfiguring your test environmentWriting your first Mocha testTesting the Express modelTesting the Express controllerRunning your Mocha testTesting your AngularJS applicationIntroducing the Jasmine frameworkAngularJS unit testsIntroducing Karma test runnerInstalling the Karma command-line toolInstalling Karma's dependenciesConfiguring the Karma test runnerMocking AngularJS componentsIntroducing ngMockInstalling ngMockWriting AngularJS unit testsTesting modulesTesting controllersTesting servicesTesting routesTesting directivesTesting filtersWriting your first unit testRunning your AngularJS unit testsAngularJS E2E testsIntroducing the Protractor test runnerInstalling the Protractor test runnerConfiguring the Protractor test runnerWriting your first E2E testRunning your AngularJS E2E tests
Introducing the Grunt task runnerInstalling the Grunt task runnerConfiguring GruntRunning your application using GruntTesting your application using GruntLinting your application using GruntWatching file changes using GruntDebugging Express with node-inspectorInstalling node-inspector's grunt taskConfiguring node-inspector's grunt taskRunning the debug grunt taskDebugging AngularJS with BatarangUsing BatarangBatarang ModelsBatarang PerformanceBatarang DependenciesBatarang options
Part 1: AngularJS EssentialsPart 2: AngularJS By ExamplePart 4: MEAN Web Development

Content preview from AngularJS: Maintaining Web Applications

Lesson 2: More AngularJS Goodness for 7 Minute Workout

If the previous Lesson was about building our first useful app in AngularJS, then this Lesson is about adding a whole lot of AngularJS goodness to it. The 7 Minute Workout app still has some rough edges/limitations that we can fix and make the overall app experience better. This Lesson is all about adding those enhancements and features. As always, this app building process should provide us with enough opportunities to foster our understanding of the framework and learn new things about it.

The topics we will cover in this Lesson include:

Exercise steps formatting: We try to fix data of exercise procedure steps by formatting the step text as HTML.
Audio support: We add audio support to the workout. ...