Hello Angular World (from Visual Studio and Local IIS)

Pages: 1, 2, 3, 4, 5, 6, 7

Hello Angular World from a MVCV View

Now we have an Angular 2 app running in our Local IIS (or IIS Express if you decided to skip that section), let’s build a very simple MVC app to host our Angular 2 app.

Add a Controller

1. Expand the Angular.World project
2. Right-click Controller…
3. Click Add > Controller
4. Select MVC 5 Controller – Empty
5. Click Add
6. Enter HomeController for the Controller name
7. Click Add

Add a Layout

1. Expand the Angular.World project
2. Right-click Views
3. Click Add > New Folder
4. Rename the folder Shared
5. Right-click Shared
6. Click Add > MVC 5 Layout Page (Razor)
7. Enter _Layout for the Item name
8. Click OK
9. Change the code to match:

Note: At this point you may notice that the @Styles is underlined in red, this is because the project is missing a reference, which we will address soon.

10. Save and close

Add the _ViewStart View

1. Expand the Angular.World project
2. Right-click Views
3. Click Add > MVC 5 View Page with Layout (Razor)
4. Enter _ViewStart for the Item name
5. Click OK

Note: The “\Views\_ViewStart.cshtml” file defines the common or default layout that all the application’s views will use. It is however possible to set a different layout by setting the Layout property, or setting it to null to not use a layout at all.

Add the Index View

1. Expand the Angular.World > Views project
2. Right-click Home
3. Click Add > MVC 5 View Page with Layout (Razor)
4. Enter Index for the Item name
5. Click OK
6. Double-click Index.cshtml
7. Copy and paste the following code:

8. Click Save and close

Install Microsoft.AspNet.Web.Optimization using NuGet

https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification

1. Select Angular.World and right-click
2. Click Manage NuGet Packages… or Alt+Enter
3. Click on Browse
4. Enter AspNet.Web.Optimization in the Search box
5. Select AspNet.Web.Optimization
6. Click Install
7. Click OK in Preview dialogue box
8. Click I Accept in License Accept dialogue box

Tip: You can monitor the installation process using Visual Studio’s Output window

Update Web.config Files

Now that the project references System.Web.Optimization, we need to update the two Web.config file.

Root Web.config

1. Locate the config file located at the root of Hello.Angular.World project
2. Open the config file
3. Locate the configuration/runtime/assemblyBinding section
4. Add the following code

Note: …/runtime/assemblyBinding represents the path to a specific XML node…

Views Web.config

1. Locate the config file located within the Views folder
2. Open the config file
3. Locate the configuration/system.web.webPages.razor/pages/namespaces section
4. Add the following code

Note: …/pages/namespaces represents the path to a specific XML node…

_Layout.cshtml Review Code

1. Locate Views > Shared > _Layout.cshtml
2. Double-click cshtml to open
3. Locate the @Styles tag
4. The @Styles tag should no longer have a red underliner

Add the BundleConfig Class

1. Within the Angular.World project
2. Right-click App_Start
3. Click Add > Class…
4. Select Class
5. Enter cs
6. Click Add
7. Open cs
8. Replace the existing code with the following:

9. Save and close

Update the Global.asax

At this point we have written the code required to implement Bundling, however the web application doesn’t know about it, so let’s register it.

1. Within the Angular.World project
2. Double-click asax to open
3. Locate the Application_Start() method
4. Add the following code

One final thing: systemjs.config.js

Remember the “ASP.NET MVC: prefix / to specify the root” comment and that I said we would revisit systemjs.config.js file?

1. In the root of Angular.World project
2. Double-click config.js to open
3. Locate ‘npm:’: ‘node_modules/’ and change to: ‘npm:’: ‘/node_modules/’
4. Locate app: ‘app’, and change to: app: ‘/app’,
5. Save and close

TO-DO: I’m sure with a little effort we could write a Routing module to take care of this dynamically…

Test the Hello Angular World app

1. Select Angular.World and right-click
2. Click Properties or Alt+Enter
3. Click on Web
4. Set the Start Action to Current Page
5. Press Ctrl+S
6. Click Debug > Start Debugging or press F5 key

Visual Studio should build your project and open the default view in a Web Browser in debug mode. It is normal for IIS to take some time to load the web application, the first time it is run (i.e. either after an IIS reset, Web config change or an application build) …

We are sending a request to http://localhost:12345 which should load the default MVC View which in turn should load the Hello Angular World app:

Next try sending a request to http://localhost:12345/Home which should also load the default MVC View which in turn should load the Hello Angular World app:

And finally try sending a request to http://localhost:12345/Home/Index which should also load the default MVC View which in turn should load the Hello Angular World app:

Pages: 1, 2, 3, 4, 5, 6, 7