3

それで、私は最近、素晴らしいフレームワークであるAngularJSに出くわしました。

とても気に入っています。私にぴったりのようです。そのため、先に進む前にいくつかのことが必要です。

に基づいて、ページのページタイトルを変更できるようにしたいと思います

(a)ページの URL、および/または

(b)フォームが送信されるなどのデータを受信すると、アラートが表示されるのではなく、ページのタイトルが変更され、ページの内容が変更される場合があります

また、現在のページが何であるかに基づいて、メニュー リンクにクラスを追加しようとしています。したがって、現在のページがホームの場合、<li>他の要素ではなく「ホーム」の要素にクラスを追加し、「概要」の場合、<li>そのページの要素にはそのナビゲーション項目のアクティブなクラスが必要です。

ありがとう。

4

1 に答える 1

3

最初の要件は$routeParamsを利用することで解決でき、2 番目の要件はngClassを利用して解決できます。

以下は、開始するための簡単なプランカーの例です。

Javascript

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

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', { template: '<p>Home page<p>'})
        .when('/:title', { template: '<p>Page for {{ name }}</p>', controller: 'MainCtrl'})
        .otherwise({
            redirectTo: '/'
        });
});

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

HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <h2> Hello {{ name }}!</h2>
      <ul class="nav-bar">
        <li ng-class="name"><a href="#/Bob">Bob</a></li>
        <li ng-class="name"><a href="#/Harry">Harry</a></li>
        <li ng-class="name"><a href="#/">Home</a></li>
      </ul>
    </div>
    <div ng-view></div>
  </body>

</html>

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;
}
于 2013-09-23T04:16:35.067 に答える