JS-401-Angular
  • Introduction
  • Part 1: TypeScript Overview
    • 1.1: Types
    • 1.2: Classes
    • 1.3: Interfaces
  • Part 2: Angular Architecture
    • 2.1: MVC
    • 2.2: Modules
    • 2.3: Components
  • Part 3: Lifecycle Hooks
    • 3.1: Overview
  • Part 4: Data Binding
    • 3.1: String Interpolation
    • 3.2: Property Binding
    • 3.3: Event Binding
    • 3.4: Two-Way Data Binding
  • Part 4: Directives
    • 4.1: ngIf and ngFor
    • 4.2: Attribute Directives
    • 4.3: Structural Directives
  • Part 5: Pipes
    • 5.1: Overview
  • Part 6: Observables and RxJS
    • 6.1: Observables
    • 6.2: RxJS
    • 6.3: Custom Observables
  • Part 7: Dependency Injection and Services
    • 6.1: Observables
    • 6.2: RxJS
    • 6.3: Custom Observables
  • Eleven Fifty Style Guide
Powered by GitBook
On this page
  • ANGULAR FUNDAMENTALS
  • INTRODUCTION
  • WHAT IS ANGULAR
  • SETTING UP AN ANGULAR PROJECT
  • NEXT SECTION

Introduction

NextPart 1: TypeScript Overview

Last updated 7 years ago

ANGULAR FUNDAMENTALS

INTRODUCTION

Welcome to the Eleven Fifty guidebook to Angular. This guide will give you all the fundamentals of Angular and TypeScript. We've put this together using online documentation, proven best practices, and our own take on these exciting technologies. By the end of this gitbook, you will:

  • Use Angular and TypeScript

  • Explain MVC architecture

  • Describe data binding, and

  • Create 5 apps

WHAT IS ANGULAR

Angular is a TypeScript-based open-source front-end framework created by Google. Currently, Angular is in it's fifth version (Angular 5) with Angular 6 to be released in April 2018. Please note: Angular 5 is not the same as AngularJS. Angular 2 and later versions were a complete rewrite of the first version, and they are not backwards compatible. So if you are looking for help on Stack Overflow or Google, and AngularJS comes up...STAY AWAY!

Angular allows developers to make reactive Single-Page-Applications(SPAs). SPAs are web apps that load a single HTML page and are dynamically updated as the user interacts with it. It appears to the user that the page is routing to additional hosted pages. However, every change that occurs is rendered in the browser. This gives the user a quick, reactive experience that feels like a mobile application. Every change that occurs only effects the single HTML page, and it is JavaScript that updates the DOM during runtime. This is why you will never see the refresh icon in motion, because we are only updating the currently loaded page. Here is the page that Angular is updating:

<!doctype html> 
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularGitbookPlayground</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

<app-root> is the app component that is being called, and it is this component that will render to the screen. This may seem strange at first, but be patient. You'll understand how Angular components work together to make web applications once you are done with this gitbook.

SETTING UP AN ANGULAR PROJECT

To install Angular CLI, enter the following in your terminal npm install -g @angular/cli

This may take a moment to install. Once it's up, let's create a new app! First, create a new directory. Once created, enter the following in your command line: ng new AngularFundamentals

This can take a few moments as well. Once created, cd into AngularFundamentals and run in the terminal: ng serve --open

You are now up and running! This is just a placeholder, so let's go ahead and remove what's on the screen. Open the src file and then the app file. Select the app.component.html file, and remove the code on the screen.

NEXT SECTION

Let's set up a simple Angular project. Make sure you have Node.js and npm installed. Next, install Angular CLI. Check out the documentation . Angular CLI is a great tool. Creating a new application that is ready to go is a snap, and you can also create components, routes, and services in a heartbeat.

This builds and opens the created app. You should see this page:

here
Part 1: TypeScript Overview