This is a headache and a half.  I mean, I've just spent the past 15 years building ASP.Net applications utilizing WebForms, and was quite happily doing so.  But, an upcoming project has needs; and those needs aren't best served by the traditional WebForms model of ASP.Net.  So, I took a look around and started brainstorming. 

And discovered three big ones. 

Angular JS has been replaced with just Angular (www.angular.io), which is more monolithic than before. Not a good idea for dealing with initially learning these things. 

But also looking at things, Facebook creates React and Google creates Angular, and Microsoft has .NET starter projects for both.  Which leads to good thoughts towards them. They appear more stable than other options.  But at the same time, they're made by Facebook and Google; and I'm certain those organizations use them in their own applications, which means that their needs are the primary driving force behind both libraries.

Which means that Ember kind of wins in my opinion.

In truth though, all three are kind of the same. You have to have Node.js installed, and then you can use NPM to get the relevant frameworks.  

Building a simple website is just as easy, as it follows a simple paradigm:

And while that's the 50,000 foot view, that's basically all there is in getting the page to say "Hello World." 

Of course, there's specific details involved, and like I said, I choose Ember.  

First thing is to install it. Which is really just launching Visual Studio Code, opening the terminal (CTRL+`) window and entering the following command: 

    npm install -g ember-cli 

Or just go to the marketplace, or more specifically this page: https://marketplace.visualstudio.com/items?itemName=felixrieseberg.vsc-ember-cli

To begin, open the embedded terminal found within VS Code (CTRL + `) and enter the command to generate a new Ember project (I'm calling mine "ember-learn":

    ember new ember-learn 

What happens, is that the Ember CLI creates a directory in your current working folder named whatever you called your project, and sets up a new Ember application inside of it. 

Once that's done, use the CD command to go into the folder.  

Then, since we're using VS Code, use the "Split Terminal" command to create a new terminal window. This is useful, as you will be able to interact with NPM and the EMBER CLI from one window, and have Ember serving the application from the other.  

Once you've split the terminal window, CD to the new folder from that second window and then enter the command:

Note: if you get a message stating "Running without permission to symlink will degrade build performance" then run either VS Code (or your command window) as an Administrator. 

Pointing a browser at the provided localhost port (http://localhost:4200) will get you the compiled website. 

But since I'm wanting a "Hello World" thing, the page currently doesn't say that.  So we need to do a bit of editing to get there. 

And that means making an edit at the root of the application.  Ember provides a template for things that are always shown on the page. This file (application.hbs) is found in the "app/templates" folder. 

I just replaced everything there with the following lines: 

1
2
3
4

<h1>Learning Ember</h1>
<h2>Hellow World</h2>

{{outlet}}

You need the "{{outlet}}" bit, as that's where the nested routes will be rendered.  Important bit there.

Anyways, the system should have detected the change, recompiled, and reloaded the page while you were saving.