0

我是 Angular 的新手，并且已经阅读了大量的教程和示例应用程序，现在我正在做一些困难的事情，让你潜入一个真实的应用程序:)

这就是我想要构建的。

  • 第 1 页：带有按钮的启动画面。当用户点击按钮时，他们会...
  • 第 2 页：带有一些文字的欢迎屏幕。

这应该很容易构建，对吧？这就是我到目前为止所得到的。首先是 HTML：

views/page1.html
<button ng-click="showPage2()">click me</button>

views/page2.html
<div>my splash page</div>

在我的 JavaScript 中：

app.js
angular.module('astellasRiskfactorcalcAppApp', [
   'ngRoute'
])
.config(['$routeProvider', function ($routeProvider) {
 $routeProvider
  .when('/', {
    templateUrl: 'views/page1.html',
    controller: 'MainCtrl'
  })
  .when('/page2', {
    templateUrl: 'views/page2.html',
    controller: 'MainCtrl'
  });
 }]);

controllers/main.js
angular.module('myApp')
.controller('MainCtrl', ['$scope', function ($scope) {
  $scope.showPage2 = function() {
    console.log('showPage2');
    // what do I do now?
  };
}]);

showSplash模块启动正常，但我在里面放了什么？我应该只更新路线并让 Angular 处理其余的吗？如果我想在一个屏幕和另一个屏幕之间做一个花哨的 CSS3 过渡呢？

4

1 回答 1

1

你可以用几种不同的方式来做，但这里的答案可能是你不想要一个按钮（或者至少不是一个 ng-click，元素看起来是无关紧要的），你只想要一个正常的“a href=''" 链接。正如你所说，让角度处理其余的。

另一种方法是使用$location服务。它允许您更改 javascript 中的位置 (url)。除非您需要在控制器中检查某些内容才能知道将人员发送到哪里，否则没有理由不只使用普通链接，因为最终结果对用户来说是相同的，但如果您确实需要它，它的使用方式如下：

console.log($location.path());  // Gets the path
$location.path('/page2')  // Sets the path

至于动画，如果您使用的是 1.1.5 或更新版本，则您可以访问ng-animate。ng-animate 让您可以为大多数指令设置动画，例如 ng-repeat、ng-show 等。它还可以为 ng-view 中的更改设置动画，以便您可以在页面之间进行动画转换。请注意，ng-animate 开始工作有点棘手，但如果你找到一个好的教程，如果你想要动画，没有理由不尝试。

于 2013-11-12T12:32:07.220 回答