Routing

Teraz przyda nam się serwer nginx (link bezpośredni). Rozpakuj nginx. W folderze /html/ będziesz umieszczał swój projekt. Tutaj pomoc do nginx dla Windowsa:

Możesz używac dowolnego serwera HTTP. Np. bardzo prosty Moongose, wygodny w użyciu http-server lub cięższy Apache HTTP Server.

Uruchom nginx. W linii poleceń wpisz:

start nginx

Aby zatrzymać serwer możesz wpisać:

nginx -s stop

Pod adresem localhost w przeglądarce będzie dostępna twoja aplikacja.

Nie kasuj starych plików. Mogą ci się jeszcze przydać. Najlepiej zrób nowy folder.

Utwórz następujące katalogi i pliki:

W index.html w sekcji <head> dodaj skrypt modułu angular-routing.js (w ten sam sposób jak angular.js, również dostępny jest na stronie https://code.angularjs.org).

Musisz też dodać wszystkie pliki js które utworzyłeś, np.

<script src="home/home.js"></script>

Zawartością <body> powinno być tylko:

<div>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#calc">Calculator</a></li>
        <li><a href="#students">Students</a></li>
    </ul>
</div>

<div ng-view></div>

Każdy plik HTML niech zawiera nagowek z jego nazwą Przykładowo plik calc.html:

<h1>Calc</h1>

Analogicznie pozostałe pliki (home.html, students.html)

Każdy plik js niech zawiera pusty kontroler. Nazwa kontrolera niech odpowiada danemu plikowi. Przykładowo plik calc.js:

app.controller('calcController', function($scope) {

});

W pliku app.js skonfiguruj router:

app.config(function($routeProvider, $locationProvider) {
    $locationProvider.hashPrefix('');

    $routeProvider

        .when('/home', {
            templateUrl: 'home/home.html',
            controller: 'homeController'
        })

        // analogicznie dla calc i students

        .otherwise({
            redirectTo: '/home',
            controller: 'homeController'
        });
});

Sprawdź czy po klikaniu w linki zmienia się treść na stronie.

Aby routing zadziałał zazwyczaj trzeba uruchomić aplikację z serwera (tzn. z adresu localhost/folder-z-twoja-aplikacja).

  1. Do odpowiednich zakładek dodaj swoje poprzednio wykonane aplikacje:

Pamiętaj, że w każdym kontrolerze powinny być tylko dane, zmienne i funkcje odpowiedzialny za dany widok (w kontrolerze kalkulatora nie potrzebujesz listy studentów ;) ).