Jasinski Technical Wiki

Navigation

Home Page
Index
All Pages

Quick Search
»
Advanced Search »

Contributor Links

Create a new Page
Administration
File Management
Login/Logout
Your Profile

Other Wiki Sections

Software

PoweredBy

Page History: Angular Walkthrough

Compare Page Revisions



« Older Revision - Back to Page History - Newer Revision »


Page Revision: Mon, Sep 09, 2013, 2:26 PM


Overview

This article walks through the steps to create a simple Angular-based web app.

Walk-Through

Initial Setup

1. Within Visual Studio, create a new app, selecting Web > ASP.NET MVC 4 Web Application. Specify the "Empty" template and the Razor view engine.

1.a Add Angular via NuGet: Project > References > Right-Click > Manage NuGet packages > Online > Search for "angular" > Install "Angular JS"

2. Under the website root folder, create a /Scripts/MyAngularApp folder.

3. Within the /Scripts/MyAngularApp folder, create app.js with the following code.

var myAngularApp = angular.module("myAngularApp", ["ngResource"]);

4. Create the /Views/Shared/_Layout.cshtml file with the following code. The key items are the ng-app attribute on the html tag, and the script references to angular.min.js and app.js.

@{
    Layout = null;
}
<html ng-app="myAngularApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
        <script src="/Scripts/MyAngularApp/app.js"></script>
        @RenderSection("head", required: false)
    </head>
    <body>
        <h1>My Angular App</h1>
        @RenderBody()
    </body>
</html>

5. Create a Home controller with an Index method.

6. Create a view for the Home/Index method, specifying a layout file of /Views/Shared/_Layout.cshtml

7. Run your website and verify the /Home/Index page appears as expected. At this point, the site is rather trivial.

Retrieving Data

1.

ScrewTurn Wiki version 3.0.1.400. Some of the icons created by FamFamFam. Except where noted, all contents Copyright © 1999-2024, Patrick Jasinski.