Using ng-include result in undefined

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.

ngInclude are relative links, so you have to use a relative path : ../Content/[...]