采用NG-包括导致未定义未定义、NG

2023-09-14 00:21:42 作者:余生请多指教

您好我是相当新的角度和我刚开始我的it.Here第一个应用程序是什么,我这样做是far.This我的索引文件:

 <机身NG-应用=$ C $车>< D​​IV NG控制器=loginCtrl>    < NG-包括SRC =/应用/脚本/登录/ login.html的>< / NG-包括>< / DIV><!--------------角利布斯----------------------><脚本的src =/应用程序/库/角/ angular.js>< / SCRIPT><!--------------- code艺术主模块--------------><脚本的src =/应用/脚本/ codeArt.js>< / SCRIPT><!--------------- code艺术登录模块--------------><脚本的src =/应用/脚本/登录/ login.js>< / SCRIPT>< /身体GT; 

索引文件存储在查看/主页/ Index.cshtml。这将是存储在这里的唯一文件,它是必要的,因为我用ASP.NET MVC。

我定义我的主模块中应用/脚本/ codeArt.js:

 变量$ C $ =车angular.module($ C $车,[    codeArt.login]); 

然后我创建了一个aditional的模块将包含登录及相关功能注册应用程序/脚本/登录/ login.js

  VAR登录= angular.module('codeArt.login',[]) 
Louis OSCHINA

我定义的应用程序控制器/脚本/登录/控制器/ loginCtrl.js:

  login.controller('loginCtrl',函数($范围){   $ scope.name =尼斯特尔亚历山;   $ scope.clicked =功能(){       警报(我被点击);   }}); 

我也定义在app /脚本/登录/ login.html的登录页面的主视图,它lookslike这样的:

 <节>    < D​​IV> {{名}}< / DIV>    <按钮NG点击=点击()>!被点击的警报< /按钮>< /节> 

因为它可以从我的index.cshtml文件我用tryed可以看出NG-包括当我运行应用程序,我只能找到一个评论,说NG-包括加载的login.html file.For某些原因:未定义和HTML未加载。

我西港岛线在某些时候被集成路由,但现在我想明白这是为什么不能正常工作?

我也tryed这条道路../../App/scripts/login/login.html asuming将乐的文件relaive到index.cshtml文件,但事实并非如此。

解决方案

在NG-包括应该是这样的,你缺少一个报价:

 < NG-包括SRC =/内容/应用/脚本/登录/ login.html的'>< / NG-包括> 

  

角前pression评估到URL。如果源是一个字符串常量,确保你把它包装在单引号,例如SRC ='myPartialTemplate.html'。

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

**老回答**

我建议你把你的静态HTML文件的内容文件夹中,或者创建一些路由比如从控制器归还。它应该制定出框的内容文件夹内:

 < NG-包括SRC =/内容/应用/脚本/登录/ login.html的>< / NG-包括> 

或者你可以考虑创建一个 TemplateController 键,那么你可能能够返回根据您所请求的文件的名称的视图(不要忘记设置路线):

 < NG-包括SRC =/模板/获取/不管'>< / NG-包括>公众的ActionResult获取(字符串名称){        返回查看(名称); //返回查看(名称+.cshtml)} 

这假定您已经在文件夹/查看/模板/ 名为 whatever.cshtml 。我认为,好处是用一个控制器它们通过控制器代理(可以修改文件夹结构之后,轻松地更新控制器参考),并可能通过他们的一些服务器端的数据,而是取决于你的需求。

Hi I am fairly new to angular and i have just started my first app with it.Here is what I have done so far.This is my index file:

    <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>

The index file is stored in Views/Home/Index.cshtml. This will be the only file stored here and it is needed because I used ASP.NET MVC.

I defined my main module in App/scripts/codeArt.js:

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

I then created an aditional module that will contain functionalities related to login and registration App/scripts/login/login.js

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

I defined a controller in App/scripts/login/controllers/loginCtrl.js:

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

I also defined the main view for the login page in App/scripts/login/login.html and it lookslike this:

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

As it can be seen from my index.cshtml file I tryed using the ng-include to load the login.html file.For some reason when I run the app I can only find a comment that says ng-include: undefined and the html is not loaded.

I wil be integrating routing at some point but for now I want to understand why this is not working correctly?

I have also tryed this path ../../App/scripts/login/login.html asuming it will lok for files relaive to index.cshtml file but that was not the case.

解决方案

The ng-include should be like this, you are missing a quote:

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

Angular expression evaluating to URL. If the source is a string constant, make sure you wrap it in single quotes, e.g. src="'myPartialTemplate.html'".

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

** Old Answer **

I'd suggest you place your static html files inside the content folder or create some routing to return them from say a controller. It should work out of the box inside the content folder:

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

Or you might consider creating a TemplateController and then you might be able to return the view based on the name of the file you are requesting (don't forget to setup a route):

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

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

This assumes you have a folder inside /Views/Template/ with the name whatever.cshtml. I think the benefit to using a controller is they are proxied via your controller (you can modify folder structures later and easily update the reference in the controller) and possibly pass them some server side data, but depends on your requirements.