Learning Single-page Web Application Development

Table of contents

1. Learning Single-page Web Application Development
   1. Table of Contents
   2. Learning Single-page Web Application Development
   3. Credits
   4. About the Author
   5. About the Reviewers
   6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
         1. Why subscribe?
         2. Free access for Packt account holders
   7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
         1. Downloading the example code
         2. Errata
         3. Piracy
         4. Questions
   8. 1. Understanding Single Page Application
      1. Getting acquainted with SPA
         1. Understanding the work of SPAs
         2. Understanding the MVC/MVVM/MV* pattern
      2. Peculiarities between SPA and traditional web development
         1. Choosing a library or framework
      3. Introducing the MEAN stack
         1. Tools to develop web applications
            1. Text editor
            2. AngularJS
         2. Debugging tools
         3. Generators and the task manager
            1. Yeoman
            2. Bower
            3. Grunt
      4. The SPA directory structure
      5. It's all about JavaScript
      6. HTML, CSS, and the responsive way
         1. Pure CSS
      7. Summary
   9. 2. Taking a Deep Dive into Node.js and MongoDB
      1. Node server, NPM, and middleware
      2. Event-driven development and the event loop
         1. The event loop
         2. Working with require() and modules
            1. The require() function
            2. The Node modules
      3. Express – a web framework on a server
      4. MongoDB and the terminal
         1. Comparing a relational database with the NoSQL database
         2. The mongo shell
         3. MongoDB connection with Mongoose
         4. Mongoose schemas and models
      5. Summary
   10. 3. API with MongoDB and Node.js
       1. The working of an API
       2. Boilerplates and generators
          1. Hackathon starter
          2. MEAN.io or MEAN.JS
             1. The Passport module
          3. Generators
             1. The Express generator
       3. The speakers API concept
          1. The user history
       4. Creating the package.json file
          1. Initiating the JSON file
       5. Node server with server.js
       6. Model with the Mongoose schema
       7. Defining the API routes
       8. Using MongoDB in the cloud
       9. Inserting data with Postman
       10. Summary
   11. 4. Creating a Conference Web Application
       1. Rebuilding the API
          1. Getting the baseline structure
          2. Changing the initialization process
          3. Changing the directory structure
          4. Inserting new folders and files
          5. Creating the configuration file
       2. Adding the Passport middleware
          1. Adding session control and password encryption
          2. Setting password encryption to a user model
          3. Reviewing the changes in the server.js file
       3. Dealing with routes
       4. Templates with Embedded JavaScript
       5. Bower leading frontend dependencies
       6. Pure CSS and Responsive Boilerplate for frontend views
          1. Creating the index, profile, login, and signup pages
       7. Summary
   12. 5. Starting with AngularJS
       1. Starting the baseline application
       2. The AngularJS MVC pattern implementation
          1. Model
          2. View
          3. Controller
       3. Detailing directives, expressions, and scope
       4. Two-way data binding and templates
          1. Reusing templates
       5. Understanding dependency injection
       6. Services
       7. Modules in AngularJS
       8. Project organization
       9. Summary
   13. 6. Understanding Angular Views and Models
       1. Dissecting and understanding the MEAN.JS generator
          1. Differentiating MEAN.JS and MEAN.io
       2. Scaffolding the application
          1. The application anatomy
       3. Refactoring the API
          1. The angular-gravatar image directive
       4. Testing the speakers' API routes
       5. Summary
   14. 7. Testing Angular SPA with Karma and Protractor
       1. Testing concepts
       2. Introducing Jasmine
       3. Configuring Karma (unit testing)
          1. Reviewing the speaker controller test
          2. Running a Karma test
          3. Reviewing the speaker model test
          4. Karma testing with WebStorm
       4. Configuring Protractor (e2e testing)
          1. Configuring the e2e testing folder
          2. Starting the Selenium server
       5. Summary
   15. 8. Deploying the Application to the Cloud
       1. Hosting the project on GitHub
       2. Continuous application development
       3. Automatic deployment from GitHub
          1. Setting up a Shippable account
          2. Setting up a Heroku account
          3. Additional notes on Heroku deployment
       4. Hands-on deployment
          1. Checking the build process
          2. Checking the application in production
       5. Final notes on SPA
       6. Summary
   16. Index