Logitech / Angular-JumpStart

Angular and TypeScript JumpStart example application

Angular JumpStart with TypeScript

The goal of this jumpstart app is to provide a simple way to get started with Angular 2+ while also showing several key Angular features. The sample relies on the Angular CLI to build the application.

Looking for expert onsite Angular/TypeScript training? We've trained the biggest (and smallest :-)) companies around the world for over 15 years. For more information visit https://codewithdan.com.

Angular Concepts Covered

• TypeScript version that relies on classes and modules
• Modules are loaded with System.js
• Defining routes including child routes and lazy loaded routes
• Using Custom Components including custom input and output properties
• Using Custom Directives
• Using Custom Pipes
• Defining Properties and Using Events in Components/Directives
• Using the Http object for Ajax calls along with RxJS observables
• Working with Utility and Service classes (such as for sorting and Ajax calls)
• Using Angular databinding Syntax [], () and [()]
• Using template-driven and reactive forms functionality for capturing and validating data
• Optional: Webpack functionality is available for module loading and more (see below for details)
• Optional: Ahead-of-Time (AOT) functionality is available for a production build of the project (see below for details)

Running the Application

1. Install Node.js 6.11 or higher. IMPORTANT: The server uses ES2015 features AND the Angular CLI so you need Node 6.11 or higher!!!!

2. Run npm install to install app dependencies

3. Run ng build --watch to build and bundle the code

4. Run npm start in a separate terminal window to build the TypeScript, watch for changes and launch the web server

5. Go to http://localhost:3000 in your browser

Simply clone the project or download and extract the .zip to get started. Here are a few screenshots from the app:

Running Angular Playground

This application includes Angular Playground (http://www.angularplayground.it) which provides a great way to isolate components in a sandbox rather than loading the entire application to see a given component. To run the playground run the following command:

npm run playground