初次使用AngularJS中的ng-view,路由控制
阿新 • • 發佈：2019-02-02
AngularJS中的route可以控制頁面元素的改變，使多頁面變成一個單頁面
第一步：引入必要的js：
<script src="js/lib/angular.js"></script>
<script src="js/lib/angular-animate.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="app.js"></script>第二步：準備好一個單頁：
<body ng-app="animateApp"> <!-- inject our views using ng-view --> <!-- each angular controller applies a different class here --> <div class="page {{ pageClass }}" ng-view></div> </body>
第三步：準備好多個模板：
我的檔案結構大致如下：
專案名
--css
--img
--js
--lib
-angular.js
-angular-route.js
-angular-animate.js
-app.js
--tpl
- page-home.html
- page-about.html
- page-contact.html
--index.html
檢視 page-home.html, page-about.html, page-contact.html 這些應該儘量保持清晰並且直接明瞭。我們只需要為每個頁面準備一些文字以及鏈到其他頁面的連結地址。<!-- page-home.html --> <h1>Angular Animations Shenanigans</h1> <h2>Home</h2> <a href="#about" class="btn btn-success btn-lg">About</a> <a href="#contact" class="btn btn-danger btn-lg">Contact</a> <!-- page-about.html --> <h1>Animating Pages Is Fun</h1> <h2>About</h2> <a href="#" class="btn btn-primary btn-lg">Home</a> <a href="#contact" class="btn btn-danger btn-lg">Contact</a> <!-- page-contact.html --> <h1>Tons of Animations</h1> <h2>Contact</h2> <a href="#" class="btn btn-primary btn-lg">Home</a> <a href="#about" class="btn btn-success btn-lg">About</a> 現在，我們擁有了我們的頁面，通過使用Angular的路由功能可以將這些頁面注入到我們的主index.html檔案中。 現在，所有的乏味的工作已經完成。我們的程式應該可以正常工作，並且可以很好的修改頁面。接下來，讓我們進入下一步，為頁面新增動畫效果！
第四步：建立module並配置路由
// app.js // define our application and pull in ngRoute and ngAnimate var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']); // ROUTING =============================================== // set our routing for this application // each route will pull in a different controller animateApp.config(function($routeProvider) { $routeProvider // home page .when('/', { templateUrl: 'tpl/page-home.html', controller: 'mainController' }) // about page .when('/about', { templateUrl: 'tpl/page-about.html', controller: 'aboutController' }) // contact page .when('/contact', { templateUrl: 'tpl/page-contact.html', controller: 'contactController' }); });
第五步：配置對應的Controller
// home page controller animateApp.controller('mainController', ['$scope',function($scope) { $scope.pageClass = 'page-home'; }]); // about page controller animateApp.controller('aboutController', function($scope) { $scope.pageClass = 'page-about'; }); // contact page controller animateApp.controller('contactController', function($scope) { $scope.pageClass = 'page-contact'; }); 現在，我們建立了我們的程式、路由以及控制器。 每一個控制器都有一個它自己的pageClass變數。改變了的值會被新增到index.html檔案中的ng-view中，這樣我們的每一個頁面都有了不同的類名。通過這些不同的類名，我們可以為不同的頁面新增不同的動畫效果。
第六步：配置對應的動畫
這個沒有嘗試，參考：