使用angularjs显示加载图标或加载进度条

如何使用angularjs显示加载图标或加载进度条。我的意思是类似于jquery

$（“body”）.addClass（“loading”）中使用的东西，
$（“body”）.removeClass（“加载”），我看到了一些进度条的链接，它类似于youtube加载条，但我不想这样我想要简单的进度条或加载iage或加载图标或加载条，显示条从模块移动到模块，从选项卡移动到选项卡。是否有任何链接或函数可以清楚地解释如何使用它。
查看

<div ng-show="loader.loading">Loading</div>

在控制器的顶部添加此项

  $scope.loader = { 

              loading : false ,

             };

如果您不想自己实现它，下面有几个链接

或

还可以阅读这篇文章，其中详细介绍了微调器如何使用angularjs

根据评论编辑

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});

app.directive（“微调器”，函数（）{
返回：{
限制：'E'，
作用域：{启用：=“}，
模板：
}
});

我还没有测试代码，但指令不会比这更复杂…
无法读取属性加载未定义的错误如下：设置此$scope.loader={loading:false；}；在您的控制器中，两个链接都很好，但它们使用的是$http，我不想使用$httpi，我想您必须编写一个自定义指令。。。接收布尔值以显示或隐藏微调器。。。这就是它所需要的一切…太简单了看，我也需要一个简单的东西，像这样，但它的问题是显示像youtube Way不确定我是否理解你的问题，但你可以尝试看一个类似的加载进度条，像这样：（因为角度加载条使用拦截器，你可能也想检查一下）
app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});