Question

我是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转换怎么样？

Answer 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视图，以便您可以在页面之间进行动画过渡。请注意，ng-animate有点难以开始工作，但是如果你找到一个好的教程，没有理由不尝试动画。

Angular新手：开始构建应用程序？

1 个答案: