Book Image

Angular 6 for Enterprise-Ready Web Applications

By : Doguhan Uluca
Book Image

Angular 6 for Enterprise-Ready Web Applications

By: Doguhan Uluca

Overview of this book

Angular 6 for Enterprise-Ready Web Applications follows a hands-on and minimalist approach demonstrating how to design and architect high quality apps. The first part of the book is about mastering the Angular platform using foundational technologies. You will use the Kanban method to focus on value delivery, communicate design ideas with mock-up tools and build great looking apps with Angular Material. You will become comfortable using CLI tools, understand reactive programming with RxJS, and deploy to the cloud using Docker. The second part of the book will introduce you to the router-first architecture, a seven-step approach to designing and developing mid-to-large line-of-business applications, along with popular recipes. You will learn how to design a solid authentication and authorization experience; explore unit testing, early integration with backend APIs using Swagger and continuous integration using CircleCI. In the concluding chapters, you will provision a highly available cloud infrastructure on AWS and then use Google Analytics to capture user behavior. By the end of this book, you will be familiar with the scope of web development using Angular, Swagger, and Docker, learning patterns and practices to be successful as an individual developer on the web or as a team in the Enterprise.

Related Content you might be interested in

Current Title:

Small book image
Angular 6 for Enterprise-Ready Web Applications
Doguhan Uluca
May, 2018 | 512 pages
Small book image
Learning Angular
Pablo Deeleman | Aristeidis Bampakos
Sep, 2020 | 430 pages
Small book image
Learning Angular
Pablo Deeleman | Aristeidis Bampakos
Feb, 2023 | 446 pages
Small book image
TypeScript 2.x for Angular Developers
Chris Nwamba
Dec, 2017 | 240 pages
Table of Contents (14 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Setting Up Your Development Environment
Setting Up Your Development Environment
CLI package managers
Git and GitHub Desktop
Node.js
Visual Studio Code
Automation for Windows and macOS
Summary
Further reading
2
Create a Local Weather Web Application
Create a Local Weather Web Application
Introduction to Angular
What's new in Angular 6?
Angular in Full-Stack Architecture
Generate your Angular application
Optimizing VS Code for Angular
Planning a feature road map using Waffle
Crafting UI elements using components and interfaces
Using Angular Services and HttpClient to retrieve data
Transform data using RxJS
Summary
3
Prepare Angular App for Production Release
Prepare Angular App for Production Release
Angular unit tests
Angular e2e tests
Troubleshooting common Angular errors
Null guarding in Angular
Containerizing the app using Docker
Deploying containerized app
Summary
4
Staying Up to Date with Angular Updates
Staying Up to Date with Angular Updates
A brief history of web frameworks
Updating Node
Updating npm and Global npm packages
Updating Angular
Testing performance
Addressing security vulnerabilities
Updating your web server
Updating Docker image
Summary
5
Enhance Angular App with Angular Material
Enhance Angular App with Angular Material
Angular Material
Angular Material setup and performance
Angular Flex Layout
Adding Material Components to your app
Updating unit tests
Custom themes
Updating Angular Material
Summary
6
Reactive Forms and Component Interaction
Reactive Forms and Component Interaction
Interactive prototype
Searching with user input
Enabling component interaction
Summary
7
Create a Router-First Line-of-Business App
Create a Router-First Line-of-Business App
Angular cheat sheet
Router-first architecture
Creating LemonMart
Designing LemonMart
Generating router-enabled modules
Designing the home route
Branding, Custom, and Material Icons
Angular Augury
Submodules with lazy loading
Completing the walking skeleton
Common Testing Module
Summary
8
Continuous Integration and API Design
Continuous Integration and API Design
Continuous Integration
API design
Summary
9
Design Authentication and Authorization
Design Authentication and Authorization
Wrapping up mock-ups
Design authentication and authorization workflow
UI service
Role-based routing after login
Auth Service Fake and Common Testing Providers
Summary
10
Angular App Design and Recipes
Angular App Design and Recipes
User class and object-oriented programming
Reusing components
User service with caching, GET and POST
User profile with multi-step auth-enabled responsive forms
Resolve guard
Reusable component with binding and route data
Master/detail view auxiliary routes
Data table with pagination
Updating Unit Tests
Summary
11
Highly-Available Cloud Infrastructure on AWS
Highly-Available Cloud Infrastructure on AWS
Creating a secure AWS account
Right-sizing infrastructure
Deploy to AWS ECS Fargate
AWS Billing
Summary
12
Google Analytics and Advanced Cloud Ops
Google Analytics and Advanced Cloud Ops
Collecting Analytics
Budgeting and scaling
Advanced load testing
Reliable Cloud Scaling
Measuring actual use
Summary
13
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Crafting UI elements using components and interfaces

You will be leveraging Angular components, interfaces, and services to build the current weather feature in a decoupled, cohesive, and encapsulated manner.

The landing page of an Angular app, by default, resides in app.component.html. So, start by editing the template of AppComponent with rudimentary HTML, laying out the initial landing experience for the application.

We are now beginning the development of Feature 1: Display Current Location weather information for the current day, so, you can move the card in Waffle to the In Progress column.

We will add a header as an h1 tag, followed by the tagline of our app as a div and placeholders for where we may want to display the current weather, as demonstrated as shown in the following code block:

src/app/app.component.html
<div style="text-align:center">
  &lt...
Previous Section
End of Section 8
Next Section