How to create an Angular app in no time
From zero to deployment, we will cover how to quickly create an Angular application. Whether you are learning Angular for the first time, teaching your team Angular, or searching for a fast guide to re-jog your memory, this guide is meant for you. So let’s get started!
Visualizing the steps ahead
Visually seeing what an Angular application is made of can help you understand the steps in a bigger-picture way as we go through them. I like to know what I am getting into before I go chasing down a rabbit hole and so here is what to expect.
Step 1: Setting up your dev environment
To quickly get your environment up and running, follow these steps to build locally on your own machine.
1. Install Node.js
*optionally: Install nvm (node version manager) if you want to manage different versions of node for each of your projects.
2. Install a package manager to manage your project dependencies.
You can use npm (node package manager) or yarn. Npm already comes installed when you install Node and for this demo we will use npm as our package manager.
3. Install the Angular CLI for building and running your app
Open your CLI/terminal and go into a directory you want to create your Angular application in, then run:
npm install -g @angular/cli4. Create the initial app using Angular CLI commands
Give you project a name, here we are building an application to display different types of fish, so we will name it fish-app. This will take a moment as the Angular CLI initializes everything for the app.
ng new fish-app5. Serve the app
Go into the app you just created and serve the app. The app builds to http://localhost:4200/ and will open automatically.
cd fish-app && ng serve --openYou now have a running application that looks like this. Woohoo!
From here you will be adding your own content and styling to the app. Take a look at app.component.html for You can define all CSS in styling.css and change the root HTML file app.component.html to load custom content.
Step 2: Start Building
Web applications are broken up into views which control sections of the screen. Angular calls these views components. We use the Angular CLI command ng generate component to create custom components that handle larger features like the home page, toolbar, or fish-profile.
ng generate component fish-profile
This command initializes a TypeScript, HTML, CSS, and Spec file (for testing) for each component, and it will add that component to app.module.ts. This last part is very important because it allows the component to be used by all other components within your app by providing it to the root organizer — app.module.ts.
Every component has a selector which acts as the unique identifier/name when using a component in an html file. You simply add this selector as seen below to another component’s template (like app.component.html) and now you are using the component.
<app-fish-profile></app-fish-profile>Notice the component is exported as a class named FishProfileComponent and is added to app.module.ts. All dependencies for the app are imported to the app.module.ts.
Utilizing Angular Material
Angular Material is a UI component library that provides examples of common-use components like lists, tables, dropdown menus, etc. It follows Material Design principles to help you quickly implement common interaction patterns. See Angular Material’s installation guide for adding it to your project.
Let’s take a look at how to use an Angular Material component like Mat-Card:
*Angular Material components are always named with this naming scheme: mat-_____ (mat-card, mat-menu, mat-list,…).
Step 3: Navigate Views
Onto routing! Routing allows you to serve a SPA (single page application) with multiple urls. SPAs help reduce latency and limit back-and-forth communication to the server by “dynamically rewriting the current page rather than loading an entire new page from the server,” (Wikipedia).
So let’s add some new urls to our app and see how to implement routing.
Routes are defined in the app-routing.module.ts or app-module.ts. You need to import the RouterModule and then define the routes. Routes are defined by creating a path that points to a particular component so when that route is referenced, it loads that particular component.
See the source code for fish-app to see how the application renders different routes through the router-outlet in app.component.html. The app currently loads FishProfileComponent as the landing page since it is defined as the root path.
Step 4: Manage Data
Services help components map API calls to fetch data from remote servers. Data is shared by all components via dependency injection through the service.
A service is defined as a class with functions and data structures used to fetch or house data from a database. It uses Injectable to allow components to inject the service into the component class and utilize its functions.
Once a service has been injected into a component, all functions and data are accessible to the component.
Step 5: Collect User Data
Angular Forms enables you to capture and validate user input and track input changes. There are two types of Angular forms — Reactive Forms and Template-Driven Forms.
The key differences between these two forms is: (1) Reactive forms update the HTML content based on changes made to the component while Template-drive forms derive changes from within the HTML template; (2) Reactive forms are synchronous while Template-driven forms are asynchronous.
We are using Reactive Forms which allows us to define forms from the component class. Add ReactiveFormsModule to app.module.ts, as well as, MatFormsFieldModule and MatInputModul to use Angular Material forms.
Now, see how we define a FormGroup that contains several forms for input from the component class and bound in the template. Binding is denoted with [] to identify the formGroup we are using is the submissionForm defined in the component.
[formGroup]="submissionForm"
Step 6: Compile Project & Deploy
This step is really up to you since it depends on what you want to do with this web app. Some options are:
- Deploy to Firebase
- Build a 3-tier application with a backend and database
- Publish as a website on Github Pages
If you are ready to deploy and need to host some simple data, Firebase may be your answer. Or, if you want to write custom queries and define your own middlewear, then building a 3-tier app could be right for you. Or, if you want to publish this app as a personal or project website, you could deploy onto Github Pages.
Deploy to Firebase
Firebase is an easy way to host your website and add additional backend capabilities like authentication, data querying, and storage. It takes care of the backend functions for you and allows you to quickly get your web app up and running. Angular has its own library for firebase called angular/fire where you can implement these capabilities for an Angular app.
Follow these steps for deploying your app to Firebase:
1. Sign up for a Firebase account and create a project. Your app will be hosted at https://your-firebase-project-name.firebaseapp.com.
3. Install Firebase tools
npm i -g firebase-tools4. Connect your local Angular project on Firebase
firebase login
firebase init5. Build project
ng build --prod6. Deploy to Firebase
firebase deployViola! You are deployed.
Build a 3-tier application
Applications can be multi-tiered to separate the user interface from your business logic and data storage. A common architecture is 3-tier where there are presentation, logic, and data tiers.
- Presentation tier (client) is your Angular app rendered by the browser.
- Logic tier (server/middlewear) is another app written in Node.js, Django, Rails, Java, etc to handle authentication, authorization, database queries, and interactions with external APIs.
- Data tier is typically a SQL or NoSQL database like PostgreSQL or MongoDB.
One implementation of a 3-tier app is called a MEAN stack. MEAN stands for MongoDB, Express.js, Angular, Node.js. Angular as the client, Node.js and Express.js as the middlewear, and MongoDB as the NoSQL database.
Conclusion
Angular is a robust platform that provides you with the tooling to create multifaceted dynamic web applications. The faster you can get started with Angular, the more you can learn and implement in your project. My goal is to speed up this initial process by providing a 6-step guide to visually understanding and creating your Angular app.
Source Code: github.com/ellamaolson/fish-app
Let me know what you think and if you have an helpful insights for improving this guide!
