加载数据ajax风格

Question

我只是开始学习angular.js。你们能告诉我制作一个页面的正确方法吗?这个页面最初会显示一个ajax加载器元素，上面写着“加载数据”或类似的东西。然后，在获取数据之后，它将更新视图并隐藏元素。我可以使用jquery在页面加载事件中添加内容，但是如何使用纯angular来实现呢？到目前为止，我想出了如何将其放入click事件中：

<div ng-app="VideoStatus" ng-controller="VideoStatusCtrl">
    <button ng-click="getVideos()">get videos</button>
</div>
<script type="text/javascript">
    angular.module('VideoStatus', ['ngResource']).run(function(){ 
       // I guess somehow I can start fetching data from the server here, 
      //  but I don't know how to call Controller methods passing the right scope 
    });

    function VideoStatusCtrl($scope, $resource) {
        $scope.videoStatus = $resource('/Videos/GetStatuses', { callback: 'JSON_CALLBACK' });

        $scope.getVideos = function () {
            $scope.videoResult = $scope.videoStatus.get();
            console.log('videos fetched');
        };
    };
</script>

Answer 1

向Adam Webber & Peter Bacon Darwin致敬

下面是有效的plunker

这里是我的版本 ，它将加载作为具有模式弹出功能的指令

以下是使用我的版本的教程

你只需要loading.js和modal.js，参考jQuery和twitterbootstrap css。

在代码中，

只有两个步骤你需要用你的代码。

1. 将以下代码添加到HTML

< LoadingModule数据加载>

• 将div模块添加到应用程序模块。应用程序(‘YourApp’，'LoadingModule')

)