In this video, I show you how to create an Angular application, we compare the Angular file structure to a WPF app file structure, and we see how we can run our Angular app in the browser.

Creating a new Angular app is as easy as opening a new command window and typing `ng new app-name`.

Next, to open your new app in VS Code, change directories by typing `cd app-name`.

Now open your app with Visual Studio code by typing `code .`

There are a ton of files in an Angular app and here is what some of them do:

  • e2e – end to end test (not unit tests)
  • node modules – (think references)
  • src – application source
    • app: contains all modules and components. It’s where the app code goes
    • assets: contains images
    • environments: build environments (dev, prod)
    • favicon: the icon for your website
    • index.html: first file and only page of the app
    • karma config: javascript test runner (unit tests)
    • main.ts: bootstrapper, entry point into app
    • style sheet: think application resource dictionary
    • tsconfig files: one for compiling typescript code files and the other for test specifications
  • editorconfig: standard setting for editor
  • gitignore: which files to ignore when checking into git
  • angular.json: cli configuration file, configures how cli generates code and works with files.
  • package.json 
    • dependencies (think packages.config)
    • developer dependencies
    • scripts (start : ng serve -o)
  • tslint – linter that checks code against code style rules and notifies us if rules are broken.

Lastly, to run your Angular application in the Browser, simply type `ng serve` or `npm start` with -o option.

“Desktop to Web: A WPF Developers Guide to Learning Angular” is a video tutorial series that will help you take your WPF and WinForms desktop coding skill to the web with Angular. This series will help you understand how your current desktop skills map directly to concepts in Angular to make your learning path to the web as easy and painless as possible. During each video in this series I will be giving away a one year subscription to Infragistics Ultimate valued at $1,995 USD. Simply subscribe to my channel, like the video, and leave a comment to be entered. Winners are announced in the next video in the series.

Official contest rules: https://brianlagunas.com/desktop-to-web-series-youtube-official-contest-rules/
The Prize: https://www.infragistics.com/products/ultimate

Follow Me:
Twitter: https://twitter.com/brianlagunas
Blog: https://brianlagunas.com
GitHub: https://github.com/brianlagunas

My Prism Project:
Prism Library: http://prismlibrary.github.io/
Become a Patron: https://www.patreon.com/prismlibrary

Brian Lagunas

View all posts

Follow Me

Follow me on Twitter, subscribe to my YouTube channel, and watch me stream live on Twitch.