I want to create in angular a page with 2 views. One, a navigation view has a list of ~1000 objects along with some options to filter them e.g.
<ul>
<li ng-repeat="object in objects| filter:query | subset:subsetOp">
{{objectname}}</a>
</li>
</ul>
The list of objects is obtained by a REST query using an Angular resource.
When the name of an object is clicked I want to main part of the page to query for additional information about the clicked object and display it.
The catch comes from the fact that I need the detail pages to have URL's that can be shared, bookmarked etc and that I don't want to have to re-query the list of objects all the time.
I can only find examples using ng-route to completely replace the page - loosing the navigation, our ui-route which seems to involve defining a list of states in javascript
Related
I'm new to angularjs and have been scouring for an answer to this problem but to no luck I can't find one.I know that angular (1.x) is older but I still wanted to learn this anyway.
Moving on, I'm trying to dynamically generate links based on a $scope.menu_item object inside a controller of my module. For example if
$scope.menu_items = ['Home','Profile','Settings']
the values in the array correspond to child states of parent state User and is configured using $stateProvider.state()
$stateProvider
.state('user'{
url:'/user',
abstract:true,
templateUrl:'someTemplateThatSeemsToWork',
controller:'MenuCtrl'})
//these are the child states
.state('user.Home',{
url:'/home',
template:'<p>Home</p>' (this is loaded in the template of its parent)
})
.state('user.Profile',{
url:'/profile',
template:'<p>Profile</p>'
})
.state('user.Settings',{
url:'/settings',
template:'<p>Settings</p>'
})
then this in the template using ng-repeat:
<li ng-repeat="menu_item in menu_items">
<a ui-state="user.{{menu_item}}">{{menu_item}}</a>
</li>
As expected, it renders the view properly, the values from $scope.menu_items are properly made into links but the href="" attribute of the tag is equal to the current url.
The default state is 'user.Home' and as such /user redirects to /user/home
(localhost:[port]/user/home)
<a ui-state="user.Home" class="ng-binding" href="/user/home">Home</a>
...
<a ui-state="user.Profile" class="ng-binding" href="/user/home">Profile</a>
...
<a ui-state="user.Settings" class="ng-binding" href="/user/home">Settings</a>
Here we see that all of the generated tags have the href value set to the current url (localhost:[port]/user/profile will make it into href="/user/profile")
So is there anything that I'm forgetting to do? From my understanding, it should work when I use ui-state since it can handle $scope properties.
Some additional notes:
1.) Manually typing the specified state url in the address bar works just fine and renders the correct template
2.) I am using Express to handle the server-side
3.) I set $locationProvider.html5Mode(true)
Temporary Work-around
For the people who might stumble upon this question, I temporarily used a work-around solution and just removed ui-sref="" or ui-state="" and just used
ng-href={{state.url}}
with
ng-repeat= "state in states"
where
states = [{name="stateName", url="/relativeToRootUrl"},{..more States}]
I'd still appreciate a solution for this using ui-sref since it utilized ui-router more.
So, over the past week I have looked at loading multiple galleries at once. I have been working in MeteorJS with blaze templates but, the methods I am using aren't working.
Essentially, all my data comes from multiple MongoDB collections which are organized in one main collection. When the website starts, I want to access the list of current collections and for each collection display a gallery of photos.
(Main Photo Page)
{{#each collections}}
{{>gallery collectionName=collectionName}}
{{/each}}
(Gallery Template)
<Template name="gallery">
{{getPhotos}}
</Template>
I have tried using a reusable blaze template that is fed the data and then runs a helper to display the images. It works, but I am having trouble loading only one template/collection at a time. I want to load one first, when that is done, load the next etc.
I have also wondered about using ReactJS for this with MeteorJS on the backend, but before I start, I'm wondering about how easy is it to load components one by one vs templates?
Thanks for any ideas or help!
You could try merging the cursors in a helper, instead of inside the template. This will force the order you like and still be reactive since the find is in a reactive context (the helper).
(HTML)
<Template name="gallery">
{{#each getPhotos}}
<img src="{{this.src}}">
{{/each}}
</Template>
(js)
'getPhotos':function(){
let mergedCursor = [];
for (collectionObject in Template.currentData().collections){
//not clear how you are getting the collections
mergedCursor.concat(collectionObject.find().fetch());
}
return mergedCursor;
}
You could also import the collections in the same js file and merge them directly.
I am a newbie at the MEAN stack. I have a full app working and have searched extensively on how to solve the following problem but I'm realizing that I don't know how to "ask" the question to be sent to the proper resource.
I have a marketplace. In the dashboard, a user can enter details about their product (a boat) and it is sent to the DB. In my marketplace, I'm retrieving all of the boats from the DB and theyre styled and listed on the page.
I want a user to click on one of the tiles components that I have created with an ng-list (boat) and be sent to a new page with a fully-expanded view of that specific boat. (larger pictures, expanded details, etc.) basically all the details about the product that won't fit in the minimalistic tile component in the marketplace.
How do I pass data about that specific boat that the user clicks on and be sent to a new page? Is this an ng-directive? an API/route thing?
I just am unsure how to reference the specific boat from the list i'm retrieving and have the user sent to a new details page. Any direction or resources that will teach me to solve this problem?
In general, use ng-repeat to display a list of products and ng-click to handle clicks.
<a ng-repeat="product in productList" ng-click="goto($index)">
<h2> {{product.title}}</h2>
<img ng-src="{{product.picture}}">
<p>{{product.description}}</p>
</a>
JS
$scope.goto = function(index) {
$location(productList[index].location);
});
Use a router such as ngRoute or ui-route to intercept the new location and load the appropriate template and controller.
I'm trying to create a custom element for reuse. What I have is data consisting of three attributes that will be displayed on it's respective page, depending on the link you click.
I'm using the Polymer Starter Kit. Basically, I want to have a page of information that changes depending on what the URL is. I have a list of programs on a page with links to their respective pages. So far I have this:
In my index.html, I have a section that looks like this:
<section data-route="programs">
<paper-material elevation="1">
<h1>Programs</h1>
<a href$="{{baseUrl}}programs/firstprogram">Program 1</a></br>
<a href$="{{baseUrl}}programs/secondprogram">Program 2</a></br>
<a href$="{{baseUrl}}programs/thirdprogram">Program 3</a></br>
</paper-material>
</section>
Then I have a custom element, program-info, that looks like this
<dom-module id="program-info">
<template>
<h2 class="page-title">{{program.name}}</h2>
<p>{{program.price}}</p>
<p>{{program.description}}</p>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'program-info'
});
})();
</script>
</dom-module>
Based on the program that was clicked, I want to grab data and use it in my custom element (name, price, description). I've thought about putting it in an array since there are only seven programs, but I don't know understand how to grab the right item in the array based on the URL.
Any thoughts?
If you are indeed using PSK, take a look at the section/page user-info in app/index.html. It displays information about a user based the name that was grabbed from the URL.
Of course you should also take a look at the routing configuration in app/elements/routing.html to figure out how the name is grabbed from the URL and set to the params variable.
Then you should add/modify your programs route to suit your needs.
Edit:
You can see a similar approach in this sample app : The data is fetch when the route changes and is then set to an article property in the scope of the blog-app element. In this element, said article property is itself bound to the similarly named property of the "page element" article-detail that is in charge of displaying the article's content that was previously fetched over the network.
I have a list with data-ng-repeat, filtering on the elements displayed.
<ul>
<li data-ng-repeat="topic in topics | belongs:projectID">
<span>{{device.name}} </span><a data-ng-click="unassignDevice(project, device)">Unassign</a>
</li>
</ul>
The filter works fine but when I update a topic with something like
topic.projectID = 123;
It does not refresh. When I reload everything displays correctly, so the assignment works and the filter works, it is only the UI that is not refreshing. This makes sense as the $scope.topics has not changed, so... how do I do the refresh?
It may be worth looking at the implementation of data-ng-repeat. You may be editing a copy of the data set, not the actual data set.