I am writing a web app similar to dropbox and gdrive, i fetch ids of file based on that it will be able to navigate from page to page, folder to folder, e.g /abc to abc/abc... All i need to do it from client side. I made it simple using AngularJS Routing(ui-router).
Here is my code
$stateProvider.state('dashboard.sync.root', {
url: "/*path",
templateUrl: "root.html",})
here user can navigate like http://myweb/dashboard/sync/root/abc or http://myweb/dashboard/sync/root/abc/.../../
while traversing from page to page the root.html(template) goes on changing.
Problem here is when I traverse back and forth, it doesnt store previous view. when i click back and forward button in browser. Any Solution Appreciated
You can use 3 different files to maintain your app:
header.html
body.html
footer.html
And use ng-view in body to include using your routes.
Related
I am working on an angular js 1.x application by using ui-router and have come up with a bottleneck since I am new to angular js ,so please forgive me if I sound silly.
Problem:
I have a main angular js app which has its own css files and script files(controllers,directives 3rd party libraries like bootstrap,angular etc and services files).
Now I have a landing page which has its separate design(it has its own css,scripts and images files).
Now I want to integrate the above mentioned landing page with its own separate files on the root route of the angular js app.
So my question is how should I do that ? , so that the css and scripts files don't conflict with each when I try to visit landing page and the route for the main application back forth.
I have tried oclazyloading the required files for landing page state and the main apps files respectively but they seem to conflict with each other's files.Since from what I think is happening is that the files that are already lazily loaded for the landing page conflicts with the files lazily loaded for the main app when I click on the main app link on the landing page.
Edit 1:
I also tried using angular-ui-router-styles it does the job since it unloads all the lazily loaded files before adding new files but what happens is that on page reload unstyled page occurs and then after few seconds it gets style because the package loads the css files after appending it in head tag
Suppose you have index.html in which you have to insert one page then your body section should be like this
<body>
<div>
<ui-view></ui-view>
</div>
</body>.
Now in your controller file suppose index.js your code should be like this
var myApp=angular.module("myModule",["ui.router"])
.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/home");
$stateProvider
.state("homePage",{
url:"/home",
templateUrl:"site/homepage.html",
controller:"homePageController as homePageCtrl"
})
.state("Dashboard",{
url:"/dashboard",
templateUrl:"site/dashboard.html",
controller:"DashboardController as homePageCtrl"
})
)}
Explanation:
you have to inject $urlRouterProvider service in your config to make by default route to specific state.
in this example we make`
$urlRouterProvider.otherwise("/home");
so it will route to url "/home" which is url specified for homePage state.
So it will load respective html page of that state i.e homePage.html.
if you want other static page to be your default page when your project is loaded,just specify its url in $urlRouterProvider().
Don't forget to inject $urlRouterProvider service.
Also in your index.html add all your custom css files if it overrides the boootstrap css files then make sure that add your ids to your html and specify css for that.
Hope i have cleared your issues.
I did this by keeping the two projects completely separate. When I deploy the projects to my server, I put the Angular app into a sub-directory of the landing page project.
To do this, you need to tell the Angular app that it's running in a sub-directory, and not at the root of the site. At deploy time I have a gulp task modify the <base href="/"> tag in the Angular app's index.html so it looks like this: <base href="/sub-directory-name/">
I use the gulp task so that when I'm developing locally I can run the Angular app from the root, not the sub-directory.
Modifying the <base> tag means you won't have to change any of the URLs in your Angular app to reflect it's new location in the sub-directory.
Finally, my web server (nginx in my case), is configured to serve the landing page at the root, and the single page app from the sub directory.
So while I'm making my first angular app, I see that the urls change for different pages, which is what's suppose to happen. So say I click a button and this
http://localhost:63342/angularSPA/app/view2/view2.html
changes to
http://localhost:63342/angularSPA/app/view2/view3.html.
What will the users see once I upload this all to something like heroku or my own domain. Everytime I route them to a page, will they see this long URL and will it change everytime I click a button or something?
you only need to upload what is inside the app folder. so this:
http://localhost:63342/angularSPA/app/view2/view2.html
will become this:
http://localhost:63342/view2/view2.html
if you put your index.html file in your root/app directory it will get even shorter:
http://localhost:63342/index.html
However, you can use a number of directives to achieve page changes without changing the url.
https://docs.angularjs.org/api/ng/directive/ngSwitch
https://docs.angularjs.org/api/ngRoute/directive/ngView
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngHide
https://docs.angularjs.org/api/ng/directive/ngIf
You could, but I don't know why you would, have your entire site be under index.html.
However, that means that the user's browser will have to load ALL of your 'stuff' before displaying the single page app. It also means you won't be able to use the power of routing.
Also, angular adds # in there.
Here is a good ui-router tutorial.
https://scotch.io/tutorials/angular-routing-using-ui-router
Rails noob here.
I've been fumbling through the process of integrating a wrapbootstrap one page parallax theme (https://wrapbootstrap.com/theme/ashley-one-page-parallax-WB0R11207 ) into my rails 4 app.
After unsuccessfully attempting to move all JS and CSS to the appropriate assets folders, etc, I contacted the template creator support, and they said that to properly implement, I just needed to place all files in the root directory of my app.
I did this, and the page renders properly when I execute the html file from finder, but I don't know how to route to (set up my root within routes.rb) a html file (index page) that's located in my root directory. How do you route to a location thats outside of app/views/etc?
You don't route to a view, you route an action that has associated views with it. just create a custom action in your controller and associate the view with it. if you need further help let me know. we can chat on Skype as well.
I'm writing a javascript app which is called within another page I do not control. I'd like to be able to embed an Angular JS app, but how do I handle routing without modifying the URL? How would testing (ie. e2e) work in this scenario?
Edit: The app is a wordpress plugin which is overlayed on the Wordpress dashboard, therefore the URL and Page History cannot be modified. The app will be bound to a div which is embedded in the page, and overlayed on existing content using CSS.
I believe you can just inquire AngularJS and your app, and using hooks to provide necessary HTML. A few things to note though:
Because the URL cannot be changed, you should use router in legacy mode (using URL hash) instead of HTML5 mode.
Since you're running in generated URL, the templateURLs must be built dynamically.
For example, ouput a script tag for URL to your plugin folder:
<script>var MY_PLUGIN_BASE = '<?php echo plugins_url(); ?>'</script>
And then later define your route and templateURL using that constant:
$routeProvider
.when('/', {
templateUrl: MY_PLUGIN_BASE+'my-plugin/views/main.html',
controller: 'Main'
})
This works, but in general I will avoid using routes in such situations. This cause more work in the controllers and directives, but it is safer because there could be other client side MVC apps on the page.
The ng-app is attached to the root element of your view instead of body.
For more general embedded AngularJS app (in my experience: a bookmarklet), you need to:
Inject AngularJS if needed (check for window.angular), CSS and HTML.
Inject your app's JS file. Because only one ng-app will be auto bootstraped, bootstrap your app manually using angular.bootstrap
angular.bootstrap(document.getElementById('my-app'), ['MyApp'])
Use absolute URL for templateURL, and make sure that URL have CORS enabled.
Again, avoid using routes if possible. For the Wordpress plugin, we're pretty sure that there's no other app using hash for routing (Wordpress is using Backbone, but I don't see the routes), but in general there are already a MVC app on the page that handle routing.
I'm using Backbone.js to connect to a Django backend via tastypie. I've got things figured out for my dynamic content, but I am wondering what to do about my FAQ / About / Contact pages. Because I want to have an uninterrupted user experience, no waiting for the page to load in between links, I'm wondering where to load the data for these flat pages from.
I don't want to overarchitect here, because these are brochure pages with non-dynamic content. In short, layout is important, and they don't need a CMS.
So do I have the pages already in my main index.html, and just show them when needed? This seems dirty to me.
Do I have Django store the html for these pages in a Textarea set up to accept html, and spit the html out as JSON through tastypie when needed? Ugh, that sounds dirty to me too.
Or a hybrid where django only spits out the relevant data to fill in the html that's already defined in my index.html-- This sounds correct, but like way too much work, I don't want to define db models for pages that as I've said, don't need a CMS.
I'm hoping I'm way off base with all these approaches, and you have something much better to solve my dilemma.
Your first idea of including them in the main index.html and showing them as needed seems quite reasonable, but has a couple drawbacks:
Your index page is heavier and thus slower to load than it needs to be
Your brochure pages aren't logically separated in your codebase
You can fix both of these by having the HTML for them loaded dynamically after the index.html loads. You'd still use the same client-side code to show the pages when the user clicks to them as if it were embedded in the main HTML file, but instead of including the HTML in the initial index.html file...
<div id="faq-page">
<h1>FAQ</h1>
...
</div>
have blank divs and an event to load them through AJAX after the main page has rendered. I'm not sure if you're using jquery, but if so, the code would look like this
<div id="faq-page"></div>
<script>
$(function() {
$("#faq-page").hide() // ensure it doesn't display too early
.load("/include/faq.html"); // async load the content from server
});
</script>
Now when the user hits the FAQ link in your app, the page will appear as fast as possible. If the page has had time to load (normally) it will show up instantly. If they happen to hit the link before it's loaded, it will show up as soon as the server responds.
You set up /include/faq.html however you'd like on the server side.