加载角度视图

Question

每当我们加载.html文件以某种角度服务于某些控制器时。 angular是否进行了ajax调用来检索该html 。

就像这段代码。

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

我的意思是在获取signin.html时问

• 是否进行了ajax调用？
• 还是将它们作为普通资源加载？
• 如果进行了ajax调用，我在哪里可以找到有关它的书面文档。

Answer 1

当您执行该代码时，Angular首先在$templateCache查找id /Modules/Signin/signin.html的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 2

当我查看自己的项目时，我认为已经接到电话了。 您在inspect元素的network标签中，重新加载时可以看到每个html部件均单独加载

Answer 3

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