Cover image for AngularJS by Example

AngularJS by Example

Author Chandermani
Release Date: 2015/03/01
ISBN: 9781783553815
Topic:
0%
83
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Learn AngularJS, and tackle the challenges of modern web development by creating your own applications with these practical examples you can use and adapt

In Detail

AngularJS makes web JavaScript web development less painful and more organized it's unsurprising that today it's one of the most popular tools in web development.

AngularJS by Example helps you get started with this essential web development framework quickly and easily, guiding you through AngularJS by showing you how to create your own real-world applications. By adopting this approach, you can bridge the gap between learning and doing immediately, as you follow the examples to learn the impressive features of Angular and experience a radically simple and powerful approach to web development.

You'll begin by creating a simple Guess the Number game, which will help you get to grips with the core components of Angular, including its MVC architecture, and learn how each part interacts with one another. This will give you a solid foundation of knowledge from which you can begin to build more complex applications, such as a 7 minute workout app and an extended personal trainer app. By creating these applications yourself, you will find out how AngularJS manages client-server interactions and how to effectively utilize directives to develop applications further. You'll also find information on testing your app with tools such as Jasmine, as well as tips and tricks for some of the most common challenges of developing with AngularJS.

AngularJS by Example is a unique web development book that will help you get to grips with AngularJS and explore a powerful solution for developing single page applications.

What You Will Learn

  • Get to grips with Angular's Model-View-Controller architecture
  • Gain a understanding of single page applications from an AngularJS perspective
  • Manage code organization using modules and component dependencies with the Dependency Injection Framework
  • Find out how to use AngularJS directives to extend the behavior of HTML on your web page
  • Effectively use a range of JavaScript tools, from extending your app with jQuery plugins, to testing with Jasmine
  • Create forms for your single page applications and see how Angular helps you to bind, validate, and submit form data

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. AngularJS by Example
    1. Table of Contents
    2. AngularJS by Example
    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. Getting Started
      1. The basics of Model View Controller
      2. The customary Hello Angular app (Guess the Number!)
      3. Setting up a development server
      4. Building Guess the Number!
      5. The app model
      6. The controller
      7. The app view
        1. Interpolation
        2. Directives
        3. Expressions
        4. AngularJS bindings
      8. Revisiting the controller
      9. Scope
      10. App bootstrapping
      11. Tools
      12. Resources
      13. Summary
    9. 2. Building Our First App – 7 Minute Workout
      1. What is 7 Minute Workout?
        1. Downloading the codebase
      2. Code organization
        1. Organizing the JavaScript code
      3. The 7 Minute Workout model
      4. Adding app modules
      5. The app controller
        1. Dependency injection
          1. Dependency Injection 101
          2. Dependency injection in Angular
            1. Handling minification
            2. Dependency annotations
        2. Controller implementations
          1. Tracking the duration of an exercise using the $interval service
        3. Verifying the implementation
        4. Implementing exercise transitions
        5. Using $watch to watch the models changes
          1. Exploring $watch
          2. Implementing transitions using $watch
        6. Using the AngularJS Promise API for exercise transitions
          1. The basics of promises
      6. The 7 Minute Workout view
        1. Image path binding with ng-src
        2. Using ng-style with the Bootstrap progress bar
      7. Adding start and finish pages
        1. Understanding SPAs
          1. View layouts for SPAs using ng-view
          2. Defining 7 Minute Workout routes
          3. The config/run phase and module initialization
          4. View navigation in the controller using $location
          5. Working with the $location service
      8. Learning more about an exercise
        1. Adding descriptions and video panels
          1. Working with ng-include
          2. Working with ng-repeat
      9. Displaying the remaining workout time using filters
        1. Creating a seconds-to-time filter
          1. Understanding AngularJS filters
          2. Implementing the secondsToTime filter
      10. Adding the next exercise indicator using ng-if
      11. Summary
    10. 3. More AngularJS Goodness for 7 Minute Workout
      1. Formatting the exercise steps
        1. Understanding ng-bind-html
        2. Using ng-bind-html with data of the exercise steps
      2. Tracking exercise progress with audio clips
        1. Implementing audio support
          1. Implementing WorkoutAudioController
          2. Exploring the audio synchronization issue
          3. AngularJS dirty checking and digest cycles
            1. Summarizing our learnings
          4. Fixing the next-up exercise's audio synchronization issue
      3. Pausing exercises
        1. Implementing pause/resume in WorkoutController
        2. Adding the view fragment for pausing/resuming
          1. Pausing/resuming overlays using mouse events
          2. Pausing/resuming overlays with plain CSS
          3. CSS class manipulation using ng-class
        3. Stopping audio on pause
        4. Using the keyboard to pause/resume exercises
      4. Enhancing the workout video panel
        1. Refactoring the video panel and controller
        2. Video playback in the pop-up dialog
          1. Integrating the ui.bootstrap modal dialog
      5. Animations with AngularJS
        1. AngularJS CSS animation
        2. AngularJS JavaScript animation
        3. Adding animation to 7 Minute Workout
      6. Workout history tracking using Angular services
        1. AngularJS services primer
          1. Creating AngularJS services
            1. Creating services with the constant and value services
            2. Creating services using a service
            3. Creating services with a factory service
            4. Creating services with a provider service
        2. Implementing workout history tracking
          1. The WorkoutHistoryTracker service
            1. Services and scopes
            2. Service implementation continued...
          2. Integrating the WorkoutHistoryTracker service with a controller
        3. Adding the workout history view
        4. AngularJS eventing
        5. Enriching history tracking with AngularJS eventing
        6. Persisting workout history in browser storage
        7. Filtering workout history.
        8. Filtering and ordering using ng-repeat
          1. The filter object of AngularJS filters
          2. The AngularJS orderBy filter
          3. Special ng-repeat properties
      7. Summary
    11. 4. Building Personal Trainer
      1. The Personal Trainer app – the problem scope
        1. Personal Trainer requirements
      2. The Personal Trainer model
        1. Sharing the workout model
        2. The model as a service
      3. The Personal Trainer layout
        1. The Personal Trainer navigation with routes
          1. Integrating left and top navigation
      4. Implementing the workout and exercise list
        1. WorkoutService as a workout and exercise repository
        2. Exercise and workout list controllers
        3. Exercise and workout list views
      5. Building a workout
        1. Building left nav
        2. Adding the WorkoutBuilderService service
        3. Adding exercises using exercise nav
        4. Implementing WorkoutDetailController
          1. Route resolving
          2. Resolving routes not found!
          3. Implementing WorkoutDetailController continued…
        5. Implementing the workout builder view
        6. AngularJS forms
          1. AngularJS form constructs
          2. The ng-model directive
            1. Using ng-model with input and textarea
            2. Using ng-model with select
          3. Controlling model updates with ng-model-options (Angular 1.3)
          4. ng-model – beyond data binding
          5. Understanding NgModelController
          6. Implementing a decimal-to-integer formatter and parser
          7. AngularJS validation
          8. The AngularJS model state
          9. Workout builder validation
            1. How validation works (pre-Angular 1.3)
            2. How validation works (Angular 1.3)
            3. Managing validation error messages with ng-messages (Angular 1.3)
          10. Custom validation for an exercise count
          11. Saving the workout
        7. The AngularJS form directive and form validation
          1. The FormController API
          2. Fixing the saving of forms and validation messages
          3. Fixing unwarranted model updates
          4. Resetting the form
          5. AngularJS $routeParams
          6. Dynamically generated inputs and forms
            1. Validating exercise duration with ng-form
        8. Revisiting Angular scopes
      6. Summary
    12. 5. Adding Data Persistence to Personal Trainer
      1. AngularJS and server interactions
        1. Setting up the persistence store
          1. Seeding the database
      2. $http service basics
      3. Personal Trainer and server integration
        1. Loading exercise and workout data
          1. Loading exercise and workout lists from a server
            1. Implementing the WorkoutService provider
          2. Mapping server data to application models
          3. Understanding promise chaining
          4. Loading exercise and workout data from the server
          5. Fixing workout and exercise detail pages
          6. Creating and resolving custom promises
            1. The $q "when" function
          7. Fixing workout and exercise detail pages continued…
            1. Route resolutions and promises
        2. Performing CRUD on exercises/workouts
          1. Fixing and creating a new workout
          2. Cross-domain access and AngularJS
          3. Using JSONP to make cross-domain requests
          4. Cross-origin resource sharing
      4. Getting started with $resource
        1. RESTful API services
        2. $resource basics
        3. Understanding $resource actions
        4. $resource action invocation
      5. Using $resource to access exercise data
        1. The hidden cost of hiding asynchronicity
      6. Exercising CRUD with $resource
        1. The $resource service with non-RESTful endpoints
      7. Request/response interceptors
        1. Using an interceptor to pass the API key
      8. AngularJS request/response transformers
      9. Handling routing failure for rejected promises
        1. Handling workouts not found
      10. Fixing the 7 Minute Workout app
      11. Summary
    13. 6. Working with Directives
      1. Directives – an introduction
      2. Anatomy of a directive
        1. Creating a workout-tile directive
        2. Exploring the ng-click directive
      3. Building a remote validation directive to validate the workout name
        1. The remote-validator directive (for v1.3 or less)
          1. The require directive definition
          2. The link function
        2. The remote-validator directive in Angular 1.3
      4. Model update on blur
        1. Using priority to affect the order of execution of the compile and link functions
        2. Life cycle of a directive
        3. The priority and multiple directives on a single element
      5. Implementing a remote validation clues directive
        1. Angular $compile service
        2. Directive controller function
        3. Inter-directive communication – integrating busy-indicator and remote-validator
          1. Fixing remote-validator – pre-Angular 1.3
          2. Fixing remote-validator (Angular 1.3)
        4. Injecting HTML in the directive compile function
        5. Understanding directive templates and transclude
      6. Understanding directive-isolated scopes
        1. Creating the AJAX button directive
      7. AngularJS jQuery integration
        1. Integrating the Carousel jQuery plugin with Workout Runner
        2. Tunneling jQuery events with directives
      8. Summary
    14. 7. Testing the AngularJS App
      1. The need for automation
      2. Testing in AngularJS
        1. Types of testing
        2. Testing who and when
        3. The AngularJS testing ecosystem
      3. Getting started with unit testing
        1. Setting up Karma for unit testing
        2. Managing script dependencies with Bower
        3. Unit testing AngularJS components
          1. Unit testing filters
          2. Unit testing using the ngMock module
          3. Unit testing controllers
            1. Setting up controller dependencies
          4. Unit testing WorkoutController
            1. Debugging unit tests in Karma
            2. Unit testing WorkoutController continued...
            3. Using Jasmine spies to verify dependencies
            4. Testing the $interval and $timeout implementations
            5. Testing workout pause/resume
          5. Unit testing services
            1. Mocking HTTP request/response with $httpBackend
            2. Testing WorkoutService
          6. Unit testing directives
            1. Testing remote-validator
            2. Testing remote-validator and busy-indicator together
            3. Testing directives with templateUrl
          7. Unit testing routes and resolve
      4. Getting started with E2E testing
        1. Introduction to Protractor
        2. Setting up Protractor for E2E testing
        3. Writing E2E tests for the app
        4. Setting up backend data for E2E testing
          1. Mocking the server backend in E2E testing
        5. More E2E tests
          1. Testing Workout Runner
          2. Page objects to manage E2E testing
      5. Summary
    15. 8. Handling Common Scenarios
      1. Building a new app
        1. Seed projects
        2. Yeoman
      2. Building multilingual apps (internationalization)
        1. Angular I18n support
          1. Locale changes using angular-dynamic-locale
          2. Using angular-translate for text translations
      3. Handling authentication and authorization
        1. Cookie-based authentication
        2. Token-based authentication
        3. Handling authorization
          1. Adding authorization support
            1. Sharing user authentication context
            2. Restricting routes
            3. Conditionally rendering content based on roles
      4. Communication and data sharing patterns
        1. Using a URL to share data across pages
        2. Using $scope
          1. Using $rootScope
        3. Using services
        4. Inter-directive communication
        5. Using events
      5. Performance
        1. Performance guidelines
          1. Keeping the page/view small
          2. Optimizing watches for read-once data
          3. Hiding (ng-show) versus conditional rendering (ng-if/ng-switch) content
          4. Expressions being watched should not be slow
          5. Minimizing the deep model watch
          6. Handling large datasets with ng-repeat
          7. Avoiding mouse-movement tracking events
          8. Avoiding calling $scope.$apply
          9. Lazy-loading, minification, and creating multiple SPAs
            1. Breaking applications into multiple SPAs
            2. Lazy-loading modules
          10. Caching remote data wherever appropriate
          11. Using Batarang to measure performance
      6. Useful third-party libraries
      7. Summary
    16. Index
3.144.84.155