I'm a beginner with Angular and I want to make a ng-repeat of images in a folder. All my images have different names so I don't see how I can make a ngSrc for all the images.
Hope I am clear enough.
You can try something like this.
Grab all the image filenames and store it in a javascript array with in the javascript for your controller. I'm assuming you would be doing this on your server side and return JSON back to client through an API or Service.
In you controller, the result would look like this.
$scope.myImages = ["image1.jpg", "image2.jpg"];
You have many options now. One way is to write a little function that returns the full path and call it from ng-src.
$scope.getImagePath = function(imageName) {
return "http://yoursite/location/" + imageName;
};
<div ng-repeat="myImage in myImages">
<img ng-src="{{getImagePath(myImage)}}"/>
</div>
Similar post here
Try to give some code snippets using JSFiddle or Plunker next time as it would clearly show what you are trying to do.
[Update]
I don't know what language/framework you are using on the server side but to get all the files in a directory is very easy. Below are examples using node.js and C# respectively.
http://www.csharp-examples.net/get-files-from-directory/
How do you get a list of the names of all files present in a directory in Node.js?
If you are using ASP.NET WEB API, then just return the array back from the Get method in your API Controller, and then call that API from Angular directly.
There are tons of examples on how to do this. Just do some research and you should be fine.
Related
This is a generic question don't need the "ready to use" code , but an idea where should invest my time in. I set mustache tag because may be similar.
This is an express (4) application using .doT template where i want to expand with some angular (1.4.3) features.
Doesn't seem possible to me to work with .doT template and angularjs , I'm i right here? .I'm trying get it to work a .html template file and his angular application without success( return a 404 cause don't find a template, but when i use with ejs, it does work ( because it read .html files)
2 . STILL , would like to know in case i'm wrong above. considering this anwer that state is possible to use multiple view engine with consolidate. is possible and how would it be done with angular? (just a hint, doens't need to be the whole implementation)
I know by this answer would be possible to use this below, but also says is better to use a helper, is possible to use helpers in.doT template ? , how?
appModule.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
considering the above. Which one of 2 and 3 whould you say would be faster?
it would considerably be faster if I change my app to ejs view engine ?
Point by point :
This is incorrect , .doT template works well with Angular, I have use it both, as long as you render a route with dot.
router.get("/blog/new", function(req, res) {
res.render("owner/blog/create");
});
and set a state in your angular provider like
$stateProvider
...
.state("owner-new-blog", {
url: "/blog/new",
templateUrl: "/owner/blog/new",
controller: "CreateUpdateCtrl"
})
There is no point to use consolidate middleware, .doT template works with angular template out of the box, unless you change .doT default parameters.
Yes ... that would be like this , like state in this post
var dT = require('doT');
var tpl = {
tmpl:dT.template('{{=this.helper()}}'),
helper: function(){
/* do what you want to do */
}
}
tpl.tmpl(); // render template
as you can see in this benchmark , .doT is pretty fast if you set double engine in you app , is a bit slowe since you are expanded is functionallity, if you set a helper in doT is less painfull than having two engines .. so , is faster adding a Helper to dot.
there is no point in changing to ejs , dot is pretty fast and an advance template engines which suport layouts and partials. and still , in my opinion, is faster.
Im trying to implement Bootstrap Typeahead in my AngularJS project and I came across an issue with values.
Im loading the content via $http from my Django API server. For now, I can lookup for any item I want and display it's name, but what I need is to display "title" but return "id" via ng-model back to the controller.
Do you have any working example of doing this?
http://pastebin.com/xtype9J4
I'm assuming you are using https://angular-ui.github.io/bootstrap/#/typeahead, so I'd suggest having a look at the last example.
Looking at the DOM, your code could look something like this:
uib-typeahead="company as company.name for company in getCompanies($viewValue)"
This pretty much contains exactly what you need. Additionally, take a look at https://docs.angularjs.org/api/ng/directive/select and https://docs.angularjs.org/api/ng/directive/ngOptions for further examples, as AngularUI has a similar (if not identical) approach.
I just started learning MEAN and creating my first project using it.
I am implementing MVC model with Node JS and Express and it works great.
The problem is that I have several callers for methods with the same data - from API, directly in web, and from angular in web and mobile. And they expect different data format - some pure HTML while others JSON.
The question is how to correctly organize methods?
With code duplication:
Function A () ( return rendered html )
Function AfromAPIorAJAX () ( return JSON )
Or maybe have extra parameter FORMAT and use it in router:
Function A (format) ( if format == HTML return HTML else return JSON )
Or try to identify caller accept type via XHR (not sure if it will work for API)?:
Function A () ( if req.xhr return JSON else return HTML )
What can you recommend?
How you organize the methods in the big MEAN projects?
Thanks.
UPDATE: Real world example:
I have model Article. Its controller have methods: create, list, delete etc.
I want to have page on website with route "/articles" that list all recent articles. That page must also have categories filter block - that if clicked it update articles list via AngularJS for articles from that category (of course this all can be done with angular only, but I want a page with default articles available and easily be indexed by google, and use angular just to update articles on the fly).
I want also to have route "/api/articles" that will return list of articles in JSON format for GET request (this route btw maybe also used by angular js filter above).
So the question how many methods I need to create for this purpose in Article controller - "list" and "renderList", or just "list(format)", or "list" that will look for xhr (again dunno if API clients send xhr), or any other yours variant?
Okay guys, looks like current stackoverflow community is useless, but i found the response to my question in previous posts here: in express.js, any way to capture request to both json and html in one function?
That's what I'm doing. There is application with pages and different controls that may be put on pages by site admin/editor. All pages share one ng-app defined on master page. All controls are supplied with .js files with angular controllers. Let's suppose that I have an image gallery block:
<div ng-controller='imageGalleryCtrl'>
do something amazing here
</div>
<script src='imageGallery.js'></script>
Inside script there is a simple controller registration like:
angular.module('myApp').controller('imageGalleryCtrl', ... );
So. If I have 10 image galleries, I'll execute controller registration 10 times. It looks like this will work, but hell - I don't want it to be so =)
For now I just have all controls' scripts registration on a master page, but I don't like it as well, because if there is no image gallery on a page, I don't want it's script be downloaded during page load.
The question is - is there any proper way to understand if controller have been registered in a module already and thus prevent it from re-registering?
---------------
Well, though I've found no perfect solution, I must admit that the whole idea isn't very good and I won't think about it before my site will grow too big to assemble whole angular app on master page.
You should declare your controller but once. Instead of having one controller per gallery, have your single controller handle all image galleries. The controller should make a request to the REST backend to fetch the images of the desired gallery.
I see that instead of ng-view, you're using the ng-controller directive, indicating that probably you're not using Angular's routing. Try switching to using routes.
Have a look at Angular.js routing tutorial. It shows you how to use the ngRoute module. Then, in the next chapter, the use of $routeParams is described. Via the $routeParams service, you can easily say which gallery should be displayed by providing its ID in the URL; only one controller will be necessary for all your galleries.
If you really must check whether a given controller has been declared, you can iterate through the already declared controllers (and services... and pretty much everything else) by checking the array angular.module("myApp")._invokeQueue. The code would probably look something like this (not tested!):
var isRegistered = function(controllerName)
{
var i, j, queue = angular.module("myApp")._invokeQueue;
for (i = 0, j = queue.length; i < j; ++i) {
if (
queue[i][0] === "$controllerProvider"
&& queue[i][1] === "register"
&& queue[i][2][0] === controllerName
) {
return true;
}
}
return false;
};
Bear in mind however that while this may (or may not) work, it's far from being the correct thing to do. It's touching Angular's internal data that's not meant to be used in your code.
There is chance that I might not be able to explain my problem properly. Let me try.
I am developing a single page application using angular. This app basically displays the episodes of an online novel series. There is a navigation bar, which has query menus (Like, latest episode, episode of a particular date, episodes with a particular tag, etc). For each of these queries, i want a separate url.
/latest - should display the latest episode
/tag/:tagname - should return all episodes with that tag.
For all these queries, the resultant view is the same (list of episodes). So I will be using the same partial for all routes.
My question is, Should I actually create a new controller for each query? like, LatestEpisodeController, TagController?
Is there anyway I can use the url to determine what the user wants and run that query from within the same controller?
Ofcourse you can use same controller in routing definition, the question is what is the purpose of that? It will be worse to debug it later, if you have a shared functionality it's better to turn it into a factory or service and then use in controllers.
But the answer is YES, you can use same controllers and implement different behaviour basing on i.e. $location.path()
yes you can use single controller for multiple routing..
you can create different functions in controller and in each function do the according job.
In my case I have created different html page for different url and registered same controller for the html pages and in the html page I have called controller method using ng-init in div portion.
You can use same controller and same views as you wish...
$location can help you to get current path or full url if you want and you can call your service depends on your path...
here I write a little example for you to get the idea
PLUNKER