Step 1 - Setting up a new Angular Page

Under Construction

In the last step we created a small 'applet' using jQuery. While jQuery works great for adding some basic AJAX and UI functionality to a page, by itself it doesn't really make for a good framework to build more complex forms and entire applications. For this you typically will want to use a Single Page Application (SPA) framework to help with the many varied task to build an interactive UI on the front end.

Creating a new Angular Application

As in the last step I'll use Visual Studio to set up the base page - but keep in mind that this is optional - you can create the base pages either by typing in the text, or using the templates in the Visual Studio Templates folder as a base line.

Start by selecting the project and then adding a new item:

Select the Web Connection Html + Angular Page template and name the template CustomerDemoAngular.htm. As before this creates the Html page as well as a matching JavaScript page. This time we'll leave the code in the original files alone.

The first step is to customize the page main layout to match your project. Since this is a static HTML page you have to customize this page to match your application style by copying or otherwise updating the HTML.

Using Templates or Scripts instead of static Html

Angular 'applications' are entirely client side driven so they don't need server side scripting. However, nothing is stopping you from using a server side script or template to generate this initial page. For example, if your existing application already has a nice Layout page, it might be easier to just reuse the styling configured with it.

After making a few adjustments for the title and footer, here's what the page looks like when you run it:

This base template is a minimal Angular application that has hooked up a startup module so you can immediately start doing some work. This sample lets you click the button and it updates the label on the form in response to the button click just to demonstrate that Angular is hooked up and its databinding features are working.

For more information on how this initial page works check out Step 1 of the Introduction to Angular Tutorial.

In the next step we'll start setting up our Angular application.

© West Wind Technologies, 1996-2019 • Updated: 02/18/16
Comment or report problem with topic