Hur sätter man upp AngularJS i en MVC4-applikation

Inledning

[Källa]

[GitHub repo]

Steg

I den här laborationen kommer vi att lära oss hur man sätter upp AngularJS i en MVC4-applikation.

  1. Skapa ett nytt projekt > File > New > Project Installed – Templates – Visual C# – Web – ASP.NET Web Application > OK > Välj MVC som template > Add folders and core references for: MVC > Change Authentication [No Authentication – OK] > Web App (från rullgardinsmenyn) > OK
  2. Lägg till AngularJS-biblioteket till projektet

    1. Man kan ladda ner AngularJS-biblioteksfiler från https://code.angularjs.org/

      Gå till Solution Explorer > Högerklicka på mappen Scripts > Add > Existing item > Välj ”js files required for AngularJS” > Add.

    2. Det är enklare och bättre att ladda ner AngularJS som nuget:

      Exekvera följande kommando från Package Manager Console: Install-Package angularjs

  3. Lägg till en bundle för att generera AngularJS-filer i View

    Gå till Solution Explorer > projektet [angularjs_mvc4] > App_Start > BundleConfig.cs > lägg till koden

     

    bundles.Add(new ScriptBundle("~/bundles/angular").Include(
            "~/Scripts/angular.js",
            "~/Scripts/angular-route.js"));
  4. Modifiera _Layout.cshtml för att lägga till stöd för AngularJS

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width" />
            <title>@ViewBag.Title</title>
            @Styles.Render("~/Content/css")
            @Scripts.Render("~/bundles/modernizr")
        </head>
             @*Här används ng-app="MyApp" för att definiera AngularJS-applikationen. ng-app="MyApp" innebär att <body>-elementet äger den (applikationen).*@
        <body ng-app="MyApp">
            @RenderBody()
            @Scripts.Render("~/bundles/jquery")
            @* Add Angular Library Here *@
            @Scripts.Render("~/bundles/angular")
            http://~/Scripts/MyApp.js
            @RenderSection("scripts", required: false)
        </body>
    </html>
    

    ng-app används här för att automatiskt definiera angularapplikationen. ng-app=”MyApp” innebär att <body>-elementet ”äger” applikationen.

  5. Lägg till en ny js-fil till AngularJS modul/controller osv.

    Gå till Solution Explorer > högerklicka på Script-mappen > Add > Välj Javascript-file > Tilldela filen ett namn [här MyApp.js] > Add.

    Lägg till följande kod i filen:

    (function () {
        //Skapa en Module 
        var app = angular.module('MyApp', ['ngRoute']);  // Vi kommer att använda ['ng-Route'] när vi implementerar routing
        //Skapa en Controller
        app.controller('HomeController', function ($scope) {  // här används $scope för att dela data mellan View och Controller
            $scope.Message = "Jippi!! Nu är vi färdiga med första delen!";
        });
    })();

    Nu har vi skapat en angular-modul och en controller inom sfären för $scope-objektet.

    angular.module : En modul i AngularJS är enkelt förklarat en samling Controller, services, filter, directive osv som initialiseras när applikationen bootar upp. Man kan även jämföra den med void main()-metoden i andra språk som t ex C, C++ som utgör startpunkt i applikationen.

    angular.controller : Innehåller affärslogiken (precis samma som controllerlogiken i en MVC-applikation). Controllers är innehåller samtliga metoder och variabler som används i våra vyer. Controllers gör också att vi kan initialisera $scope (som kommer att inrymma både data och funktionalitet som vi vill använda i View).

    $scope : $scope-variabeln är ingenting annat än ett objekt som förbinder View och Controller. Den använder Angulars tvåvägskommunikationsmodell för att koppla ihop Model-data med View. När AngularJS initialiserar den här kontrollern så skapar och anknyter den $scope-objektet till den här funktionen med dependency-injection.

  6. Lägg till en ny Controller

    Gå till Solution Explorer > högerklicka på Controller-mappen > Add > Controller > tilldela Controllern ett namn [här används HomeController]

  7. Lägg till en ny Action (metod) i Controller ”Home”

    Lägg in nedanstående kod i ASP.NET Controller HomeController.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
     
    namespace MVCWithAngularJs.Controllers
    {
        public class HomeController : Controller
        {
            //
            // GET: /Home/        
            public ActionResult Index()
            {
                return View();
            }
     
        }
    }
  8. Lägg till en View

    Högerklicka på Action-metoden (public ActionResult Index()) > Add View… > Ange vyns namn (View Name) [i exemplet används Home] < Add

    @{
        ViewBag.Title = "Index";
    }
     
    <h2>Index</h2>
    
    {{Message}}

    Direktivet ng-controller definierar vilken Controller som hanterar aktuell View. Här har vi använt ng-controller=”HomeController”.

    ng-controller : ng-controller-direktivet lägger till en Controller-klasss till aktuell View. Vi kan lägga flera controller till en enskild View.

    För att lägga till ett Controller-objekt till ett DOM-element via ett direktiv såhär:

    {{Message}}

     

  9. Kör applikationen
Annonser