Menu
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.
285
The ng-include directive includes HTML from an external file. The included content will be included as childnodes of the specified element. The value of the ng-include attribute can also be an expression, returning a filename. By default, the included file must be located on the same domain as the document.
ngInclude creates a new child scope which inherits scope values from the parent controller.
1 Answer. The reason why AngularJS include an empty option in select is that it is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options.
Definition and Usage The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
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.
106
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
