I am new to Meteor/React and am trying to figure out how to create a multi-page application. I'm getting really confused about how to actually get routing to work. I want to have multiple html files that, depending on what happens on one, will cause another one to be rendered. For example,
I'm on main.html and I click a button -> and it should then cause secondary.html to render on the screen. I hit another button on secondary.html -> and it directs me to tertiary.html.
However, whenever I launch an application, all my html files just get rendered all at once (something that Meteor just does automatically I guess). I've been trying to work with FlowRouter. Any help or advice would be greatly appreciated!!
I'm getting confortable with iron:router package, you can see the documentation here : https://atmospherejs.com/iron/router
Have a look on what options you can add to this by visiting the documentation...
But still, this is how you implement it the easiest way :
Router.route("/myCustomRoute",function(){
this.render("/myCustomTemplate")
}
By doing this, you will allow your application to have multiples routes :)
However, FlowRouter is a very good option (maybe better) but it will be the same "logic of code" behind :)
Hope it will help !
Related
Over the last week I tried to create a single page application without using the template provided by Oracle. My goal is to load the modules by clicking on simple headers or divs.
I know that OJ-Module and the CoreRouter are needed, but nothing I’ve tried so far has worked.
Maybe someone can give me some hints on this.
Thank you
I am trying similar methods and it is the best way of getting hang od the syntax, variables and the structure.
I created projects of all the 4 templates in different folders. Each one serves as a reference on how to implement a specific set of features like CSS, behaviors in my new app, created out of the blank template.
I also created a demo project. This project contains the specific element from cookbook I am trying to understand (one or two at a time and not more) and then implement the learning in the blank template, which I started filling already. The demo project keeps getting erased and recreated in my case.. You can choose to retain different demo projects if you need.
Most important will be the understanding of concepts like the busyContext, dataBinding, ResponsiveUI, Require, AMD, ojModule, inter-module interactions and the creation of events, views and viewMdels. Once you get past the initial hiccups, the APi docs are a great assistance in helping you programmatically control the entire behavior of the application features.
BTW: Do not remember the css variables. I think it is a bad idea to maintain so much material in your mind, which could otherwise be easily referenced in a document. You only need to know which documents have what content..
Hello Stack Overflow community,
i'm a beginner who wants to create a web application with vue.js. It should be a one page application, which has a header and body. The header shows always the same content, but i want to change the content of the body when the user interacts.
It should work like this:
The page starts at www.mypage.com/home. Then the user presses a button and the content of the body shows something other and the url changes to something like www.mypage.com/contentOne, but the header doesn't change at all and the side shouldn't be reloaded. I saw a similar application with react.js, but i found nothing for vue.js.
Do i need a something like node.js or Ruby on Rails and if, is there a tutorial for this?
Thanks for your help.
You don't need to worry about Node.js or Ruby on Rails.
I'd recommend using the Vue CLI to build your app, because it'll save you having to worry about all the config yourself. It'll come with vue-router, which will let you build a Single Page Application. Your header will go in the main App.vue file, and then you can load the body of the page into what's called the router view.
Have a look at the Vue Router docs which are really good and well-written.
Have you even searched? When you go to the "Get started" section on vuejs.org (https://v2.vuejs.org/v2/guide/) there are excellent examples and tutorials, one of which is https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/
This will get you a long way creating what you describe above
I am using Angular 1.7.2 in a project i'm working on. (I prefer Angular 1.x)
I am doing the bootstrap process manually (because i'm adding scripts programmatically).
But, I am having 2 issues with the manual bootstrap process.
I have to use a setTimeout, else the bootstrap never works. And my problem with this is, the more files I add to my project, the longer i have to make the timeout.
Sometimes when I load my web page or refresh the site, not all my components are loaded. If i monitor the network traffic, i can sometimes see that the html files are not retrieved at all. And there are no errors in the console or anything.
It seems to me there must be something happening in the angular.boostrap process that is failing or getting stuck, but i can't figure it out.
For my first issue, why is the setTimeout required, is there a way to not need this?
Second, why does my site not load sometimes?
Could it be related to the OS locking the files temporarily because of all the source control, anti-virus, other services running on my computer? If so, how can i tell?
I put together a test project with relevant code here on github
I previously thought this was related to the routing, but it's not (see here), But it seems not related to angular-routing after all.
Any information would be much appreciated, this is driving me mad.
Update 1:
I have the code running here on github pages.
Best chance to replicate issue is to use google chrome, enter url, open dev tools (f12), then actually load url. Sometimes, the page doesn't load completely.
I have updated the test website to better reflect my project where I add scripts dynamically.
I think i found the solution thanks to a comment by igor
I moved my app.route.js file to be loaded before any of my angular component and directives and from what I can tell this solves my problem.
I will update the linked sample project too
I'm currently looking at putting together a website with ASP.NET MVC that gives the viewer the ability to move around from page to page (view to view) without it being refreshed each time.
The way I'm currently thinking of doing it treating views as 'areas' (or mini master pages) and using partial views in the place of views. I'll then switch the partial views in and out as needed using AJAX calls to the controller (which will load the partial view) and JavaScript.
I feel like I could have explained this better but I'm not quite sure how to phrase it, so hopefully this diagram will help somewhat:
Here's a look at my current folder structure. Index.vbhtml is acting as the aformentioned 'area'.
Views/
Accounts/
Partials/
ViewAccount.vbhtml
CreateAccount.vbhtml
Index.vbhtml
I'm loading my partials views in using a JS function along the lines of: nav.navigateToView("Action", "Controller")
For example: nav.navigateToView("ViewAccount", "Accounts" will load the ViewAccount.vbhtml partial view onto my page.
What I'd like to know is: Is there currently a defined method for doing this, or perhaps a library I can use to aid me? If not, could you give some helpful advice on how to achieve this? I'm not convinced the method I've described will be adequate.
Apologies if this question has already been asked! I've had a tough time trying to find anything relevant on this topic. Am I missing something simple?
Thanks,Aaron.
From the description you have provided, I think what you are describing is a single page application (SPA). Needless to say, there is a bunch of articles available so sorry for not being more specific.
One approach would be to use Angular.js which is a Javascript framework, described here and here (and thousands of other sites).
ASP.NET Single Page Application (SPA) helps you build applications that include significant client-side interactions using HTML 5, CSS 3 and JavaScript. It’s now easier than ever before to getting started writing highly interactive web applications.
Please see this site.
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.