ng-include not loading partial view - angularjs

I'm currently working on a project, that I've got some problems with. Whatever I try to do, ng-include can't load a partial view I have in another folder.
I want to load view.html file in pagination folder. My file is in the folder which is on the same level that pagination folder.
Here's my site view fragment
<div class="container">
<div class="col-sm-6" id="NEWS">
<div class="well" ng-repeat="info in news">
<p>
{{info.description}}
</p>
</div>
<ng-include src="'/pagination/view.html'"></ng-include>
</div>
</div>
My view.html has a single caption test for testing purpose.
I also tried using this code:
<div ng-include src=....
<div ng-include="....
<ng-include src="'../pagination/view.html".
Nothing seems to work. Someone knows what is the problem about?

My file is in the folder which is on the same level that pagination folder.
You're propably passing a wrong path for the html template.
You have to refer to your template directory as if you're writing in your index.html file. So no matter which html template the ng-include directive exists you have to give it the path as if your root is the place where index.html exists.
Also try to avoid using '/' before the path.
e.g.
Suppose you're having the following folder tree:
---index.html
---/templates/app.html
---/tempates/pagination/view.html
In case you're trying to include the view.html in your app.html then you would do it like this:
<ng-include src="'templates/pagination/view.html'"></ng-include>
I hope it helps.

The cause of this type error are
passing a wrong path for the html template.
Passing path is not in lower case .
In angularJS all reference path must be in lower case like
<div ng-include="'/content/patna/partials/skive/test-partial.html'"></div>

Related

could ng-include block my CSS?

I'm trying to split up my HUGE main.html page into smaller parts so it will be better maintainable. It seems that ng-include is the way to go since i'm using angular already.
I'm not sure, but as soon as I use ng-include it seems the CSS of my website seems to fail... there's no error in the Crome console
Here's my main.html
<div ng-include src="'AddRegion.html'"></div>
<div class="addbutton">
ADD
</div>
and here is my AddRegions.html
<div class="popup">
<h2>Add Region</h2>
<a class="closeBut" href="Main.html#close" ng-click="showAdminMenuContainer()"></a>
</div>
I already tried putting the code within the divs, i also tried adding the ng-include on top of the main.html like:
<ng-include src="'AddRegion.html'"></ng-include>
But that doesn't seem to work for me. The files are in the root, so no folder problems, Crome is not giving any errors in the console.

AngularJS. Add code to all partials inside ng-view

How can I add code inside ng-view once(not inside all partials)? I want to have global block which will append or prepend inside ng-view, where I can use scope from current controller.
you can use ng-include inside each template to include the same template in all parts.
dunno know really what you want to do, but with the little info you gave, go to your index.html template and write the code you want to within a block element such as
<div class="your class name">
...
</div>
either before or after
<div ng-view>
</div>
depending on whether it's prepend or append. However, make sure you reference the controller properly.

How can I download the files using AngularJS?

I want to list all the files in <a></a> when clicking it we need to download it from the corresponding folder.
I tried the following code
<div ng-repeat="file in files">
<a download="{{file.name}}" href="/path of the file">{{file.name}}</a>
</div>
How can I achieve this?
Can anyone help me?
If you have an anchor tag that you'd like to not be processed by angular, you'll need to use target="_self" or some other valid target.
See the $location documentation
This should work for you:
<div ng-repeat="file in files">
<a target="_self" download="{{file.name}}" href="/path of the file">{{file.name}}</a>
</div>
Another option may be to use the full path to the filename, but this doesn't seem to work in every case.
Here's a plunker with examples.

Can I have nested ng-include's?

I have a template that is inserted via ng-include and that template also has an ng-include. The inner ng-incude is not being shown. Why?
Main Template:
<div ng-include src="'views/outer.html'"></div>
views/outer.html:
<div ng-repeat="item in items">
// Stuff
<div ng-include src="'views/inner.html'"></div> // not being shown
// More stuff
</div>
The code you posted should work so the problem is probably situated somewhere else.
One of the reasons could be that a JavaScript error is thrown somewhere else or that no items are found in the scope. Make sure to check the browser console.
Here is a working version of your code for your convenience:
http://plnkr.co/edit/pCTInrtITqHraC1hPyZH?p=preview
Hope that helps!
ng-include is a directive. Your view/outer.html should do like this:
$parent.items
Because directive not inherit parent automatically.

Does angularJS have a directive for inserting a script block into the DOM?

I have a script tag in my DOM that contains a template like the folllowing:
<body>
<div ng-insert='ui'></div> <!--inject ui here-->
<script id='ui' type='text/html'>
<div ng-model='name'></div>
</script>
</body>
...and I wish to add it into the DOM using a directive like the ng-insert I made up above.
I haven't found a built in one to do this yet. ng-include seems to only load in remote templates. I think this would be a reasonably simple directive to write, which I may try, but I wanted to make sure I'm not reinventing something that already exists.
ng-include can be used in combination with predefined templates using type="text/ng-template" on a script tag.
<script type="text/ng-template" id="templateId.html">
This is the content of the template
</script>
Note: the script tag containing the template does not need to be included in the head of the document, but it must be below the ng-app definition.
later use this to get the template:
<div ng-include="'templateId.html'"></div>
Note: the template's name is in single quotes, as a string.
You can also get this template via JavaScript:
$templateCache.get('templateId.html')
Refernces:
http://docs.angularjs.org/api/ng.directive:script
http://docs.angularjs.org/api/ng.$templateCache
I think ng-include and script type="text/ng-template" is what you're looking for
http://jsfiddle.net/mrajcok/MfHa6/

Resources