Angularjs for .Net developer

How do we build Angular js apps using .Net MVC.

Do we use the MVC controllers vs WEb API.

Is there a good read to help .Net developers embrace Angular?
as2007Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Ioannis ParaskevopoulosCommented:
Hi,

Since Angular is based on Posts you should go for the Web API.

A simple 'Hello World' app would be:

1. Create a new empty MVC 4 project
2. Choose Web Api in the templates.
3. From Nuget install AngularJS, and upgrade jquery to the latest version(2.0.3 when i am writing this)
4. In the Views/Shared folder, open _Layout.cshtml and paste the following code to create a Layout:

<!doctype html>
<html lang="en" data-ng-app="@((ViewBag.InitModule==null)?"":ViewBag.InitModule)">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
</head>
<body>
    @RenderBody()
    <script src="~/Scripts/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="~/Scripts/angular.min.js" type="text/javascript"></script>
    @RenderSection("scripts",false)
</body>
</html>

Open in new window


5. Add another folder in the Views called 'HelloWorld'.
6. Add a new View in this folder named 'HelloWorld.cshtml' and paste the following code:

@{
    ViewBag.Title = "Hello World";
    ViewBag.InitModule = "HelloWorld";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts
{
    <script src="~/Scripts/js/modules.js" type="text/javascript"></script>
}

<div data-ng-view="">
</div>

Open in new window


7. Create a new folder in the root of your project named 'Templates'.
8. Add a new file in this folder named 'HelloWorld.html' and replace the code with the following:

<div data-ng-controller="HelloWorldController">
    <input type="text" data-ng-model="message" data-ng-change="TextChanged(this.message)">
{{ data.message }}
</div>

Open in new window


9. In your Scripts folder add a new folder names 'js'.
10. In that folder add a new js file named 'modules.js' and paste the following code:
var module = angular.module("HelloWorld", []);

module.config(function ($routeProvider) {
    $routeProvider.when("/", {
        controler: "HelloWorldController",
        templateUrl: "/Templates/HelloWorld.html"

    });
    $routeProvider.otherwise({ redirectTo: "/" });
});

function HelloWorldController($scope, $http) {
    $scope.data = [];
    $http.post("/api/HelloWorldApi", {})
    .then(function (result) {
        angular.copy(result.data, $scope.data);
    }, function () {
        alert("Error occured");
    });
    $scope.TextChanged = function (value) {
        $http.post("/api/HelloWorldApi", { message: value })
        .then(function (result) {
            angular.copy(result.data, $scope.data);
        }, function () {
            alert("Error occured");
        });
    }
}

Open in new window


11. In your controllers folder add a new web api Controller named 'HelloWorldApiController' and replace its contents with:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace TestWebAPI.Controllers
{
    public class HelloWorldApiController : ApiController
    {
        //
        // GET: /HelloWorld/

        public HttpResponseMessage Post(dynamic data)
        {
            return Request.CreateResponse(HttpStatusCode.OK, new { message = data.message });
        }

    }
}

Open in new window


12. In the same folder add an mvc Controller called 'HelloWorldController' and paste the following:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace TestWebAPI.Controllers
{
    public class HelloWorldController : Controller
    {
        //
        // GET: /HelloWorld/

        public ActionResult HelloWorld()
        {
            return View();
        }

    }
}

Open in new window


The basic idea is that though in the same project you are differentiate your controllers. Though you have an MVC controller this will only handle your View. All data is going through the WebApi controller, which is called through 'module.js' and angular.

I don't want to advertise, but i found a video at PluralSight Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure to be very informative.
Keep in mind it is not for free and it is a 6 hour video, but my opinion, it worths it.

Let me know if i have forgot something...

Giannis
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.