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