在 AngularJS 中单击路由页面时，显示消息 - CSS

在 AngularJS 中，你可以通过路由来管理你的页面。当用户单击某个路由页面时，你可能希望在页面上显示一条消息来引导用户。这种效果可以通过 CSS 来实现。

步骤

1. 添加一个包装器 div 元素，将它作为你的消息容器。

   <div class="message-container"></div>
   

2. 添加 CSS 样式来设置消息容器的样式。

   .message-container {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     padding: 10px;
     text-align: center;
     background-color: #f2f2f2;
     border-bottom: 1px solid #ccc;
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
     visibility: hidden;
     opacity: 0;
     transition: visibility 0s, opacity 0.5s linear;
   }
   

3. 使用 AngularJS 的路由模块来实现当路由页面被单击时显示消息。

   angular.module('myApp', ['ngRoute'])
     .config(function ($routeProvider) {
       $routeProvider
         .when('/page1', {
           template: '<h1>Page 1</h1>',
           controller: function ($scope) {
             $scope.showMessage('Welcome to Page 1!');
           }
         })
         .when('/page2', {
           template: '<h1>Page 2</h1>',
           controller: function ($scope) {
             $scope.showMessage('Welcome to Page 2!');
           }
         });
     })
     .controller('myController', function ($scope) {
       $scope.showMessage = function (message) {
         var container = angular.element('.message-container');
         container.text(message);
         container.css({ visibility: 'visible', opacity: 1 });
         setTimeout(function () {
           container.css({ visibility: 'hidden', opacity: 0 });
         }, 3000);
       };
     });
   

   在上面的代码中，我们使用 ngRoute 模块来配置路由。当用户单击 /page1 或 /page2 时，会返回相应的模板，并调用相应的控制器。控制器中使用 $scope.showMessage() 来显示消息，并将相应的消息文本添加到容器中。我们还设置消息容器的可见性和不透明度，并在 3 秒后恢复默认值，以保证该消息只显示一次。

结论

通过上面的步骤，你可以在 AngularJS 中配置路由，并通过 CSS 显示消息来引导用户。你可以根据自己的需要修改上面的代码，以满足你的特定需求。