I am using angular js for my project. I want to show tour guide for my project which goes through multiple pages and show next step on next button click.
I use ng-walkthrough for single page tour--
https://www.npmjs.com/package/ng-walkthrough
But not getting proper example to make all tour steps in flow and goes through multiple pages?
for angularjs touring i use ui-tour http://benmarch.github.io/angular-ui-tour/#/docs instead of ng-walkthrough.
This one i found better option as per my requirement.
Related
The Scenario
I'm developing the front-end (CSS only) of an Angular SPA.
I'm not especially familiar with Angular routing.
I'd like to add a standalone page containing Bootstrap components just for development purposes (yes, I know this means it won't be a single page application anymore). This way I have one unified view with all the components so I don't have to switch back and forth while working on the CSS. It also acts as documentation for the Bootstrap for the other devs to refer to.
What I've tried
I originally added a bootstrap.html page to the app folder, alongside the app's index.html This worked at first, but has now stopped working. What would be the best/standard way to achieve something like this?
Update: I've managed to fix some of the JS errors, so the page is up and running again. My question remains though: "is there a way of adding a standalone page that is considered standard/best practise, or is it literally just add a separate HTML page at the app root?"
If you use a target='_self' in your linking anchor tag, this should force a full page reload, and that will avoid the angular routing - which is where I expect your request is getting hijacked (by design).
e.g.
link
Answering your updated question
Not to my knowledge, since (as you correctly pointed out) this mixes the SPA design pattern.
this image shows multiple apps that should run when I click on them individually.Like: if i click Filter then it should run Filter.js .
You should try react-router: https://github.com/ReactTraining/react-router
If I well understood, you're trying to split your app into sections and react-routing is great to do so. You also get path/link matching to your route as a bonus.
It comes with a nice tutorial https://github.com/reactjs/react-router-tutorial which shouldn't take long to go through. For your case, you should need just the first 3 steps.
Good luck.
I'm new to AngularJS, I have following scenario that I need to implement:
Assume index.html page only has an input field for enter a unique ID, when click submit button, the unique ID will be passed to backend for retrieving all information needed(for example, User object with current status, last name, first name etc ). Based on User.currentStatus, it should show different page with the same header and footer. There is no top menu bar on any of the page. Basically, all the pages are displaying different information about a user based on his status.
Honestly, it depends on your backend architecture, but if you're new to Angular I'd recommend a SPA, since most resources are geared towards building a SPA.
Angular can be used either "traditionally" or in a SPA environment. Given that Angular does specifically target use in SPA's, that's the path I suggest.
Here's is a reference to $route in the AngularJS documentation, which you'll need in order to build a SPA: $route
You'll also need to read up on ngView, which is referenced near the top of that page.
For a SPA, structuring the project well can make things a whole lot easier, so here's a reference to a good style guide for Angular as well.
I'm making a wizard which will help user in creating an item. It's a form with input boxes and dropdowns and a Next button. I'm not sure if it's proper to use ui-router to display next page when Next button is clicked. For now, I'm planning to use ui-router to display succeeding next pages.
How are you going to display the next page if you don't want to use ui-router?
you can use ui-router or normal route provided by angular,ui-router comes with extra and powerful functionality like states and nested viees and all.
Go through this link for more info
What is the difference between angular-route and angular-ui-router?
I was writing a sample app to display a set of youtube videos using AngularJS and filtering the videos based on language. I am binding user action to ngFilter and hiding and displaying filter based on that.
Please see JS Fiddle for code ==> http://jsfiddle.net/saratchandramrs/kxk9p/
If the ideal place to put the DOM manipulation code is on the directive per this AngularJS post - click here
Should I be doing something with the directives in my example? or would it be a overkill or could someone help me understand if I am doing it right per AngularJS principles? or if there is a better way to do what I am doing?
Also, every time the filter value changes, the DOM reloads, is there a way we can accomplish this functionality with out the reload? or is it like hiding individual elements based on the filter value (similar to css style:"display:none")?
Side note: I am using Bootstrap 3 for UI styling.
Thanks for the guidance.
The problem with performance is that you load a iframe for youtube in the directive. Every time you filter, load data form youtube. Did you see http://devgirl.org/2013/03/21/fun-with-angularjs/ ?