AngularJS: Maintaining Web Applications
1st Edition
Published on 22. April 2016
1010 pages
978-1-78646-736-2 (ISBN)
Description
Get started with speed building AngularJS applications, and scale up to a full-stack web application, using the existing AngularJS framework without the trouble of migrating to Angular 2About This BookFollow the best practices of the framework to organize and modularize your applicationGet to grips with Angular's Model-View-Controller architectureCreate application modules with maximum reusability and extensibilityStructure and use AngularJS applications in your MEAN project in your MEAN projectWho This Book Is ForThis course is for people who want to discover how they can improve their current web applications with the existing version of Angular without having to worry much about migrating to AngularJS 2What You Will LearnInstall and set up the AngularJS frameworkCreate your own full-featured and robust AngularJS web appsCreate reusable directives and then extend the behavior of HTML on your web pageOptimize and maintain your web applicationsCreate more powerful full-stack web applications, that draw on the combined power of AngularJS, Node.js, MongoDB, and Express in the MEAN stackIn DetailThe AngularJS course is a journey to help you improve and scale your current web applications with the existing version of Angular without having to worry about migration to Angular 2. The course is divided into four modules.The first part-AngularJS Essentials is like a practical guide, filled with many step-by-step examples that will lead you through the best practices of AngularJS. After a brief introduction, you will learn how to create reusable components with directives. You will then take a look at many data handling techniques, discover a complete set of technologies that are capable to accomplish any challenge related to present, transform, and validate data on the user's interface. Finally, you will discover the best way to deal with the scope and how to break up the application into separate modules, giving rise to reusable and interchangeable libraries.With this you've crossed a milestone and are about to enter the world of learning by example. In the next part-Learning AngularJS By Example, you will learn how to effectively build apps using the AngularJS platform. You will be building multiple apps on this platform ranging from simple ones to more complex ones. In this module, you will roll up your coding sleeves and create a serious AngularJS application by example - a rich featured workout app. Take the coding a step at a time at first, then once you're coding a full app in this module, a lot of AngularJS will fall right into place for you.The third module-AngularJS Web Application Development Cookbook, will get you accustomed to the AngularJS concept armed with a solid understanding of how it works, insight into the best ways to wield it in real-world applications, and annotated code examples. It is a rich library of AngularJS coding solutions that you can use straight away in your own code projects.You are just a step away from completing this learning path of AngularJS. The name of the next part-MEAN Web Development itself assures that you are nearing the destination. The idea is simple with this part, you'll take MongoDB as the database, Express as the web framework, AngularJS as the frontend framework, and Node.js as the platform, and combine them together in a modular approach that will ensure the flexibility needed in modern software development. This is also your graduation to full-stack web development, which can open many new coding and career opportunities for you!Style and approachGet up to speed building AngularJS applications, then improve and scale full-stack web applications, using the existing AngularJS framework without the trouble of migrating to Angular 2
More details
Content
- Cover
- Table of content
- Getting Started with AngularJS
- Introduction to AngularJS
- Architectural concepts
- Setting up the framework
- Organizing the code
- Creating Reusable Components with Directives
- What is a directive?
- Using AngularJS built-in directives
- Refactoring application organization
- Creating our own directives
- Animation
- Data Handling
- Expressions
- Filters
- Form validation
- Dependency Injection and Services
- Dependency injection
- Creating services
- Using AngularJS built-in services
- Scope
- Two-way data binding
- Best practices using the scope
- The $rootScope object
- Scope Broadcasting
- Modules
- Creating modules
- Recommended modules
- Building Our First App - 7 Minute Workout
- What is 7 Minute Workout?
- The 7 Minute Workout model
- Adding app modules
- The app controller
- The 7 Minute Workout view
- Adding start and finish pages
- Learning more about an exercise
- Displaying the remaining workout time using filters
- Adding the next exercise indicator using ng-if
- More AngularJS Goodness for 7 Minute Workout
- Formatting the exercise steps
- Tracking exercise progress with audio clips
- Pausing exercises
- Enhancing the workout video panel
- Animations with AngularJS
- Building Personal Trainer
- The Personal Trainer app - the problem scope
- The Personal Trainer model
- The Personal Trainer layout
- Implementing the workout and exercise list
- Building a workout
- Adding Data Persistence to Personal Trainer
- AngularJS and server interactions
- $http service basics
- Personal Trainer and server integration
- Getting started with $resource
- Using $resource to access exercise data
- Exercising CRUD with $resource
- Request/response interceptors
- AngularJS request/response transformers
- Handling routing failure for rejected promises
- Fixing the 7 Minute Workout app
- Working with Directives
- Directives - an introduction
- Anatomy of a directive
- Building a remote validation directive to validate the workout name
- Model update on blur
- Implementing a remote validation clues directive
- Understanding directive-isolated scopes
- AngularJS jQuery integration
- Maximizing AngularJS Directives
- Introduction
- Building a simple element directive
- Working through the directive spectrum
- Manipulating the DOM
- Linking directives
- Interfacing with a directive using isolate scope
- Interaction between nested directives
- Optional nested directive controllers
- Directive scope inheritance
- Directive templating
- Isolate scope
- Directive transclusion
- Recursive directives
- Expanding Your Toolkit with Filters and Service Types
- Introduction
- Using the uppercase and lowercase filters
- Using the number and currency filters
- Using the date filter
- Debugging using the json filter
- Using data filters outside the template
- Using built-in search filters
- Chaining filters
- Creating custom data filters
- Creating custom search filters
- Filtering with custom comparators
- Building a search filter from scratch
- Building a custom search filter expression from scratch
- Using service values and constants
- Using service factories
- Using services
- Using service providers
- Using service decorators
- AngularJS Animations
- Introduction
- Creating a simple fade in/out animation
- Replicating jQuery's slideUp() and slideDown() methods
- Creating enter animations with ngIf
- Creating leave and concurrent animations with ngView
- Creating move animations with ngRepeat
- Creating addClass animations with ngShow
- Creating removeClass animations with ngClass
- Your Coding Challenge
- Staggering batched animations
- Sculpting and Organizing your Application
- Introduction
- Manually bootstrapping an application
- Using safe $apply
- Application file and module organization
- Hiding AngularJS from the user
- Managing application templates
- The "Controller as" syntax
- Working with the Scope and Model
- Introduction
- Configuring and using AngularJS events
- Managing $scope inheritance
- Working with AngularJS forms
- Working with &select& and ngOptions
- Building an event bus
- Testing in AngularJS
- Introduction
- Configuring and running your test environment in Yeoman and Grunt
- Understanding Protractor
- Incorporating E2E tests and Protractor in Grunt
- Writing basic unit tests
- Writing basic E2E tests
- Setting up a simple mock backend server
- Writing DAMP tests
- Using the Page Object test pattern
- Screaming Fast AngularJS
- Introduction
- Recognizing AngularJS landmines
- Creating a universal watch callback
- Inspecting your application's watchers
- Deploying and managing $watch types efficiently
- Optimizing the application using reference $watch
- Optimizing the application using equality $watch
- Optimizing the application using $watchCollection
- Optimizing the application using $watch deregistration
- Optimizing template-binding watch expressions
- Optimizing the application with the compile phase in ng-repeat
- Optimizing the application using track by in ng-repeat
- Trimming down watched models
- Promises
- Introduction
- Understanding and implementing a basic promise
- Chaining promises and promise handlers
- Implementing promise notifications
- Your Coding Challenge
- Implementing promise barriers with $q.all()
- Creating promise wrappers with $q.when()
- Using promises with $http
- Using promises with $resource
- Using promises with Restangular
- Incorporating promises into native route resolves
- Implementing nested ui-router resolves
- Getting Started with Node.js
- Introduction to Node.js
- JavaScript closures
- Node modules
- Developing Node.js web applications
- Building an Express Web Application
- Introduction to Express
- Installing Express
- Creating your first Express application
- The application, request, and response objects
- External middleware
- Implementing the MVC pattern
- Configuring an Express application
- Rendering views
- Serving static files
- Configuring sessions
- Introduction to MongoDB
- Introduction to NoSQL
- Introducing MongoDB
- Key features of MongoDB
- MongoDB shell
- MongoDB databases
- MongoDB collections
- MongoDB CRUD operations
- Introduction to Mongoose
- Introducing Mongoose
- Understanding Mongoose schemas
- Extending your Mongoose schema
- Defining custom model methods
- Model validation
- Using Mongoose middleware
- Using Mongoose DBRef
- Managing User Authentication Using Passport
- Introducing Passport
- Understanding Passport strategies
- Understanding Passport OAuth strategies
- Introduction to AngularJS
- Introducing AngularJS
- Key concepts of AngularJS
- Installing AngularJS
- Structuring an AngularJS application
- Bootstrapping your AngularJS application
- AngularJS MVC entities
- AngularJS routing
- AngularJS services
- Managing AngularJS authentication
- Creating a MEAN CRUD Module
- Introducing CRUD modules
- Setting up the Express components
- Introducing the ngResource module
- Implementing the AngularJS MVC module
- Finalizing your module implementation
- Adding Real-time Functionality Using Socket.io
- Introducing WebSockets
- Introducing Socket.io
- Installing Socket.io
- Building a Socket.io chat
- Testing MEAN Applications
- Introducing JavaScript testing
- Testing your Express application
- Testing your AngularJS application
- Automating and Debugging MEAN Applications
- Introducing the Grunt task runner
- Debugging Express with node-inspector
- Debugging AngularJS with Batarang
- Reflect and Test Yourself! Answers
- Bibliography
