Angular JS navigate with $location - javascript

I have a problem with navigating between web pages using Angular JS. First web page is index.html, next main.html and also exists a myscript.js file and style.css (but the last is irrelevant in this case).
I want to navigate from index.html to main.html by pressing a button, furthermore there are 2 variables to pass from index.html to main.html and I have to load the next web page with ui-router method or with $location variable in the actual window, as replacing index.html but not with traditional method.
How can I do this?
Thanks for answers!

Using ui router is more flexible work with states, if you have index.html inside you should have a ui- view attribute to change view dynamically, so in your script.js file you have to configure your states, partials views and controller per state (if you want , also you may work with resolve data), and to pass data between controllers you could use services or factory.
This tutorial could help you.

Thanks to everybody for answers! :)
The simpliest method was to create 2 divs on the same HTML page - checking a flag value to display divs using ng-show - instead of navigating between pages.

Related

Load HTML from html file into Vue div

So, I'm using jsfiddle to follow THIS
{{respondedText}}
<div>{{respondedText}}</div>
However, say I want to read in HTML content from a file or site and then load it into that div; instead of displaying "Event Received: Event 2".
This is ultimately a building block for me in what I'm trying to use it for. I'm hoping, by successfully getting this example to work, that I can build a webapp that has buttons that, onpress, will load html from another local file on my server without reloading the entire page.
To fill an element with active HTML you have to use the v-html directive
<div v-html="respondedTest"></div>
This will allow any valid HTML but you have to note that you can't load Vue components asynchronously this way; It's only for static HTML.
Here is your JSFiddle Updated to send some HTML with the click events.
EDIT:
Looking into the spirit of your question you might want to look at vue-router It's a pretty good system to allow you to have a single page app with a routing system similar to a standard page routing system. It also allows you to mount Vue components in your pages instead of static HTML.

Restart angular app after its html has been replaced

So I'm working on and application that is a terrible mix of MVC and Angular2.
On my Index page we have a partialview loading the angular app. The index page also has all other javascripts links that are needed to get the angular app working.
This all works fine on the first load, but there's an asynchronous call that calls this grid partial view again and replaces the Angular application with <my-app>Loading...</my-app>.
Question
Is there a way in javascript to reload/restart the angular application after this asynchronous call has been made and the html has been replaced?
Index (main view)
<div>
#Html.Partial("Grid")
</div>
Grid (partial view)
<my-app>Loading...</my-app>
Let me know if I need to do a more in depth explanation.
EDIT
My limited knowledge of Angular suggest that there should be a way to re-run the javascripts that are run on the first load. Isn't it that simple? Just run the boot.js again or something similar? I mean the <my-app> tag is already there.
This was already answered in this GitHub issue a while back but I don't think it is valid on angular 4 anymore
Honestly, This is kind tricky but my idea (I didn't try this) is to do the same on the module bootstrapping level
in the main.ts
export var applicationRef;
platformBrowserDynamic().bootstrapModule(AppModule).then((_appRef) => {applicationRef= _appRef}
);
then you can call destroy() on applicationRef and then you bootstrap the app again to reload it.

How to reuse router object on another html page in Backbone JS?

I am fairly new to Backbone JS and still figuring out its nuances.
I have created a router class in main.js which is included in index.html. Also, I have created an object of that router class associated to same html page.
Now, if I redirect to next html page all the created objects get lost. Even if I associate it to window object, it also get lost on a page redirect.
So, my question is how do I reuse my router object on next html page without storing it in sessionStorage or localStorage?
Should I always include the router js file on each html page and create a new object every time? Is there any other way to achieve what I am trying to do? Please enlighten me.
Backbone.js is primarily designed to create SPAs (single Page Applications) especially the routing which is based on the hash change events by default.
For some reason if you must have actual redirection between HTML pages, then considered each as separate applications, i.e both should load the libraries, setup their own backbone components etc. Data can be shared between them using client side solutions like localStorage or REST API.

How to define multiple main pages in angularjs?

I want to have multiple main index pages that should be accessable independent from each other. Means: there is no global page providing static links to all of the main index pages. Each should live on its own:
WebContent/indexA.html
WebContent/indexB.html
...
Question: how can I write an angularjs controller that shows these pages, if I do not call the*.html extension, but a get-query on that path?
I want to be able to call:
localhost/indexA?param=123
localhost/indexB?test=xyz
Each of them will then map to their own html page, and the request params are to be processed by the controller of that page only.
Is that possible? If yes, how?
If I understood correctly, that you need to use same code (Controller) on different HTML pages, loaded with different URLs.
First option is to use directives to encapsulate same logical parts (Each directive can have attributes, you can provide them in HTML, depend on how is your HTML structured). This is good, when you do not have any routing in your app now.
Second option is to use ui-router with HTML5 routing (then you can pick parameters from URL), this will probably require you to move more logic on frontend, but it is clear solution, if this is not small project.
Next option is to put required parameters into script tag of HTML and then load them from your controller - this is dirty, but quick way of solving your issue.
Try ui-router for the same.
Based on the parameters you pass, you can choose the active state where you can have your own controller and templateURL

ng-include doesn't seem to be requesting specified template for inclusion

I have an AngularJS app that I'm trying to get working with a Rails rest api. I am to the point where all the javascript seems to be loading without errors, but some templates don't seem to be included properly when I use ng-include. Here is an example:
<div ng-include="'<%= asset_path('header.tpl.html') %>'"></div>
When this section loads, I never see any attempt to load the specified template in the browser console. Any suggestions as to why the template isn't getting requested?
You have conflicting single quotes.
If you need to dynamically change what will be in the ng-include, try setting the value programmatically and then just pass that variable to the ng-include.
<div ng-include="templatePath"></div>
<script>$scope.templatePath = "header.tpl.html";</script>
Later in the code you can change the value of $scope.templatePath to whatever other file you need.

Categories