Search icon
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
Angular 6 for Enterprise-Ready Web Applications
Angular 6 for Enterprise-Ready Web Applications

Angular 6 for Enterprise-Ready Web Applications: Deliver production-ready and cloud-scale Angular web apps

By Doguhan Uluca
$15.99 per month
Book May 2018 512 pages 1st Edition
eBook
$43.99 $29.99
Print
$54.99
Subscription
$15.99 Monthly
eBook
$43.99 $29.99
Print
$54.99
Subscription
$15.99 Monthly

What do you get with a Packt Subscription?

Free for first 7 days. $15.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details


Publication date : May 31, 2018
Length 512 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781786462909
Category :
Table of content icon View table of contents Preview book icon Preview Book

Angular 6 for Enterprise-Ready Web Applications

Setting Up Your Development Environment

Let's start with questioning the premise of this entire book, Angular itself. Why learn Angular, but not React, Vue, or some other framework? First, I won't be making an argument against learning any new tool. I believe that every tool has its place and purpose. Becoming somewhat proficient in React or Vue can only help further your understanding of Angular. Single Page Application (SPA) frameworks such as Backbone or Angular have grabbed my full attention since 2012, when I realized server-side rendered templates are impossible to maintain and cause very expensive rewrites of software systems. If you're intent on creating maintainable software, decoupling of APIs and business logic from the user interface (UI) is the prime directive you must abide by.

The question is, why get good at Angular? I have found that Angular neatly fits the Pareto principal. It has become a mature and evolving platform, allowing you to achieve 80% of tasks with 20% of the effort. Furthermore, starting with version 4, in Long Term Support (LTS) until October 2018, every major release is supported for 18 months, creating a continuum of learning, staying up-to-date and deprecating old features. From the perspective of a full-stack developer, this continuum is invaluable, since your skills and training will remain useful and fresh for many years to come.

This first chapter will help you and your team members create a consistent development environment. It can be tough for beginners to create the correct development environment, which is essential for a frustration-free development experience. For seasoned developers and teams, achieving a consistent and minimal development environment remains a challenge. Once achieved, such a development environment helps avoid many IT-related issues, including ongoing maintenance, licensing, and upgrade costs.

Instructions on installing GitHub Desktop, Node.js, Angular CLI, and Docker will be a good reference from absolute beginners all the way to seasoned teams, along with strategies to automate and ensure the correct and consistent configuration of your development environment.

Feel free to skip this chapter if you already have a robust development environment setup; however, beware that some of the environmental assumptions declared in this chapter may result in some instructions not working for you in later chapters. Come back to this chapter as a reference if you run into issues or need to help a colleague, pupil, or friend set up their development environment.

In this chapter, you will learn the following:

  • Working with CLI package managers to install and update software:
    • Chocolatey on Windows 10
    • Homebrew on macOS X
  • Using scripting to automate installation using:
    • Powershell on Windows 10
    • Bash on macOS X
  • Achieving a consistent and cross-platform development environment

You should be familiar with these:

  • JavaScript ES2015+
  • Frontend development basics
  • RESTful APIs

The supported operating system are as follows:

  • Windows 10 Pro v1703+ with PowerShell v5.1+
  • macOS Sierra v10.12.6+ with Terminal (Bash or Oh My Zsh)
  • Most of the suggested software also works on Linux systems, but your experience may vary

The suggested cross-platform software is as follows:

  • Node 8.10+ (except non-LTS versions)
  • npm 5.7.1+
  • GitHub Desktop 1.0.0+
  • Visual Studio Code v1.16.0+
  • Google Chrome 64+

CLI package managers

Installing software through a Graphical User Interface (GUI) is slow and difficult to automate. As a full-stack developer, whether you're a Windows or a Mac user, you must rely on Command-Line Interface (CLI) package managers to efficiently install and configure the software you will be depending on. Remember, anything that can be expressed as a CLI command can also be automated.

Install Chocolatey for Windows

Chocolatey is a CLI-based package manager for Windows, which can be used for automated software installation. To install Chocolatey on Windows, you will need to run an elevated command shell:

  1. Launch the Start menu
  2. Start typing in PowerShell
  3. You should see Windows PowerShell Desktop App as a search result
  4. Right-click on Windows PowerShell and select Run as Administrator
  5. This will trigger a User Account Control (UAC) warning; select Yes to continue
  6. Execute the following command in PowerShell to install the Chocolatey package manager:
PS> Set-ExecutionPolicy AllSigned; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
  1. Verify your Chocolatey installation by executing choco
  2. You should see a similar output, as shown in the following screenshot:
Successful installation of Chocolatey
All subsequent Chocolatey commands must also be executed from an elevated command shell. Alternatively, it is possible to install Chocolatey in a non-administrator setting that doesn't require an elevated command shell. However, this will result in a non-standard and less secure development environment, and certain applications installed through the tool may still require elevation.

For more information, refer to: https://chocolatey.org/install.

Installing Homebrew for macOS

Homebrew is a CLI-based package manager for macOS, which can be used for automated software installation. To install Homebrew on macOS, you will need to run a command shell.

  1. Launch Spotlight Search with ⌘ + Space
  2. Type in terminal
  3. Execute the following command in the Terminal to install the Homebrew package manager:
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. Verify your Homebrew installation by executing brew
  2. You should see a similar output, as follows:
Successful installation of Homebrew
  1. To enable access to additional software, execute the following command:
$ brew tap caskroom/cask

For more information, check out: https://brew.sh/.

Git and GitHub Desktop

This section aims to establish a best practice Git configuration that's suitable for the widest audience possible. In order to make the best use of this section and subsequent chapters of this book, it is presumed that you, the reader, have the following prerequisites fulfilled:

  • An understanding of what Source Code Management and Git are
  • Create a free account on GitHub.com

Why use GitHub?

If you are a Git user, chances are that you also use an online repository, such as GitHub, Bitbucket, or GitLab. Each repository has a free-tier for open source projects, coupled with robust websites with varying feature sets, including on-premise Enterprise options that you can pay for. GitHub, with 38+ million repositories hosted in 2016, is by far the most popular online repository. GitHub is widely considered a baseline utility that will never go offline by the community.

Over time, GitHub has added many rich features that have transformed it from a mere repository to an online platform. Throughout this book, I’ll be referencing GitHub features and functionalities, so you can leverage its capabilities to transform the way you develop, maintain, and release software.

Why use GitHub Desktop?

It is true that the Git CLI tool is powerful, and you will be just fine if you stick to it. However, we, full-stack developers, are worried about a variety of concerns. In your rush to complete the task at hand, you can easily ruin your and sometimes your team's day, by following bad or incomplete advice.

See the following screenshot of such advice from StackOverflow (http://stackoverflow.com/questions/1125968/force-git-to-overwrite-local-files-on-pull):

If you execute the preceding command, be prepared to lose uncommitted local changes. Unfortunately, novice users have a tendency to follow the simplest and most direct instructions, potentially leading to lost work. If you think your past commits are safe, think twice! When it comes to Git, if you can imagine it, it can be done through the CLI.

Thankfully, with GitHub, you can protect branches and implement the GitHub workflow, which entails branching, committing, merging, updating, and submitting pull requests. The protections and the workflow help prevent harmful Git commands from making irreversible changes and enable a level of quality control so that your team remains productive. Performing all of these actions through the CLI, especially when there are merge conflicts, can get complicated and tedious.

For a more in-depth understanding of the benefits and pitfalls of Git and GitHub, you can read my 2016 article on the topic at: Bit.ly/InDepthGitHub.

Installing Git and GitHub Desktop

GitHub Desktop provides an easy-to-use GUI to execute the GitHub workflow, in a manner that is consistent across Windows and macOS. Consistency is highly valuable when on-boarding new or junior team members or if you're not a frequent contributor to the code base.

  1. Execute the installation command:

For Windows:

PS> choco install git github-desktop -y

For macOS:

$ brew install git && brew cask install github-desktop
  1. Verify your Git installation by executing git --version and observe the version number returned
You will need to restart your Terminal after the installation of a new CLI tool. However, you can avoid relaunching your Terminal and save some time by refreshing or sourcing your environment variables. On Windows, execute refreshenv; on macOS, execute source ~/.bashrc or source ~/.zshrc.
  1. Verify your GitHub Desktop installation by launching the application
  2. Sign in to https://github.com/ on GitHub Desktop
  3. Once you have created a repository, you can launch the application from your Terminal by executing this:
$ github path/to/repo
  1. If you are already on the correct folder, you can type in the following command instead:
$ github .
For Windows, on GitHub Desktop launch, if you get stuck on the Sign in screen, close the application, relaunch it as an administrator, complete the setup, and then you will be able to use it normally, without having to launch it as an administrator again. For more information, refer to: https://desktop.github.com/.

Node.js

This section aims to establish a best practice JavaScript development environment. To make the best use of this book, it is presumed that you have the following prerequisites fulfilled:

Node.js is JavaScript that runs anywhere. It's an open source project that aimed to run JavaScript on the server, built on Google Chrome's V8 JavaScript engine. In late 2015, Node.js stabilized and announced enterprise-friendly 18 month LTS cycles that brought predictability and stability to the platform, paired with a more frequently updated, but more experimental, Latest branch. Node also ships bundled with npm, the Node package manager, and as of 2018, npm is the largest repository of JavaScript packages in the world.

For a more detailed look into Node's history, read my two-part article on Node at: Bit.ly/NodeJSHistory.

You may have heard of yarn and how it's faster or better than npm. As of npm 5, which ships bundled with Node 8, npm is more feature rich, easier to use and on par with yarn in terms of performance. Yarn is published by Facebook, which also created the React JavaScript UI library. It must be noted that yarn relies on the npm repository, so whichever tool you use, you get access to the same library of packages.

Existing Node.js Installation

If you installed Node.js before, when installing a new version of Node using choco or brew, ensure that you read the command outputs carefully. Your package manager may return caveats or additional instructions to follow, so you can successfully complete the installation.

It is also highly likely that your system or folder permissions have been edited manually in the past, which may interfere with a frustration-free operation of Node. If the following commands do not resolve your issues, use the GUI installer from Node's site as a last resort.

Regardless, you must take care to uninstall all global tools that were installed using npm -g previously. With every major Node version, there's a chance that native bindings between your tool and Node have been invalidated. Further, global tools rapidly fall out of date and project-specific tools quick go out of sync. As a result, installing tools globally is now an anti-pattern that has been replaced with better techniques, which are covered in the next section and under the Angular CLI section in Chapter 2, Create a Local Weather Web Application.

To see a list of your globally install packages, execute npm list -g --depth 0. To uninstall a global package, execute npm uninstall -g package-name. I would recommend that you uninstall all globally installed packages and restart from scratch with the suggestions provided in the next section.

Installing Node.js

This book will presume that you're using Node 8.4 or a later version. Odd numbered versions of Node are not meant to be long lived. 6.x.x, 8.x.x, 10.x.x, and so on are okay, but avoid 7.x.x, 9.x.x, and so on, at all costs.

  1. Execute the installation command:

For Windows:

PS> choco install nodejs-lts -y

For macOS:

$ brew install node@8
  1. Verify installation of Node by executing node -v
  2. Verify npm by executing npm -v
Note that you should never upgrade your npm version using npm install -g npm on Windows, as highlighted in Chapter 4, Staying Up to Date with Angular Updates. It is highly recommended that you use the npm-windows-upgrade npm package.

The npm repository contains numerous useful and mature CLI commands that are often cross-platform. Listed here are the ones I rely on frequently and choose to install globally for performance reasons:

  • npx: Executes CLI tools by downloading the latest version on demand or project-specific local node_modules folder. It ships with npm 5 and will allow you to run code generators that frequently update without a global install.
  • rimraf: The Unix command rm -rf, but works on Windows as well. Very useful in deleting the node_modules folder, especially when Windows is unable to do so due to the nested folder structure.
  • npm-update: Analyzes your project folder and reports on which package have newer versions or not, with the option to be able to update all of them, if you so wish.
  • n: Dead easy to tool to switch between versions of Node quickly, without having to remember the specific version number. Unfortunately, it only works on macOS/Linux.
  • http-server: Simple, zero-configuration command-line HTTP server, which is a great way to locally test static HTML/CSS pages or even the dist folder of your Angular or React project.
  • npm-windows-upgrade: Necessary to upgrade npm on Windows.

Visual Studio Code

Visual Studio Code (VS Code) is one of the best code editors/IDEs out there. It's free and it's cross-platform. The remarkable thing is that VS Code has the lightning fast performance of a code editor, think NotePad++ or Sublime Text, but the feature set and conveniences of costly IDEs, think Visual Studio or WebStorm. For JavaScript development, this speed is essential and is a tremendous quality-of-life improvement for a developer, who frequently switches back and forth between different projects. VS Code brings together an integrated terminal, easy-to-use extension system, transparent settings, excellent search and replace functionalities, and, in my opinion, the best Node.js debugger that exists.

Installing Visual Studio Code

For Angular development, this book will be leveraging VS Code. It is highly recommended that you also use VS Code.

  1. Execute the installation command:

For Windows:

PS> choco install VisualStudioCode -y

For macOS:

$ brew cask install visual-studio-code

One of the best features of Visual Studio Code is that you can also launch it from the CLI. If you're in a folder that you'd like to be editing, simply execute code . or a particular file by executing code ~/.bashrc or code readme.md.

  1. Verify install by launching Visual Studio Code
  2. Navigate to a folder and execute code .
  3. This will open up a new VS Code window with the Explorer displaying the contents of the current folder

For more information, refer to https://code.visualstudio.com.

Automation for Windows and macOS

At the beginning of the chapter, I proclaimed anything that can be expressed as a CLI command can also be automated. Throughout the setup process, we have ensured that every tool being used was set up and their functionality verifiable through a CLI command. This means we can easily create a PowerShell or bash script to string these commands together and ease the task of setting up and verifying new environments. In fact, I have created a rudimentary implementation of these scripts, which you may download from the Chapter 1 folder of the GitHub Repository for this book:

  1. Navigate to https://github.com/duluca/web-dev-environment-setup to find the scripts
  2. Execute install-windows-deps.ps1 in PowerShell to install and verify dependencies on Windows
  3. Execute install-mac-deps.sh in Terminal to install and verify dependencies on macOS

The harsh reality is that these scripts do not represent a very capable or resilient solution. Scripts can't be executed or managed remotely, and they can't easily recover from errors or survive machine boot cycles. In addition, your IT requirements may be above and beyond what is covered here.

If you deal with large teams and frequent turnover, an automation tool will pay dividends handsomely, whereas if you're on your own or part of a smaller, stable team, it will be vastly overkill. I encourage you to explore tools such as Puppet, Chef, Ansible, and Vagrant to help you decide which one may best fit your needs or if a simple script is just good enough.

Summary

In this chapter, you mastered the use of CLI-based package managers for both Windows and macOS to speed up and automate the set up of development environments for you and your colleagues. By reducing variance from one developer's environment to the next, your team can overcome any individual configuration issue more easily and remain focused on the execution of the task at hand more often. With a collective understanding of a common environment, no single individual on the team will carry the burden of having to help troubleshoot everyone else's issues. As a result, your team will be more productive. By leveraging more sophisticated and resilient tools, mid-to-large sized organizations will be able to achieve great savings in their IT budgets.

In the next chapter, you will become familiar with the new Angular platform, optimize your web development environment, leverage Kanban using Waffle and GitHub issues, learn Angular fundamentals to build a simple web app with a full-stack architecture in mind, and get introduced to reactive programming with RxJS.

Further reading

Left arrow icon Right arrow icon
Download code icon Download Code

Key benefits

  • Explore tools and techniques to push your web app to the next level
  • Master Angular app design and architectural considerations
  • Learn continuous integration and deploy your app on a highly available cloud infrastructure in AWS

Description

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.

What you will learn

Create full-stack web applications using Angular and RESTful APIs Master Angular fundamentals, RxJS, CLI tools, unit testing, GitHub, and Docker Design and architect responsive, secure and scalable apps to deploy on AWS Adopt a minimalist, value-first approach to delivering your app with Kanban Get introduced to automated testing with continuous integration on CircleCI Optimize Nginx and Node.js web servers with load testing tools

What do you get with a Packt Subscription?

Free for first 7 days. $15.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details


Publication date : May 31, 2018
Length 512 pages
Edition : 1st Edition
Language : English
ISBN-13 : 9781786462909
Category :

Table of Contents

14 Chapters
Preface Chevron down icon Chevron up icon
Setting Up Your Development Environment Chevron down icon Chevron up icon
Create a Local Weather Web Application Chevron down icon Chevron up icon
Prepare Angular App for Production Release Chevron down icon Chevron up icon
Staying Up to Date with Angular Updates Chevron down icon Chevron up icon
Enhance Angular App with Angular Material Chevron down icon Chevron up icon
Reactive Forms and Component Interaction Chevron down icon Chevron up icon
Create a Router-First Line-of-Business App Chevron down icon Chevron up icon
Continuous Integration and API Design Chevron down icon Chevron up icon
Design Authentication and Authorization Chevron down icon Chevron up icon
Angular App Design and Recipes Chevron down icon Chevron up icon
Highly-Available Cloud Infrastructure on AWS Chevron down icon Chevron up icon
Google Analytics and Advanced Cloud Ops Chevron down icon Chevron up icon
Other Books You May Enjoy Chevron down icon Chevron up icon

Customer reviews

Filter icon Filter
Top Reviews
Rating distribution
Empty star icon Empty star icon Empty star icon Empty star icon Empty star icon 0
(0 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 0%
1 star 0%

Filter reviews by


No reviews found
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.