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

Page History: Angular Walkthrough

Compare Page Revisions

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

Page Revision: Mon, Sep 09, 2013, 3:25 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.

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

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

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

var myAngularApp = angular.module("myAngularApp", ["ngResource"]).
    config(function ($routeProvider) {

        $routeProvider
            .when('/Team', { controller: 'TeamDashboardController', templateUrl: 'AngularTemplates/TeamDashboard.html' })
            .otherwise({ redirectTo: '/Team' });

    });

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>
    <head>
        <script src="~/Scripts/angular.min.js"></script>
        <script src="~/Scripts/angular-resource.min.js"></script>
        <script src="/Scripts/MyAngularApp/app.js"></script>
        <script type="text/javascript" src="/Scripts/MyAngularApp/controllers/TeamDashboardController.js"></script>
        @RenderSection("head", required: false)
    </head>
    <body ng-app="myAngularApp">
        <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.

Wiring Up Angular¶

1. Change the code in /Views/Home/Index.cshtml to add the following line of code. The ng-view Angular directive is what triggers Angular to use the routes in app.js

<div ng-view></div>

2. Create the folder /AngularTemplates and add the file TeamDashboard.html with the following content.

<h3>This is the Team Dashboard</h3>

{{ message }}

3. Create the folder /Scripts/MyAngularApp/controllers (this is only for organizational purposes), and a new JavaScript file in it called TeamDashboardController.js with the following content.

'use strict';

myAngularApp.controller('TeamDashboardController', function ($scope) {
    $scope.message = "Hello world!";
});

4. Run your website. At this point you should see two additional lines: "This is the Team Dashboard" and "Hello world!". The latter message is from the message code in TeamDashboard.html.

Retrieving Data¶

1. Create an Entity Data Model (EDMX) within your project, and point it at the AngularTraining database.

2. Create the folder /Controllers/api, then create a new API controller within it called PersonController with the following code.

public class PersonController : ApiController
{
    [HttpGet]
    public List<AngularTraining.Models.Person> Index()
    {
        using (var db = new AngularTraining.Models.AngularTrainingEntities1())
        {
            return db.People.ToList();
        }
    }

}

3. Within your WebApiConfig.cs file (found within the App_Start folder) change the code for the Register method to the following.

public static void Register(HttpConfiguration config)
{

    config.Routes.MapHttpRoute(
        name: "LookupRoute",
        routeTemplate: "api/{controller}/{action}",
        defaults: new { action = "Index" }
        );

}

4. Create a new folder called /Scripts/MyAngularApp/services and create the file "PersonService.js" within it with the following content.

'use strict';

myAngularApp.factory('PersonService', function ($http, $q) {
  
    return {

        getPeople: function () {

            var url = '/api/person',
                deferred = $q.defer();

            $http.get(url)
                .success(function (data) {
                    deferred.resolve(data);
                })
                .error(function (data, status, headers, config) {
                    deferred.reject();
                });

            return deferred.promise;

        }

    }
});

5. Within the TeamPersonController.js file, change your code to call the PersonService

'use strict';

/* Note that [PersonService] was added as an argument after [$scope] */
myAngularApp.controller('TeamDashboardController', function ($scope, PersonService) {
    
    $scope.message = "Hello world!";

    /* Add this service call */
    PersonService.getPeople().then(function (data) {
        $scope.people = data;
    });
});

Jasinski Technical Wiki