在页面加载后启用Angular.js

Question

我正在构建一个AJAX驱动的搜索应用程序。它本质上是一个单页应用。所以我一直在评估不同的框架，比如Backbone和Angular.js。

目前，Angular.js是赢家，但我有一些问题，我正在努力解决。我的主要问题是，我非常希望有我的应用程序的第一页加载渲染服务器端，然后所有的交互由Angular.js处理。我这样做的原因是我不想让用户经历双重等待。

所以本质上我的计划是在服务器端加载我的ng-view div中的数据。然后通过Angular.js AJAX更新用户在此之后所做的所有更改。

我的困难是如何防止Angular.js在第一页加载时查看URL并做它的事情，然后渲染内容?

Answer 1

如果Angular不修改DOM容器，你就不能使用ng-view。另一种方法是使用一个指令，读取你自己的$routeParams，然后操作DOM。

为了阻止Angular完成它的工作，不得不"在页面加载后启用Angular"，这似乎有一些内在的错误。

与其将数据加载到服务器上的模板中，为什么不从当前路由的控制器中获取数据呢?是的，数据将在一个单独的请求中加载，但用户不必"双重等待"。

我将创建如下路由:

app = angular.module('Main', [])
        .config( ($routeProvider, $locationProvider) ->
            $routeProvider
                .when('/dashboard', {
                    templateUrl: '/partial/dashboard'
                    controller: 'DashboardCtrl'
                })
                .otherwise({redirectTo: '/dashboard'})
        )

然后在控制器中:

@DashboardCtrl = ($scope, $http, $routeParams, $route) ->
    # Fetch all data to populate the dashboard template here.
    $http(
        method: "GET"
        url: "/api/dashboard"
        data: $scope.request
    ).success((data, status, headers, config) ->
        $scope.dashboard_data = data
    ).error (data, status, headers, config) ->
        console.log data

这肯定比担心在服务器端和客户端都将数据呈现到模板中更容易吧?