页面加载后启用Angular.js

时间:2013-06-17 09:02:43

标签: angularjs

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

目前Angular.js是胜利者,但我有一些问题需要解决。我遇到的主要问题是我非常希望将我的应用程序的第一页加载呈现为服务器端,然后由Angular.js处理所有交互。我的理由是因为我不希望用户体验这种双重等待。

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

我的困难是如何阻止Angular.js在第一页加载时查看URL并执行它然后呈现内容?

1 个答案:

答案 0 :(得分: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

当然,这比担心在服务器端和客户端将数据呈现到模板更容易吗?