How to handle multi-page website using angularjs? - javascript

I want to create an android application using Cordova, and I am using angularjs to fetch and handle data from the service end-point of a Drupal website. Initially I tried to use ngRoute of Angularjs but didn't seem to fit properly, so I turned to 'ui-route'. But I facing problems with ui-route as well.
My main aim is to use a particular view/template for multiple pages. I am new to Angularjs, so kindly help me choose the best way to proceed. My main question is how to handle multiple pages, can we just have each page as separate html file and link them or use routing. I tried to look into many tutorials but nothing helped me. Even giving an example would be enough.

I understand your problem. You can achieve this via $stateProvider but you don't know how. I am giving you a application link there you can see how to use $state.
kitchensink
download this application.
if you want to reuse your template then use custom directive and see this or more info angular

Related

Angular/Laravel flow design for multiple view form

I'm building a web site (no SPA) with Laravel and Angular Js.
So far it works like this: All routing is made by laravel Router (the views are displayed by laravel controllers), but all the CRUD operations are made in asynchronous requests by angular (save, delete, view).
So far I had very simple views: one form to create resources on one column and a list of resources on another column. Like this
The problem is that the last form has a lot of fields and i want to split it in two separate views. I read about angular routing but the way i see it, you must configure the routing for the whole angular module and i want to use it only for this specific controller. What's the best approach on this one?
So this is how i decided to go after reading a lot, create a new module for my big view and configure the routing only for the new module. I hope this helps someone eventually.

Collection Repeat without full Ionic Bundle

I would love to be able to use Ionic's collect-repeat directive, however the entire Ionic bundle is not suitable for the solution I am developing.
I am trying to strip the code I need to implement it in a web app, however it's looking like an awful lot of code to get one directive working.
Has anyone come across a similar solution without using Ionic or has successfully implemented collect-repeat from Ionic without using the entire bundle?
Any advice would be great!
Thanks

How to get full html from SPA by ajax?

I'm trying to get full html generated by SPA done in AngularJS.
$.get('http://localhost:3388/' + d.response.path, function (d) {
$('#templateContainer').html(d);
});
But it's retuning only the basic html structure, not the dynamic html which in SPA is generated by AJAX (I'm wondering if this is why SPA are not good for SEO).
I believe might exist some technique/trick to solve this problem. Chrome for example when you inspect elements it's able to render all html from AJAX.
Maybe I'm not using the right keywords on google. What people has been doing to workaround this problem?
UPDATE:
Just to be clear about my case. I'm trying to get the full html from this SPA to display to the user a template preview.
I have many different SPA with different templates. I want to display these live templates by AJAX instead IFRAME. With IFRAME works but isn't great.
You can generate a full page in a SPA, but that's not the goal you should not use a SPA in that case.
Because the goal of a SPA is to get only some pieces of the page and load them when necessary you should try a middleware if you care about SEO crawlers like prerender.io you can create you own server with it or use their services its open source.
but generating a full page in SPA is killing all the reasons why you should use a SPA. Best Regards :)
You'll get the raw html because the server doesn't render your app and this is the expected behaviour, there is no bug.
S.P.A are usually ClientSide applications, it means that the browser have to render at rountime the AngularApp!
Of course the browser no renders anything because your code is async-injected into the dom, so, you need to program the AngularJS bootstrapping manually not through the ng-app directive.
by the way, there are many ways to have a server-side rendering of your app, have a look on https://prerender.io/...
If your goal is have a good indexing... loading the app via jQuery is a bad solution because search-engine-crawlers aren't able to process javascript, this is not a angular specific issue, each app built in javascript has this problem.
The best solution should be have a full angular-app and, only for crawlers, implement a server-side prerendering (using prerender.io).
Hope helps!

AngularJS Concept Understanding

I'm trying to learn angular by building this small web app that has this layout:
Simply, the Header's going to say "first app!"
each content nav button is going to be a different category (sports, music, etc) and each one is going to pull some public api and display it in a list on the content page in a table. I think I'm ganna have some search and filtering features and bread crumb if I decide to get fancy and add submenus.
Anyways, I understand the gist of Angular and I went through the phoneCat app tutorial on the angular site: https://docs.angularjs.org/tutorial and I have been watching bits and pieces of youtube videos on angular as well.
Unfortunately I'm still confused when it comes to transposing the concepts of routing/modules/services/directives/etc... into making an actual web app/site
I'm looking for someone to kind of give me a super high level view of how they would make this app using angular and explain it like I'm a total noob and maybe offer some simple rule of thumb tricks to think about angular in terms of web app components (eg. when I think of the data in a json file and I want to display it, what could I think of that in terms of angular concepts (data/model/view?) or ie: you'll be using ng-repeat a lot, etc.)
Here are some questions I have off the bat:
How many .html files should I have (views?) Do I make a .html for each content page?
The Header, Nav and bread crumb (if I use sub menus) will always be displayed to the user. Does this mean I have a index.html page with <div ng-view></div> in the body and then have a main.html with the header/nav/breadcrumb, and then have content1.html / content2.html/ content3.html etc separate? If this is true then how do I use more than one ng-view? Or is this where the concept of routing comes in? Could someone explain how I would set up these pages from a ng-view/routing perspective at the simplest level?
What does angular.module() do? and when do I use it? I see it at the top of controllers, routing, and services files, etc...
Could someone use an example when and how they use a service / factory?
I feel like this is asking a lot for someone to explain. I'm not very computer-sciency minded and I feel stuck in this place where I feel like I can almost build a really cool app but just need to put all the pieces in the right place.
Thanks
Great questions, I know I had my fare share when I first started. I am going to answer each question with a link that will give you detailed information of each.
yes, you make a html page for each content page(aka view)
Yes, your index page will contain all the static content, and you will use your ng-view directive to state the area that is dynamic. ng-views are the only way to make set dynamic content. You can use: switches, hide/show, and ng-repeats. For multiple views I would suggest you either user a combination of ng-views and in the views use a switch. If saving the state is very important, than I suggest you look at angular-ui https://github.com/angular-ui/ui-router
Angular.module() is a way to separate/ modularize your code. This means that it is only used in the parts that you explicitly state. When used the dependencies stated will be injected.
A great example of how to use the factory module, is in the angularjs tutorial from the official site. I would also suggest some great videos from egghead.io -https://www.youtube.com/watch?v=HvTZbQ_hUZY
If you are looking into a mobile solution, you might want to check out Ionicframework. It is angularjs but with added magic for mobile.

Laravel and Angularjs partials

I have a fairly simple app that filters a list of products.
Laravel creates the JSON feed for the products that I am reading and outputting with Angular and Laravel returns a filtered list based on what a user selects in a detailed filter form.
I have a requirement now that as a user filters results that the URL is changed in the browser and if the copy and paste it or share the link that they will be able to see the same results when the visit the app.
To do this I'll need to create routes with Angular and make use of angular partials. From reading the angular docs and watching a few screencasts it seems I need to reference partials that are html files.
Since I'm doing this with Laravel I've been using a Laravel view for my main view and using angular template tags within it and that works fine. If I want to start using partials how should I go about this? Where do I put the partials and can I reference them in my main laravel view?
Thanks!
Can you provide any samples of your views code?
You might find this helpful when working with Blade and Angular.js
http://scotch.io/bar-talk/quick-tip-using-laravel-blade-with-angularjs
If you could provide some code it would make it easier to help, I don't quite understand what you're attempting to do.
You should be able to use ng-include anywhere in your Blade view.
You can use $location to change the URL, though I'm not sure how it will handle a lot of changes in quick succession.

Categories