Bagaimana untuk melaksanakan penukaran halaman berskala menggunakan AngularJS_AngularJS

AngularJS 1.2 menjadikannya lebih mudah untuk membuat peralihan halaman ke halaman dalam aplikasi satu halaman dengan memperkenalkan peralihan dan animasi berasaskan kelas CSS tulen. Dengan hanya menggunakan paparan-ng, mari kita lihat pendekatan berskala yang memperkenalkan pelbagai peralihan yang berbeza dan cara setiap halaman boleh dialihkan masuk dan keluar.

Demo: http://embed.plnkr.co/PqhvmW/preview

Pertama, tag:

 <div class="page-container">
  <div ng-view class="page-view" ng-class="pageAnimationClass"> </div>
 </div>

Memandangkan ng-view menggunakan animasi enter/leave, anda boleh menggunakan dua elemen ng-view dalam DOM untuk menukar paparan baharu dan menukar paparan lama. Oleh itu, kami menggunakan kedudukan mutlak untuk mewujudkan ng-view dalam elemen bekas halaman yang menggunakan kedudukan relatif, dengan itu menyokong sebarang jenis penukaran kedudukan.

kaedah 'pergi'

Dalam aplikasi satu halaman, kami masih mahu mendayakan navigasi melalui URL dan memastikan bahawa butang belakang dan seterusnya penyemak imbas berfungsi seperti yang diharapkan. Jadi sebaik sahaja kami menyediakan laluan, templat dan pengawal kami (penghuraian pilihan) dalam $routeProvider, kami boleh menggunakan laluan relatif dalam klik-ng untuk menukar halaman terus:

 <a ng-click="/page2">Go to page 2</a>

Itu juga berfungsi, tetapi kita perlu mengekodkan suis kelas dalam paparan ng. Sebaliknya, mari kita cipta kaedah 'go' pada $rootScope yang membolehkan kita menentukan laluan dan togol seperti ini:

 <a ng-click="go('/page2', 'slideLeft')">Go to page 2</a>

Ini ialah kaedah 'go' $rootScope kami:

$rootScope.go = function (path, pageAnimationClass) {
 
  if (typeof(pageAnimationClass) === 'undefined') { // Use a default, your choice
    $rootScope.pageAnimationClass = 'crossFade';
  }
     
  else { // Use the specified animation
    $rootScope.pageAnimationClass = pageAnimationClass;
  }
 
  if (path === 'back') { // Allow a 'back' keyword to go to previous page
    $window.history.back();
  }
     
  else { // Go to the specified path
    $location.path(path);
  }
};

Sekarang, mana-mana kelas togol yang anda tentukan sebagai parameter kedua akan ditambahkan pada ng-view dan kaedah go akan menukar laluan halaman dengan parameter pertama yang ditentukan.

Tukar kelas

Perkara seterusnya yang perlu dilakukan ialah mencipta sebarang bilangan kelas togol dan menggunakan cangkuk yang disediakan oleh modul ngAnimate , contohnya:

/* slideLeft */
.slideLeft {
  transition-timing-function: ease;
  transition-duration: 250ms;
}
 
.slideLeft.ng-enter {
  transition-property: none;
  transform: translate3d(100%,0,0);
}
 
.slideLeft.ng-enter.ng-enter-active {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave {
  transition-property: all;
  transform: translate3d(0,0,0);
}
 
.slideLeft.ng-leave.ng-leave-active {
  transition-property: all;
  transform: translate3d(-100%,0,0);
}