I am developing a website where users can search for products using keywords. The one of the main functions is searching and showing the search results. Each search result (product) clicks onto a detail page (which will be deleted in 2 weeks +)
What I'v Done
Developed the UI/Javascript for the website.
All product components in the html/css are reusable
So all of the basic stuff is done. Now I'm focusing on AJAX and maybe Angular depending on your opinions as well.
My partner is building the backend in Node. He told me he will send search results in JSON and ill have to use AJAX to grab it. So far I'v learned how to store the JSON object in the user's localStorage (local).
Now I can't wrap my head around how I'm going to transfer the data and display a certain number of products on the page etc..
I have some pieces but not the details.
If you can help me the areas I'm lacking that will be great, thank you.
Google list:
ng-repeat to iterate through collection
Angular Directives to create reusable DOM
ng-include if you have to display inline details
ng-if to determinate functionality for above (not ng-show coz it have troubles in IE9-)
ui-router to create separate details "states" (aka pages)
$state to translate through application
$stateParams to determinate id of products to display on details page
About AJAX and JSONs responses that you will acquire:
{
items: [{ id:0, ... }], //collection of products
meta: {
totalPagesCount: '100',
totalItemsCount: '1000'
itemsPerPage: '10',
currentPage: '1',
}
}
Power that let you adapt to anything
Power that let you to find anything
Obviously you will create two directives and one controller:
Directive for items
Directive for paging
Controller to serve the page handling your input that will send requests for collection with keyword as GET parameter and translate updated data to directives
Service that will do business logic as $http.get() with deserialization (if needed), storing information (if you gonna cache something) etc.
Passing in ng-model of your directives appropriate values of collection, pagination etc will let you avoid writing $watch and business logic inside of controller.
Keep everything simple, clear and paterned.
Related
I am a noob designing an API for an ecommerce site and I need to work out my restful route structure. We are basically using Node and React along with Express + GraphQL. I was wondering if someone could shine a light on the structure?
Here is what we Have:
It is a fashion store that has many products: skirts, blouses, tops, shirts, dresses, etc. You know the drill.
Each of these items will be in categories like this:
/dresses (GET all dresses)
/dresses/:id (GET a particular dress)
/skirts (GET all skirts)
/skirts/:id (GET a particular skirt)
In addition to all the products and the categories of products, at the top level we have DESIGNERS.
So, you would have a designer who has many categories, and each category has many products. Make sense?
I am puzzling over how to nest the express routes.
I want to do these things....
Get all designers
Get all categories a designer has a product in
Get all products a designer has in the store
Get an individual (:id) of a product a designer has.
by the same token I also want to ...
Get all categories.
Get all products in a category
Get and individual product (:id) in a category.
So we have a parent route (designers)
and then two child routes (I think) within designers which
are /categories, /categories/:id, and /categories/products, and /categories/products/:id
Could someone get me a code hint on creating the routes in express? I am wanting to create a JSON structure to render with this
Thanks!
You're essentially asking how to build out an entire REST framework for a backend, which is quite a lengthy thing to answer :)
I'd suggest you start by designing the structure of the JSON for all these objects. Here's a handy site that allows you to visually see the layout of the JSON: https://jsoneditoronline.org/
Once you've done that for all the objects you've mentioned, here's a good tutorial on how to build basic node.js endpoints: https://medium.com/#purposenigeria/build-a-restful-api-with-node-js-and-express-js-d7e59c7a3dfb
The question is about managing models in forms on client with backbone.js
There is a model User on the server. It contains various fields:
Personal info
Name
Last name
Date of birth
Other info
About me (text)
My hobbies (text)
I have a single page application of settings. There are two forms on it: "personal info" form and "other info" form. I although have an api, that contains two routes to handle it - /api/user/<id>/personal_info, /api/user/<id>/other_info (it could be changed, it does not matter). I can PUT or GET info from these apis.
So I can't decide how to organize my backbone models right. Right now I have two models - UserPersonalModel and UserOtherModel, each of them has it's own api and I save them apart from each other.
Am I doing right or I shall rewrite it to one js model UserModel and call different save methods like .savePersonal and .saveOther? What is the best practice?
This question came here from ru.stackowerflow.com
Unless you're displaying multiple user forms at the same time and you'll have to do extra work mapping each other_info model with respective personal_info, I don't see any reason to combine those two as single model.
Especially since you have two endpoints, it's easier to have them as separate models, you can have separate view controlling each forms with respective models as well.
Combining the models will probably create nested attributes, then you'll have to manage that as well (Using plugins like deep model).
I have written AngularJS application that lists a couple of thousands records from the database. Then I created front-end pagination using limitTo filter.
Thus I load all records at once and paginate them dynamically, so the result is:
DOM loading ~5s
page loading ~5.2s
DOM loading takes way too long, what can I do about it?
I was thinking about backend pagination instead, but then I couldn't do dynamic searching with all records, I couldn't do dynamic ordering, etc, because I'd slice the list on PHP level before javascript loads.
Any other solutions?
view.tpl:
some HTML
<script type="text/javascript">
var data = {$data};
</script>
<script src="controller.js">
That's how I pass the variable from PHP controller to AngularJS controller. And thus the page source contains huge data array.
Have you tried to format SQL result in back-end side (compact json response) ? Maybe you can use webstorage to stock all results and make once request to get it.
https://github.com/fredricrylander/angular-webstorage
DOM Loading time depends (or at least should) only on elements you show. If you have 5000 objects, but show only 10 - it should work fast.
You should try using i.e. bootsrap pagination: https://angular-ui.github.io/bootstrap/
Or you can do it manually - using filter in html for big arrays is often bad idea, just create filteredArray in controller and update it when you need.
If you fix number of items on page (i.e. you want 200) making backend pagination will not improve your DOM render time.
I think this could be a common question, but I didn't find my answer, so that's the reason I am asking this. I am sorry if I am being repetitive.
I have a page with some categories. And each category has some category as its children. And, the user can click in this categories and the $scope.categories will change with those children, until we have no children anymore.
But, when the user clicks in a category to show its children, I want to change the URL, to make a permalink for the visible category at the time.
I tried to use $location, but $location does not change my absURL, it just set a anchor at the end of the URL, like '/path#category_slug'. I want to change to '/path/category_slug'. The reason is that I want to index those URLs in search engines.
So, if the user entry in '/path/category_slug', I will change $scope.categories based in the category_slug.
My question is, what is the best options to do this?
If you are using AngularJS it is unlikely that Google or other search engines will understand little of your site content. Th e problem is greater than just navigation! See the following question:
How do search engines deal with AngularJS applications?
If you are concerned about search engines, you are going to have to create a more traditional page-based site, using angular for small amounts of interactivity.
If you switch your AngularJS app to HTML5 mode, you will no longer have those # symbols in urls.
In your app.js file, set html5 mode to true:
$locationProvider.html5Mode(true);
But be careful, it's not so simple. You then have to configure your server to rewrite all requests. We call that "url rewriting" and there are many ways to do it depending on which server you use.
I am new to JS but have had some success using the ESRI API to make some web map applications. I am now attempting to step into an application that is going to require some pure JS and am looking for advice on what method to use. I want to create a drop list of unique values contained within a field from a REST data source. Once the user clicks on a value in the list, that value would be passed to a definition query on the REST to display only that data. I am fine with the definition query, but how do I get started with creating the list and collecting the selected value to pass to the query. Any help or assistance is greatly appreciated
I would suggest looking into some client-side templating engines like mustache, handlebars, etc. You can run a template method against your json data and then append the result into the dom anywhere you like.