Cover image for Web Development with Angular and Bootstrap - Third Edition

Web Development with Angular and Bootstrap - Third Edition

Author Aki Iskandar , Sridhar Rao Chivukula
Release Date: 2019/08/01
ISBN: 9781788838108
Topic:
0%
357
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Combine the power of Angular, Bootstrap 4, FlexLayout, and Angular Material Design to build elegant user interfaces

Key Features

  • Learn to combine Angular 6 with Bootstrap 4 to design highly intuitive and responsive web interfaces
  • Explore the design principles for professional web layout with Angular Material, Flexbox, and Bootstrap
  • Avoid potential stumbling blocks in web development with the help of expert tips

Book Description

Angular and Bootstrap have undergone a major overhaul to embrace emerging web technologies that help developers build cutting-edge web applications. This book is for you if you're ready to enhance your web development skills beyond HTML and CSS.

It begins with the basics of Angular and Bootstrap 4, along with an introduction to ES and TypeScript. You'll be able to refine your skills further with flex-layout's Responsive API to specify different layouts and sizing for various screen sizes. By using Angular Material, you'll discover how to make your web pages look professional. You'll study how to format output using Angular's pipes and use the built-in router to set up routes for all your components. With the help of Webpack, you'll be able to easily wrap up your project and use SASS to make things pretty. Furthermore, you can validate the forms you've built and debug your application. This book will also guide you in transitioning from Bootstrap to Angular smoothly, hooking up with a server, and using Firebase as the persistence layer. You'll not only develop the right skills, but also gain insights into the potential stumbling blocks and tips for how to avoid them.

By the end of this book, you'll have a stunning e-commerce application running, along with the confidence to build your own applications.

What you will learn

  • Develop Angular single-page applications using an ecosystem of helper tools
  • Get familiar with Bootstrap's new grid and helper classes
  • Embrace TypeScript and ECMAScript to write more maintainable code
  • Implement custom directives for Bootstrap 4 with the ng2-bootstrap library
  • Understand the component-oriented structure of Angular and its router
  • Use the built-in HTTP library to work with API endpoints
  • Manage your app's data and state with observables and streams
  • Combine Angular and Bootstrap 4 with Firebase to develop a solid example

Who this book is for

Whether you already know a little about Bootstrap or Angular or you're a complete beginner, this book will enhance your capabilities in both frameworks. It will guide you in easily building a fully functional web app. Working knowledge of HTML, CSS, and JavaScript is required to get a better understanding of Bootstrap and Angular.

Downloading the example code for this ebook: You can download the example code files for this ebook on GitHub at the following link: https://github.com/PacktPublishing/Web-Development-with-Angular-and-Bootstrap-Third-Edition. If you require support please email: [email protected]

Table of Contents

  1. Title Page
  2. Copyright and Credits
    1. Web Development with Angular and Bootstrap Third Edition
  3. Dedication
  4. About Packt
    1. Why subscribe?
  5. Contributors
    1. About the authors
    2. About the reviewer
    3. Packt is searching for authors like you
  6. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the example code files
      2. Conventions used
    4. Get in touch
      1. Reviews
  7. Quick Start
    1. Angular's evolution
    2. Angular's building blocks
      1. Components
      2. Templates
      3. Directives
      4. Modules
      5. Services
      6. Dependency injection
    3. Setting up your development environment
    4. Writing your first Angular application
      1. Using your development environment
        1. Location of your files
        2. Generating our to-do list application
        3. Serving up our to do list application
    5. Angular basics
      1. Components
        1. Code listing for the to-do list application
      2. Interpolation
      3. Templating and styling
      4. Property binding
      5. Event binding
    6. Our sample project
      1. Annotated photo album
      2. Design principles
      3. Wireframes
        1. Wireframing tools
      4. Wireframes for our annotated photo album
        1. Home page
        2. Dashboard
        3. Image upload
        4. Photo preparation
        5. Create Album
        6. Photo listing
        7. Photo album listing
        8. Workbench
        9. Album viewer
    7. Paper prototyping
    8. Summary
  8. ECMAScript and TypeScript Crash Course
    1. The (quick) roadmap
    2. The relationship between JavaScript and TypeScript
      1. A series of fortunate events for JavaScript
        1. Chromium project
        2. Javascript frameworks
        3. ECMAScript 2015
    3. TypeScript crash course
      1. Transpilation versus compilation 
        1. let
          1. Const
      2. Data typing
        1. Objects 
        2. JSON 
        3. JavaScript runtime environment
          1. Arrays
          2. TypedArray
          3. Maps 
          4. WeakMap
          5. Set
          6. WeakSet
          7. Classes
          8. Interfaces
          9. Inheritance
          10. Destructuring 
          11. Template strings
          12. for-of loop
          13. Decorators
          14. Promises
          15. Modules
          16. Default exports
    4. Summary
  9. Bootstrap - Grid Layout and Components
    1. A word about what this chapter is not
      1. Our example application
        1. Game plan
      2. Sass crash course
        1. What is Sass?
        2. Compass framework
        3. Two SASS styles
        4. Installing Ruby 
        5. Installing Sass
        6. Online tools for Sass
        7. Offline tools for Sass
        8. Sass features and syntax
          1. Nesting
          2. Variables
          3. Mathematical operations
          4. Imports
          5. Extend
          6. Mixins
          7. Placeholders
          8. Built-in functions 
          9. Custom functions
      3. Bootstrap crash course
        1. What is Bootstrap?
        2. Motivation
        3. Bootstrap's role in our example application
        4. Installing Bootstrap
        5. Bootstrap's responsive grid system
          1. The container
          2. The row
          3. The column
          4. Differing viewport sizes
        6. Bootstrap components
          1. Button components
          2. Alert components
          3. Navbar component
          4. Modal components
      4. Listing Carousel – a formal introduction
        1. Idea generation/concept
        2. Analysis — feasibility study
        3. Requirement gathering
        4. Wireframes
        5. Implementation
          1. Installing our interim web server
          2. Welcome page
          3. Signup
          4. Login
          5. Listings
          6. Create listing
          7. Edit listing
          8. Wireframes collection
    2. Summary
  10. Routing
    1. What is routing in Angular?
      1. Creating our application's shell using the CLI
      2. First things first – basic concepts
        1. Base Href
        2. RouterLink and RouterLinkActive
      3. Configuring routes for our application
      4. Parameterized routes
      5. Child routes
      6. Route guards
      7. Completing our route configuration
      8. Bootstrap navigation bar and router links directives
      9. Specifying the location for rendering the component templates
      10. Running our application
      11. Routing strategies
    2. Summary
  11. Flex-Layout - Angular's Responsive Layout Engine
    1. Why this chapter was included in the book
      1. The four available techniques for the layout of our components
        1. Table
        2. Positioning using float, and clear
        3. FlexBox CSS
        4. CSS Grid
      2. Why FlexBox CSS is probably the best option
    2. What is Flex-Layout and why should you use it?
      1. Integrating Flex-Layout
      2. The Flex-Layout API
      3. Design strategies when using FlexBox
        1. Associating our components with the chapters and topics in this book
      4. Implementing our selected wireframes
        1. The Create Listing wireframe
        2. The Edit Listing wireframe
    3. Summary
  12. Building Angular Components
    1. Angular application architecture – a tree of components
      1. Architecting an Angular application
        1. Breaking up your components into sub-components
          1. Component responsibilities
    2. Annotations 
      1. @Component
        1. Properties of the @Component decorator
          1. selector
          2. template and templateUrl
          3. styles and stylesUrls
          4. View encapsulation
        2. Module versus NgModule
        3. Properties of the @NgModule decorator
      2. Content projection
        1. Projecting multiple sections
      3. Life cycle hooks
        1. Most common life cycle hooks
      4. Component interface – inputs and outputs, and the flow of data
      5. Our implementation of the components for our three pages
    3. Summary
  13. Templates, Directives, and Pipes
    1. Templates
    2. Directives
      1. Attribute directives
      2. Structural directives
        1. NgFor
          1. Accessing the index value of the iteration
      3. Built-in directives
        1. NgIf
        2. NgSwitch, NgCase, and NgDefault
        3. NgStyle
        4. NgClass
        5. NgNonBindable
      4. Data binding using the NgModel directive
        1. Event binding
        2. Property binding
        3. Custom directives
      5. Pipes
        1. Custom pipes
    3. Summary
  14. Working with NG Bootstrap
    1. Integrating NGB 
      1. Installing NBG
      2. Why use NGB?
      3. Creating our playground for NGB (and Angular Material, and more)
        1. Creating a playground directory
        2. Creating the playground component class
        3. Creating the playground template file
        4. Creating the playground CSS file
        5. Creating the playground menu item
    2. NGB widgets
      1. Collapse
        1. Our parent component
        2. Our NGB collapse component class
        3. Our NGB collapse component template
        4. Importations and declarations 
      2. Modal
        1. Our NGB modal component class
        2. Our NGB modal component template
        3. Importations and declarations 
      3. Carousel
        1. Our NGB carousel component class
        2. Our NGB carousel component template
    3. Implementing NGB into our example application
    4. UX design rules of thumb
      1. Keep it clean
      2. Keep it functional
      3. Keep it obvious
    5. Summary
  15. Working with Angular Material
    1. What is Angular Material?
    2. Installing Angular Material
    3. Categories of components
      1. Navigation
        1. Navigation components using schematics
        2. Custom Material menus and navigation
        3. Custom sidebar menus
      2. Cards and layout 
        1. Material cards
        2. Lists
        3. Lists with dividers
        4. Navigation lists
        5. Accordions and expansion panels
        6. Steppers
        7. Tabs
      3. Form controls
      4. Buttons and indicators
      5. Popups and modals
      6. Data tables
    4. Summary
  16. Working with Forms
    1. Bootstrap forms
      1. What are forms?
      2. Bootstrap form classes 
      3. Bootstrap form classes – extended 
        1. Sizing
        2. Readonly
        3. Inline forms
        4. Forms using Bootstrap grid classes
        5. Disabled 
        6. Help text inside forms
        7. Displaying input elements as plain text
    2. Angular forms
      1. Template-driven forms
        1. Template-driven forms – pros
        2. Template-driven forms – cons
        3. Template-driven forms – important modules
        4. Building our login form
      2. Model-driven forms, or reactive forms
        1. Model-driven forms – pros
        2. Model-driven forms – cons
        3. Model-driven forms – important modules
        4. Reactive forms – registration form example
      3. Angular form validations
        1. Template-driven form validation
        2. Reactive form, or model-driven form, validations
      4. Submitting form data 
    3. Summary
  17. Dependency Injection and Services
    1. What is DI?
    2. Generating services and interfaces
    3. Guarding against code minification
    4. Summary
  18. Integrating Backend Data Services
    1. ListingApp – an overview
    2. Fundamental concepts for Angular applications
      1. Strongly typed languages
      2. Typescript interfaces
      3. Observables
      4. NoSQL databases concept
      5. CRUD operations – overview
    3. ListingApp – technical requirements
      1. Building APIs for ListingApp
      2. Google Firestore database
    4. Angular HttpClient
      1. HttpClient and HTTP verbs
        1. HTTP GET
        2. HTTP POST
        3. HTTP PUT
        4. HTTP DELETE
        5. HTTP via promises
    5. Integrating backend services 
      1. Integrating Angular HTTP with backend APIs
      2. Integrating Angular HTTP with Google Firebase
    6. Summary
  19. Unit Testing
    1. Introduction to testing frameworks
      1. About the Jasmine framework
      2. About the Karma framework
    2. Angular test automation
      1. Testing Angular components
      2. Testing directives
      3. Testing Angular routing
      4. Testing dependency injection
        1. What is dependency injection?
        2. Testing Angular services
      5. Testing HTTP
    3. Summary
  20. Advanced Angular Topics
    1. Custom directives
    2. Custom form validations
    3. Building single-page applications
    4. User authentication
      1. User authentication with Firebase
      2. User authentication with Auth0
    5. Summary
  21. Deploying Angular Applications
    1. Deploying Angular applications
      1. Compilation options for Angular applications
        1. What is just-in-time compilation?
        2. What is ahead-of-time compilation? 
      2. Deploying a standalone Angular application
    2. Deploying composite Angular applications
      1. Creating and deploying multiple Angular applications
        1. Packing the Angular project as an npm package
    3. Deploying Angular apps to GitHub Pages
      1. Creating and deploying applications in GitHub Pages
    4. Summary
  22. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think
3.15.6.77