正在加载 Angular 视图

Question

每当我们加载 .html 文件服务于 angular 中的某个控制器时。 angular 是否进行 ajax 调用以检索 html。

喜欢这段代码。

 .state('home', {
              url: '/',
              templateUrl: '/Modules/Signin/signin.html',
              controller: 'SigninCtrl'
          })

我的意思是边取边问signin.html

有ajax呼叫吗？
或者它们是否作为普通资源加载？
如果进行了 ajax 调用，我在哪里可以找到有关它的文档。

Answer 1

当我查看我自己的项目时，我认为已经做出了决定。你有 inspect 元素网络选项卡，当您重新加载时，您可以看到每个 html 部分都单独加载

Answer 2

当您的代码执行时，Angular 首先使用 id /Modules/Signin/signin.html.

在 $templateCache 中查找 HTML 模板

如果在 $templateCache 中找不到，那么是的，Angular 将使用 $http 进行 AJAX 调用以获取HTML 内容 和 它将作为普通资源 加载，它应该位于 URL 处，例如：

http://example.com/Modules/Signin/signin.html

您可以在浏览器的开发人员控制台中验证是否执行了 AJAX 调用。

详细了解 $templateCache。

基本上，每个模板在尚未存储在缓存中时都会存储在 $templateCache 中。因此，如果您在 index.html 或任何地方（例如安装 angular 的地方）定义以下内容：

<script type="text/ng-template" id="/Modules/Signin/signin.html">
  <p>This is the content of the template</p>
</script>

现在作为您的 Angular 引导程序，您的 $templateCache 中将有一个 ID 为 /Modules/Signin/signin.html 的数据，所以现在您的 state 代码将不会生成任何 AJAX 相反，它只会加载上面定义的内容。

Answer 3

至少在 ui-router 中（假设视图不在 templateCache 中）视图 HTML 文件通过 GET 检索到文件的 URL，而不是使用AJAX 调用端点。在您的情况下，它将是 <your root URL>/Modules/Signin/signin.html 的 GET - 您可以在浏览器的开发工具中看到它。

正在加载 Angular 视图

Loading Angular View

javascript

ajax

angularjs

angular-routing

ng-view