AngularJS Web Application Development Blueprints

Book description

A practical guide to developing powerful web applications with AngularJS

In Detail

This book is a practical guide that aims to help you learn how to utilize AngularJS and experience the joy of building full-fledged applications with minimal code in no time at all.

The book starts by explaining the basics of AngularJS and helps you get comfortable with the terms and concepts surrounding it. It then walks you through the various tools, frameworks, and workflows that will help you be more productive. As you go through the book, you will learn how to build applications spanning various realms. You will build social apps using publically available APIs and responsive, mobile- and tablet-friendly personal finance applications. You will see how to build a full-stack content management system, and build an e-commerce application on the cloud platform. Finally, this book will teach you the intricacies of what it takes to get your application deployed on a production server.

What You Will Learn

  • Develop your understanding of AngularJS and the essentials of the single-page application
  • Build complete and professional applications spanning across different areas, such as e-commerce, content management systems, social media apps, mobile web apps, and much more
  • Work with REST web services and the Facebook APIs
  • Use directives and learn how to write your own custom directives
  • Upload images and write to databases directly from your AngularJS app
  • Deploy your apps on the highly scalable AWS architecture
  • Create rapid, clickable prototypes to get a better understanding of how your application will look and feel
  • Improve your page load times and get your app ready for production deployment

Publisher resources

Download Example Code

Table of contents

  1. AngularJS Web Application Development Blueprints
    1. Table of Contents
    2. AngularJS Web Application Development Blueprints
    3. Credits
    4. About the Author
    5. About the Reviewers
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. About JavaScript MVC frameworks
      2. How AngularJS was born
      3. The idea behind this book
      4. What this book covers
      5. What you need for this book
        1. Software versions
        2. Copying the code files
      6. Who this book is for
      7. Conventions
      8. Reader feedback
      9. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Introduction to AngularJS and the Single Page Application
      1. Delving into Single Page Apps
      2. Anatomy of a simple AngularJS app
      3. Models and views
      4. Building an Address Book App
        1. Understanding the scope in AngularJS
      5. Styling the app
        1. Sorting the contacts alphabetically
      6. Adding contacts to the Address Book
        1. The ng-show and ng-hide directives
      7. Summary
    9. 2. Setting Up Your Rig
      1. Setting up Node.js
        1. Creating a simple Node.js web server with ExpressJS
      2. Setting up Grunt
        1. Installing Grunt-cli
        2. Creating the package.json file
        3. Creating your Grunt tasks
        4. Grunt tasks to merge and concatenate files
        5. Running shell commands via Grunt
      3. Yeoman – the workflow tool
        1. Installing Yeoman
        2. Running your app
      4. Unit testing with Karma
      5. Using Protractor for End-to-End tests
        1. Installing Selenium Server
        2. Understanding the example_spec.js file
        3. Understanding the conf.js file
        4. Writing your own Protractor test cases
      6. Summary
    10. 3. Rapid Prototyping with AngularJS
      1. Understanding the application that we will Prototype
      2. Introducing Grid Layouts and Bootstrap
      3. Understanding the grid system
      4. Introducing Angular UI
        1. UI-Utils
        2. UI-Modules
        3. UI-Bootstrap
        4. NG-Grid
        5. UI-Router
        6. IDE Plugins
      5. Prototyping the Healthy Living website
        1. Adding the ui.bootstrap dependency
        2. Creating the navigation bar
        3. Adding the carousel
        4. Tweaking the hero unit
        5. Adding the three content blocks
        6. Creating a new view
        7. Understanding routes
        8. Building the articles view
        9. Accordions using Angular Bootstrap
        10. Building the image gallery
        11. Gallery view using Bootstrap Thumbnail
        12. Adding the star rating
        13. Building data grids using NG-Grid
        14. Adding the NG-Grid component
        15. Grouping data in NG-Grid
        16. Excel-style editing in NG-Grid
        17. Creating a modal window to add subscribers
        18. Real-time form validations
      6. Summary
    11. 4. Using REST Web Services in Your AngularJS App
      1. Understanding the response from a REST API
        1. Testing a RESTful web service
      2. Jump starting your app development with Angular Seed
        1. Files and folders in Angular Seed
        2. Adding Bootstrap libraries
        3. Starting your Node web server
      3. Mark-up our Layout
      4. Creating the routes
      5. Understanding AngularJS services
      6. Writing your first factory service
        1. Dependency Injection
        2. Coding the partial
        3. Calling the REST web service using $http
      7. Using promise for asynchronous calls
      8. Displaying data from the JSON response
      9. Unit testing our application
      10. Mocking $http during Unit testing
      11. Creating a Pinterest style layout
      12. Adding actions to the buttons
      13. Summary
    12. 5. Facebook Friends' Birthday Reminder App
      1. Understanding the Facebook SDK
        1. The Social Graph
        2. The Graph API
        3. The Graph API Explorer
        4. Creating your Facebook app
      2. Setting up our project
        1. Running your application
      3. Delving into AngularJS directives
        1. What is a directive?
        2. Importance of naming conventions for directives
        3. The anatomy of a directive
        4. Writing our first directive
      4. Adding a Facebook login
        1. Adding the fb-root div element
        2. Loading the Facebook SDK
        3. Understanding $watch and $digest
        4. When to use $apply
      5. Getting the user's friend list
      6. Getting your friends' profile pictures and birthdays
        1. Requesting additional permission with FB.login
        2. Understanding isolated scope
      7. Adding some CSS styles
        1. Changing the routes
      8. Adding in the logout link
      9. Writing automated tests
        1. Writing Unit tests with Karma
        2. Writing End-to-End tests using Protractor
      10. Summary
    13. 6. Building an Expense Manager Mobile App
      1. Understanding HTML5 Web Storage
        1. localStorage
        2. sessionStorage
      2. Building the Expense Manager App
      3. Building the Add Expense form
        1. What is $rootScope?
        2. Understanding the .run block
        3. Creating a value service to store CategoryList
        4. Validating the Add Expense form
        5. Using localStorage to save data
      4. Building a bar chart directive based on D3
      5. Summarizing the expenses by categories
        1. Creating our bar chart directive
      6. Making the app responsive
        1. Adding the CSS media query
        2. Scaling the D3 chart based on window size
      7. Adding touch events
        1. Enabling swipe gestures using ngTouch
      8. Adding page transitions using ngAnimate
        1. Loading the ngAnimate module
        2. Adding CSS3 transitions
      9. Making the app feel like a native app
        1. Adding touch icons
        2. Running the app in fullscreen mode
      10. Adding additional features
      11. Summary
    14. 7. Building a CMS on the MEAN Stack
      1. Why the MEAN stack?
      2. Getting started with the MEAN stack
        1. Setting up MongoDB
        2. Setting up ExpressJS and MongooseJS
      3. Building the server-side app
        1. Creating the Mongoose schemas
        2. Creating CRUD routes
          1. Adding a new entry to the collection
          2. Updating a collection
          3. Deleting a collection item
          4. Displaying a single record
      4. Securing your admin section
        1. Using bcrypt to encrypt passwords
        2. Adding a new admin user
        3. Creating the route for authenticating login
        4. Creating the logout route
        5. Writing the sessionCheck middleware
      5. Integrating AngularJS with an ExpressJS project
      6. Generating SEO-friendly URLs using HTML5 mode
      7. Building the admin section for CRUD operations
        1. Creating the routes for the admin section
        2. Building the factory services
        3. Building the controllers for the admin section
        4. Setting up the admin page layout
        5. Building the listing view for the admin section
        6. Setting up authentication in AngularJS
          1. Creating our login page
      8. Building a custom module for global notification
        1. Building and initializing the message.flash module
        2. Building the message.flash factory service
        3. Setting up $broadcasts
        4. Building the directive for the message.flash module
        5. Setting a flash message
        6. Creating our Add-Edit page controller
        7. Creating our Add-Edit view
        8. Writing a custom filter to autogenerate the URL field
        9. Adding the WYSIWYG editor
      9. Setting up an Interceptor to detect responses
      10. Building the frontend of our CMS
        1. Building our navigation bar directive
        2. Building the admin-login directive
      11. Displaying the content of a page
        1. Setting the default home page
      12. Summary
    15. 8. Scalable Architecture for Deployments on AWS
      1. Understanding the various services in Amazon AWS
      2. Delving into AWS deployment architectures
        1. The EC2 server-based architecture
        2. The Server-less Architecture
      3. Deploying our app in a Server-less Architecture on AWS
        1. Mapping a domain to S3
        2. Mapping the S3 bucket to a CloudFront distribution
      4. Getting your app ready for production deployment
        1. Improving the page-load time of your app
        2. Setting Expires headers
      5. Performance
      6. Summary
    16. 9. Building an E-Commerce Store
      1. Backend as a Service
      2. Building a BaaS platform on AWS
        1. Setting up an S3 Bucket with public read access
        2. Setting up the CORS policy on your S3 bucket
        3. Creating our DynamoDB tables
        4. Creating the Identity and Access Management (IAM) role
      3. Creating our e-commerce app
        1. Building nested views using UI-Router
        2. Mapping states to URL, views, and controllers
      4. Prototyping our application
        1. Setting up our index.html file
        2. Creating the controllers
        3. Creating the product partials
        4. Adding animations to the view transitions
          1. Adding in the CSS transition effects
      5. Creating our application-level controller
        1. Adding a Facebook login
      6. Integrating AWS JS SDK with our application
        1. Creating the AWS service provider
      7. Building our Add Products page
        1. Saving data in DynamoDB tables
        2. Creating the view for the add product form
        3. Building the controller for the add products view
        4. Uploading images to S3
        5. Fetching the products lists for a category
        6. Using resolves to preload data
      8. Creating our product details page
        1. Adding products to cart
        2. The checkout page
        3. Saving the orders
      9. Summary
    17. A. AngularJS Resources
      1. Official resources
      2. Recommended AngularJS modules
      3. Boiler plates
      4. Learning resources
      5. Good friends with AngularJS (third-party tools and services)
      6. Core team members and knowledgeable people to follow
    18. Index

Product information

  • Title: AngularJS Web Application Development Blueprints
  • Author(s):
  • Release date: August 2014
  • Publisher(s): Packt Publishing
  • ISBN: 9781783285617