Question

嗨，我对角度很新，我刚开始使用它的第一个应用程序。这是我到目前为止所做的。这是我的索引文件：

    <body ng-app="codeArt">
<div ng-controller="loginCtrl">
    <ng-include src="/App/scripts/login/login.html"></ng-include>
</div>

<!-------------- Angular Libs ---------------------->
<script src="/App/libs/angular/angular.js"></script>

<!--------------- Code Art Main Module -------------->
<script src="/App/scripts/codeArt.js"></script>

<!--------------- Code Art Login Module -------------->
<script src="/App/scripts/login/login.js"></script>

</body>

索引文件存储在Views / Home / Index.cshtml中。这将是此处存储的唯一文件，因为我使用了ASP.NET MVC，所以需要它。

我在App / scripts / codeArt.js中定义了我的主模块：

var codeArt = angular.module("codeArt", [
    'codeArt.login'
]);

然后我创建了一个aditional模块，其中包含与登录和注册相关的功能App / scripts / login / login.js

var login =  angular.module('codeArt.login', [])

我在App / scripts / login / controllers / loginCtrl.js中定义了一个控制器：

 login.controller('loginCtrl', function($scope){
   $scope.name = "Nistor Alexandru";
   $scope.clicked = function(){
       alert("I was clicked");
   }
});

我还在App / scripts / login / login.html中定义了登录页面的主视图，它看起来像这样：

<section>
    <div>{{name}}</div>
    <button ng-click="clicked()">Clicked Alert!</button>
</section>

从我的index.cshtml文件中可以看出，我尝试使用ng-include加载login.html文件。出于某种原因，当我运行应用程序时，我只能找到一个注释，其中包含ng-include：undefined并且未加载html。

我会在某些时候集成路由，但现在我想了解为什么这不能正常工作？

我也尝试过这条路径../../App/scripts/login/login.html因为它会找到与index.cshtml文件相关的文件，但事实并非如此。

Answer 1

ng-include应该是这样的，你错过了一个引用：

<ng-include src="'/Content/App/scripts/login/login.html'"></ng-include>

评估为URL的角度表达式。如果源是字符串常量，请确保将其包装在单引号中，例如SRC =＆＃34;＆＃39; myPartialTemplate.html＆＃39;＆＃34;

https://docs.angularjs.org/api/ng/directive/ngInclude

**旧答案**

我建议您将静态html文件放在content文件夹中，或者创建一些路由以从控制器中返回它们。它应该在内容文件夹中开箱即用：

<ng-include src="/Content/App/scripts/login/login.html"></ng-include>

或者您可以考虑创建TemplateController，然后您可以根据所请求文件的名称返回视图（不要忘记设置路线）：

<ng-include src="'/Template/get/whatever'"></ng-include>  

public ActionResult Get(string name )
{
        return View(name); // return View(name + ".cshtml")
}

这假设您在/Views/Template/内有一个名为whatever.cshtml的文件夹。我认为使用控制器的好处是它们是通过您的控制器代理的（您可以稍后修改文件夹结构并轻松更新控制器中的引用）并可能传递一些服务器端数据，但这取决于您的要求。

Answer 2

ngInclude是相对链接，因此您必须使用相对路径：../ Content /[...]

使用ng-include结果未定义

2 个答案: