Angular Material Heroes Introduction

A book following the Tour of Heroes guide from angular.io and incorporating Angular Material project. As a massive fan of the Marvel Cinematic Universe, this tutorial will incorporate MCU Heroes. This project and it's accompanying guide is a work in progress and more will be added as I go.

The guide to this project can be found at GitBook Project Guide. The code for this project can be found at GitHub.

Angular logo

What is the goal of this project and guide?

First and foremost, the motivation and goal of this project was for me to learn Angular 2. I am also a huge fan of Google's Material Design philosophy and as a result, wanted to understand how to use Angular Material in my project. I am writing the guide for this project both as a reference for myself and for those who are also on this learning path and stumble upon this. While I am not an experienced web developer, I have developed software in other domains using Python and Linux. It is my hope that this guide can help any new developer along.

Who this project is made for?

This project is made for those raw beginners out in Angular and Web Development (like myself). This book will go through all the steps necessary to set up a development environment and follow the Angular guide. Furthermore, this project will include references to extra materials for in-depth research.

Code convention

Code convention will follow the Markdown syntax. Commands and output that are written for BASH or Command Prompt will include a $ (convention for Linux BASH).

BASH Shell
$ linux command
output below
DOS Command Prompt
> windows command
output below

Where necessary, the commands for Windows will be included also. I do apologise if some of the content is incorrect, in particular for MacOS, as I do not own an Apple device to test any configurations and changes. However, most MacOS commands and development environment will be similar to Linux.

Code blocks for files will be as follows:

folder/file.ts
/** This is a TypeScript comment and file */
function foo() {
  console.log("This is a TypeScript function called foo")
}
folder/style.css
/* This is a CSS block comment and file */ 
body {
  color: red; // This is a single line comment 
}
folder/index.html
<!-- This is a HTML comment and file -->
<!DOCTYPE html>
<head>
  <title>Title goes here</title>
</head>

Code blocks designated with ... show existing code from previous sections to allow focus on the additions of new parts to the file. For example:

folder/file.ts
/** This is the same TypeScript file as previously with additions */
function foo() {
  ...

  console.log('New console log added below previous one not shown in this block')
}

By convention, coming from a Python development background, I tend to follow the PEP Style Guide. However, as Angular 2 has it's own style guide written by John Papa, I will try to follow that convention as closely as possible.

What am I using?

While not necessary for you to follow along, these are some of the tools I will be using throughout this project. Some of these tools come free via the Open-Source movement or have student editions. If you are a student, I highly encourage you take advantage of these and support the developers where you can.

Please note some of the versions will not be current if you are reading this in the future. It is advisable you always update your applications and operating systems as they may have important security patches and fixes. If you are having problems with this project in the latest environments, please feel free to contact myself and I will try my best to help.

Development Environment

Windows Linux
NodeJS v8.9.1 LTS NodeJS v8.9.1 LTS
npm 5.5.1 npm 5.5.1
Angular CLI v1.5.4 Angular CLI v1.5.4
Angular v5.0.5 Angular v5.0.5
NodeJS Command Prompt BASH

Feedback

I humbly request and encourage anyone reading this project guide to provide feedback. As a student myself, I welcome any criticism or suggestions from others. You can contact me at the following:

results matching ""

    No results matching ""