Hur implementerar man routing i ett AngularJS – ASP.NET MVC-projekt?

Inledning

[Källa]

[GitHub repo]

I den här laborationen ska vi se hur man kan implementera routing i ett AngularJS – ASP.NET MVC-projekt.

Routing i AngularJS liknar routing i MVC, skillnaden ligger i att MVC-routing är på serversidan medan AngularJS ligger på klientsidan.

Routing i AngularJS kan göras på tre sätt:

I detta exempel ska vi använda Hashbang-mode eftersom vi använder MVC på serversidan. HTML5 Mode är helt klart snyggare men ger problem. Antag att vi har domänen http://bigstar.com och att vi vill navigera till dashboard. I Hasbang-mode kommer URL:en att se ut såhär: http://www.bigstar.com/#!/dashboard. Men om man vidare antar att någon plitar dit detta i webbläsarens adressfält och trycker Enter så kommer servern att svara för http://dotnetawesome.com/. Det som kommer efter, #!, lämnas åt klientramverket att tolka. Men! I HTML5 Mode ser URL ut såhär: http://dotnetawesome.com/dashboard. Det betyder att om man inte har något som hanterar URL/dashboard som kommer applikationen inte att fungera. Det här problemet uppstår inte när man klickar på länkar på webbsidan eftersom vi redan har laddat in AngularJS då. AngularJS kommer därvid att se /dashboard och hantera den på klientsidan

Steg

  1. Skapa en mapp i projeket där vi kan ha våra experimentfiler (Views – html)

    Gå till Solution Explorer > högerklicka på projektet > Add > New Folder > nälj namn på mappen. [här Template]

    Placering av mappen /Template
  2. Skapa experimentfiler

    Gå till Solution Explorer > Högerklicka på mappen där filerna skall skapas > Add > New Item… > Välj HTML Page > Välj namn > Add.

    I laborationen använder vi följande filer

    Home Page

    {{Message}}
    Home.html

    About Page

    {{Message}}
    About.html

    Order Page

    {{Message}}
    Order.html

    Error Page

    {{Message}}
    Error.html
  3. Lägg till javascriptlogik som hanterar AngularJS-routing

    Gå till Solution Explorer > högerklicka på mappen där AngularJS-filerna ska finnas > Välj JavaScript File > ange namn > Add.

    Mapp där AngularJS-filerna finns i den här laborationen.
    angular.module('MyApp', ['ngRoute']) 
    .config(function ($routeProvider, $locationProvider) {
        //här skriver vi kod för att implementera routing
        $routeProvider
            .when('/', {
                // Om man inte anger någon särskild route (t ex endast http://bangbo.fro) så ska "/home" vara den view som visas
                redirectTo: function () {
                    return '/home';
                }
            })
            .when('/home', {
                templateUrl: '/Template/Home.html',
                controller: 'HomeController'
            })
            .when('/about', {
                templateUrl: '/Template/About.html',
                controller: 'AboutController'
            })
            .when('/order/:id', {
                templateUrl: '/Template/Order.html',
                controller: 'OrderController'
            })
            .otherwise({
                // Här hamnar vi när vi inte hittar rätt route
                templateUrl: '/Template/Error.html',
                controller: 'ErrorController'
            });
        $locationProvider.html5Mode(false).hashPrefix('!'); // Hashbang Mode
    })
    .controller('HomeController', function ($scope) {
        $scope.Message = "Detta är sidan HOME";
    })
    .controller('AboutController', function ($scope) {
        $scope.Message = "Detta är sidan ABOUT";
    })
    .controller('OrderController', function ($scope, $routeParams) {
        // $routeParams används för att läsa in query string
        $scope.Message = "Detta är sidan ORDER som från querystring har läst in id-värdet: " + $routeParams.id;
    })
    .controller('ErrorController', function ($scope) {
        $scope.Message = "404 Not Found!";
    });
    Routing och Controller till laborationen i filen Part9Controller.js

    $routeProvider Med hjälp av $routeProvider kan man definiera vilken sida som ska visas när användaren klickar på en länk. Konfiguration sker i applikationens config-metod (det som registrerats här kommer att köras när applikationen körs igång).

     

    $routeParams $routeParams används för att läsa av värden från query-string.

     

    $location $location är en service som parsar URL i webbläsarens adressfält och gör adressen tillgänglig för applikationen. Ändringar i adressfältet återspeglas i $location och ändringar i $location återspeglas i adressfältet.[Källa]

     

    $locationProvider Använd för att konfigurera hur applikationen ska hantera länkar. [Källa]

  4. Lägg till en Action som renderar View

    public ActionResult Part9() // Routing
    {
    	return View();
    }
  5. Lägg till en backend View.

    Högerklicka på Action-metoden skapades tidigare > Add View… > ange ett namn för View > Add.

    I nedanstående kod har vi använt direktivet <ng-view /> som vi stoppar vårt innehåll i vid routing. Varje enskild applikation kan endast ha ett direktiv av den här typen. Det finns tre möjligheter att inkludera <ng-view />:

    • <ng-view></ng-view>

     

    @{
        ViewBag.Title = "Part9";
    }
    <style>
        ul.menu {
            list-style: none;
            padding: 10px;
            margin: 0px;
        }
            ul.menu li {
                float: left;
                margin: 1px;
            }
                ul.menu li a {
                    float: left;
                    background-color: #f3f3f3;
                    display: inline-block;
                    padding: 5px 20px;
                }
                    ul.menu li a:hover {
                        background-color: #e4e4e4;
                    }
    </style>
    <h2>Part9 - Laboration med Routing i AngularJS</h2>
    
    
    @section Scripts{ http://~/Scripts/AngularController/Part9Controller.js }
  6. Kör!

Annonser