18

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.

2 Answers 2

35

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.

6
  • I have tested your suggestion with the Content folder but it does not work...anyway why would the Content folder be anymore special then any other folder to asp.net mvc?...I have also checked the web developer tools and for some reason no request to the server for the login.html file is created
    – aleczandru
    Commented Jun 16, 2014 at 18:22
  • I've updated the answer. You are missing a quote on the include template.
    – lucuma
    Commented Jun 16, 2014 at 18:26
  • Adding the aditional quoted worked...but that is very confusing why did I have to add the quotes?
    – aleczandru
    Commented Jun 16, 2014 at 18:30
  • 1
    The docs state it is expecting an expression that will be evaluated which means if you don't put a quote it will look at it as a variable.
    – lucuma
    Commented Jun 16, 2014 at 18:31
  • I'm already using single quotes with same error; btw I'm using two ngincludes in one page, could this be the problem?
    – 0x777
    Commented Feb 25, 2016 at 0:33
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.