Wie füge ich Klassen zu Elementen hinzu und ändere den Seitentitel über AngularJS?

Question

Also, ich bin kürzlich auf ein erstaunliches Framework namens AngularJS gestoßen.

Ich mag es wirklich und es scheint perfekt für mich zu sein, daher benötige ich einige Dinge, bevor ich weitermache.

Ich möchte in der Lage sein, den Seitentitel der Seite zu ändern, basierend auf

(a) Der Seiten-URL und/oder

(b) Daten, die empfangen werden, wie z.B. wenn ein Formular übermittelt wird, anstatt eine Warnung anzuzeigen, wird sich der Seitentitel ändern und der Seiteninhalt kann sich ändern.

Außerdem möchte ich Klassen zu den Menülinks hinzufügen, basierend auf der aktuellen Seite. Wenn die aktuelle Seite also "Startseite" ist, möchte ich der

• -Element von "Startseite" eine Klasse hinzufügen und nicht anderen Seiten, und wenn es um „Über uns“ geht, sollte das

• -Element für diese Seite die aktive Klasse für dieses Navigationsmenüelement haben.

  Danke.

Answer 1

Die erste Anforderung kann gelöst werden, indem $routeParams genutzt wird und die zweite durch ngClass.

Hier ist ein schnelles Beispiel Plunker, um Ihnen den Einstieg zu erleichtern:

Javascript

var app = angular.module('plunker', []);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', { template: 'Startseite'})
        .when('/:title', { template: 'Seite für {{ name }}', controller: 'MainCtrl'})
        .otherwise({
            redirectTo: '/'
        });
});

app.controller('MainCtrl', function ($scope, $routeParams) {
    $scope.$on('$routeChangeSuccess', function (event, current, prev) {
        $scope.name = $routeParams.title || 'Welt';
    });
});

HTML

    AngularJS Plunker
    document.write('<base href="' + document.location + '" />');

       Hallo {{ name }}!

        Bob
        Harry
        Startseite

CSS

.nav-bar {
  display: block;
  width: 100%;
}

.nav-bar li {
  display: inline-block;
  text-decoration: none;
  width: 50px;
}

.Bob {
  background-color: yellow;
}

.Harry {
  background-color: orange;
}