DotNet-301-ElevenNoteAngular
  • Introduction
  • Part 1: Setup with the Angular CLI
  • Part 2: Building out the Header Component
  • Part 3: Sprucing up the Header Using Material
  • Part 4: Building the Registration Page with Reactive Angular Form
  • Part 5: Routing with Angular Router
  • Part 6: Design Break: Fonts
  • Part 7: Communicating with Web API with Auth Service
  • Part 8: Logging in with a token
  • Part 9: Routing After a Request
  • Part 10: Log In page Challenge
  • Part 11: Building the Note Index page
  • Part 12: Creating Note C.r.u.d. — Create
  • Part 13: Creating Note c.R.u.d. — Read
  • Part 14: Creating Note c.r.U.d. — Update
  • Part 15: Creating Note c.r.u.D. — Delete
  • Part 16: Protecting our views with Guards
Powered by GitBook
On this page
  • Intro to Angular with C# WEB API
  • What is Angular?
  • What is Material?
  • What is TypeScript?
  • Topics we are going to cover
  • Assumptions
  • The Code repository

Introduction

NextPart 1: Setup with the Angular CLI

Last updated 7 years ago

Intro to Angular with C# WEB API

An Extension of ElevenNote

Angular, Material Angular, TypeScript

What is Angular?

Angular is a front end JavaScript Framework, built by Google. Angular practices the MVC (Model View Controller) design pattern. The definition from Google is—“Angular is a platform that makes it easy to build applications with the web.” The annotation that developers use for Angular is ‘ng.’ These names are synonymous with one another, don’t be too shocked to see the reference of ‘ng.’ The Angular documentation that will be referenced throughout this build is located here. It’s important to note that we are working with Angular 4, which is a whole different paradigm from AngularJS(1.5).

What is Material?

Material is a library of UI (User Interface) components that developers can add to their web, mobile, or desktop applications for responsive styles. Google has created their own version of Material that complements the Angular framework. Learn more about Material Design here. The Material documentation that will be referenced throughout this build is located here.

What is TypeScript?

Created by Microsoft, TypeScript is a superset of JavaScript, that compiles down to clean JavaScript. It allows developers to use static type annotations when developing JavaScript applications! TypeScript is almost like a blanket that wraps itself around JS, what this means to us— is that we can use JS conventions and easily mix it with the syntax of TypeScript. Learn more about TypeScript and how to use it in more ways than just with Angular. Refer to it’s documentation here.

Topics we are going to cover

  • Angular Folder structure

  • Working with the Angular CLI

  • Material UI Design

  • Angular Forms

  • Angular Router

  • Angular HTTP

  • Observables and RxJs

  • Authorization Guards

Assumptions

This documentation assumes that you are already familiar with MVC design patterns, some JavaScript. Have worked with a UI framework such as Bootstrap, Foundation, or Materialize. That you are familiar with working with the command line enough to change and read directories. That you are familiar downloading development applications. Material Here are the project materials for this application:

The Code repository

Here is the deployed version of the app Here is the Wireframe of the application build

The IDE (Integrated Development Environment) used in this build will be Visual Studio Code, Install it here

The command line prompt used is Powershell. Windows CMD and Mac Terminal works well too!

Google Chrome!