rails: routing to a html file in the root directory - javascript

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.

Related

How would I add URL subsections/subpages?

How would I add things like this:
/page/sub-section
ex: https://url.com/account/notifications
In terms of a static site, each slash represents a single directory on your web server.
/page/sub-section
Would mean you have the
/ the root directory
/page a folder called page
/sub-section another folder called sub-section
In the last folder, you would then have your index file, which will be loaded once visiting the URL. For example index.html.
In terms of web development this is named routing and all the big web frameworks come with own modules for routing. Here you don't have to create directories as described above, instead these frameworks will handle the request and route it internally to find the right content and display it for that route.

How to use different style sheet js files website and after login dashboard in Angular2

I'm new to angular 2. Learned to develop single page application for website(front end). But what I want is after login, have to use another style sheet and js files dont load website's css, js files.
For example:
Before login
abc.com or abc.com/* => load css1, js1 files only(frontend site)
After login the page should change like Admin Template
abc.com/dashboard or abc.com/* => load css2, js2 files only(backend site)
May user can access frontend site even after they logged in.
Please help me how to do this.
The sample code I tried only for single page application from tutorial, so i think no need to post here. Let me know if my question not clear.
Note: it is in Angular 2 not Angularjs
You can do this by writing code in component CSS files and include that by using styleUrls. For dashboard write your CSS files inside that component.
For JS file you can load that particular js file by HTTP request before dashboard display.

how to integrate a static landing page with its own design at root route using ui-router

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.

how to retain the template view in angular js routing

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.

Load a directory in a js with flask

I would like to declare in a script, a directory.
$images_dir = '{{url_for('.../pictures')}}';
My flask application directory looks like:
Root
-wep.py
-templates
-gallery.html
-static
-pictures
The picture are located inside the pictures folder, and the html page that contains the script is gallery.html which located in the templates folder.
The purpose of that script is to list all the images that are located in the pictures folder and present them as a gallery view when the gallery.html page is loaded.
The script works fine if I run it in a normal apache webserver though.
When I run the web.py, the debuger gives me the error:
BuildError: ('../pictures', {}, None)
So I think the problem is to declare the directory in flask.
UPDATE:
Im using this guy's script : http://davidwalsh.name/generate-photo-gallery
As you can see in the source code:
/** settings **/
$images_dir = 'preload-images/';
$thumbs_dir = 'preload-images-thumbs/';
Im trying to adjust those line to work with flask.
I think you're misunderstanding the purpose of url_for. url_for is for generating a link to one of your application's HTTP endpoints/view functions. You don't need any flask-specific method to get a list of files. You might find glob or os.listdir() helpful for this purpose. Then you can pass a list of the relevant paths to your template for rendering.

Categories