bower install angular-tour

<script src="bower_components/jquery/jquery.js"></script>

<script src="bower_components/angular/angular.js"></script>

<script src="bower_components/angular-tour/dist/angular-tour-tpls.min.js"></script>

// step 关联$scope.currentStep,默认为-1，为0时自动执行;

// post-tour 执行完成时执行

// post-step  最后一步时被调用

// tour-complete 每次步数改变时执行

<tour step="currentStep" post-tour="postTourCallback()" post-step="postStepCallback()" tour-complete="tourCompleteCallback()">

    <virtual-step

    // 标题

      tourtip="Angular Tour allows you to give an interactive tour to showcase the features of your website."

    // 下一步按钮内容

      tourtip-next-label="Learn more"

    // 出现位置

      tourtip-placement="right"

    // 步数

      tourtip-step="0"

    // 调转目标 id为e0的元素

      tourtip-element="#e0"></virtual-step>

    <virtual-step

      tourtip="Angular tour has some cool features."

      tourtip-placement="right"

      tourtip-step="1"

      tourtip-element="#e1"></virtual-step>

    <virtual-step

      tourtip="And is tested in all major browsers."

      tourtip-next-label="Continue"

      tourtip-placement="bottom"

      tourtip-step="2"

      tourtip-element="#e2"></virtual-step>

    <virtual-step

      tourtip="Thanks for reading. Head over to the github page for more info."

      tourtip-next-label="Finish"

      tourtip-placement="left"

      tourtip-step="3"

      tourtip-element="#e3"></virtual-step>

  </tour>

angular.module('demoApp', ['angular-tour', 'ngCookies'])

      .controller('DemoCtrl', function($scope, $cookies) {

      // $scope.currentStep 从cookie中获取

        var curStep = $cookies.get('myTour');

        if(typeof curStep === 'string')

          curStep = parseInt(curStep);

        $scope.currentStep = curStep || 0;

        $scope.postTourCallback = function() {

          console.log('tour closes');

        };

        $scope.tourCompleteCallback = function() {

          console.log('tour completed');

        }

        $scope.postStepCallback = function() {

          console.log('Tour - Update Step', $scope.currentStep);

          $cookies.put('myTour', $scope.currentStep);

        };

      });