You are previewing Learning Single-page Web Application Development.
O'Reilly logo
Learning Single-page Web Application Development

Book Description

Build powerful and scalable single-page web applications using a full stack JavaScript environment with Node.js, MongoDB, AngularJS, and the Express framework

In Detail

Learning Single-page Web Application Development is a journey through application development using the MEAN stack with JavaScript on the server side and client side, covering concepts such as RESTful, authentication and session on SPA. You will build large-scale applications. You will use a JavaScript environment with Node.js on the server, MongoDB as the database, and AngularJS on the frontend.

Everything is integrated with the Bower dependency manager, Yeoman, and other modern tools to speed up your development process. You will deploy your application to the cloud and learn how to prepare your directory structure to scale and grow.

Learning Single-page Web Application Development will give you an overview of AngularJS and RESTful APIs, and guide you in learning how to leverage single page development tools to create efficient and effective applications.

What You Will Learn

  • Streamline your development work with Bower, Yeoman, and Grunt.js
  • Configure an AngularJS application using modules
  • Test AngularJS applications with Karma and Protractor
  • Create a conference web application
  • Start from scratch and refactor your applications using Yo Express generator
  • Use the new features of Express 4 such as Router, static middleware, and more
  • Set up user authentication and store sessions with Passport
  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    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