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:13 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 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;

        }

    }
});

Jasinski Technical Wiki