I am developing a mobile application using Ionic framework. I get a JSON file containing the template and it's controller. The server will push data once there's data in JSON format. The problem is adding the states dynamically, and I have read that it's only possible at the config time.
Please tell me if there's a way to do this through a controller which will only be responsible of receiving and setting the new state and that will also receive the JSON and from it create the new state.
The help is highly appreciated!
Edit
I have found ui-router-extras (http://christopherthielen.github.io/ui-router-extras/#/future), but I don't know how to make it work for my application.
Suppose a controller gets the JSON using $http where the JSON looks like:
{
'name':'preview',
'template':'<h1>Hello</h2>'
}
How to add this state in this controller?
There are some simliar Q & A:
AngularJS - UI-router - How to configure dynamic views - this answer
Start Angular.js route-segment or ui-router after all translations are loaded
Angular - Dynamically Choose Starting State
Which shows, that UI-Router is shipped with a great feature:
$urlRouterProvider.deferIntercept(defer)
Disables (or enables) deferring location change interception.
If you wish to customize the behavior of syncing the URL (for example, if you wish to defer a transition but maintain the current URL), call this method at configuration time. Then, at run time, call $urlRouter.listen() after you have configured your own $locationChangeSuccess event handler.
There are some working plunkers here or here,
showing that in .config() phase we will stop url router:
.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
// States, which we know about from beginning
// could be declared "statically"
$stateProvider
...
// here we say STOP
$urlRouterProvider.deferIntercept();
}
])
Later, in .run() phase, we will 1) configure states via $http 2) enable url routing
.run(['$urlRouter', '$timeout', '$state',
function($urlRouter, $timeout, $state) {
$http
.get("modules.json")
.success(function(data) {
// here we can use some JSON to configure $stateProvider
// in example we can use $timeout to simulate that
$timeout(function(){
// here we turn all on again...
$urlRouter.sync();
$urlRouter.listen();
// there could be some decision, driven by $http load
// we just use some state as default target
$state.go("parent.child");
}, 1000)
...
Check it in action here or there
Related
We're using Next.Js in next export mode (static HTML export), and we need advanced dynamic routing.
Our routes will look like /[config1]/[config2]/[optionalConfig?]/page, where one segment is optional and the page names are fixed. For example a/b/c/page1 or a1/b1/page2. The pages need the configuration segment data to render.
I haven't found any way to do this with the built-in routing. I can do /pages/[config1]/[config2]/page1.tsx, but that optional segment seems to be an issue. Note that a custom server does not appear to be an option, as we have to use next export mode due to other constraints.
NOTE: We don't know the paths at build time; they represent part of our runtime configuration. This has to use client-side routing. (We do know the finite set of pages - say page1 ... page10 - but the routes to those pages will vary.)
I've tried switching to React Router, setting useFileSystemPublicRoutes: false and adding routes to pages/_app.tsx (Custom App). That almost works, but I see many 404s for on-demand-entries-utils.js in the console as well as some "Possible EventEmitter memory leak detected" warnings (in development mode).
Valid solutions (must work 100% client-side):
Way to do this with built-in routing
Example of integrating React Router with Next.Js
Alternative library (I've looked at next-routes but that hasn't been updated in 3 years)
UPDATE
We may be able to eliminate the requirement of an optional segment. However, it appears that we have to implement getStaticPaths and specify all of the routes. For example:
pages/[config]/foo.tsx
export async function getStaticPaths() {
// Runs at build time
return {
paths: [{ params: { config: 'xyz' } }],
fallback: false,
};
}
export async function getStaticProps(context) {
return {
props: {},
};
}
export default function FooPage(): JSX.Element {
return <div>FOO</div>;
}
This will generate
┌ ○ /
├ /_app
├ ● /[config]/foo
├ └ /xyz/foo
The issue is that we do not know the config at build time.
We need dynamic client-side routing. We'd like to stay with Next.js, as eventually we may be able to use SSR, but that's not an option at the moment.
You can create a catch-all route to grab the parameters, including the optional one, and then you'll need to render the right component based on that. So if you created:
pages/[...config].tsx
This is the same as:
pages/[...config]/index.tsx
Then in index.tsx, you can get the config as an array of strings in getStaticProps based on the url. So /config1/config2/optional is [config1, config2, optional] and /config1/config2 is [config1, config2].
So you can use this as a directory path of sorts if you need to add additional subpages under the known and optional paths.
HttpMethod.CallHttpPOSTMethod('POST',null, path).success(function (response) {
console.log(response);
$scope.htmlString = $sce.trustAsHtml(response.data[0]);
$timeout(function () {
var temp = document.getElementById('form');
if (temp != null) {
temp.submit();
}
}, 0);
});
I will get html string in RESPONSE of my API call. And then I will add the html to my view page.
If I write the code outside $timeout service it wont work as it will work when written inside $timeout service.
What is the difference between two ways?
How is $timeout useful here?
When you make any changes to the controller, it does not start asynchronously for two-way binding. If the asynchronous code is wrapped in special ones: `$timeout, $scope.$apply, etc. binding will happen. For the current code example, I would have tried replace you code to:
HttpMethod.CallHttpPOSTMethod('POST',null, path).success(function (response) {
console.log(response);
$scope.htmlString = $sce.trustAsHtml(response.data[0]);
var temp = document.getElementById('form');
if (temp != null) {
temp.submit();
}
$scope.$apply();
});
I tried to give you an answer in very simple language, hope it may help to understand your issue.
Generally, When HTTP request fires to execute it will send to the server and get the data from the server this is the general scenario we have in our mind. There may be a situation occur that sometime due to network latency it may possible to receive response delay.
AngluarJs application has its own lifecycle.
Root scope is created during application bootstrap by the $injector. In template linking, directive binding creates new child scope.
While template linking there is watch registered to particular scope to identify particular changes.
In your case, when template linking and binding directive, there is a new watcher registered. Due to network latency or other reason your $http request sends delay response to your $http request and meanwhile those time scope variable has been changed. due to that, it will not give the updated response.
When you send $http request to a server it is asynchronous operation. When you use $timeout ultimately your scope binding wait to numbers of seconds in $timeout function you defined. After n number of seconds, your scope variable watch has been executed and it will update the value if you get the response in time.
Ive created a basic Polymer app from the starter kit (via Yeoman). I've today deployed it to the 'sandbox' on my domain and am getting a strange routing issue. The app is essentially a feed reader.
View app here
When I first visit the app I'm given a blank page whereas locally I'm taken straight to the feed. When clicking on 'News Feed' I'm then taken to the feed as expected.
I've added a route for the path of the domain structure as below but this did not fix it.
You can view the full code of the project here.
routing.html
page('/', function () {
app.route = 'home';
});
page('http://purelywebdesign.co.uk/sandbox/f1feedreader/', function () {
app.route = 'home';
});
I've also tried:
page('/sandbox/f1feedreader/', function () {
app.route = 'home';
});
Any help much appreciated.
Page.js allows you to configure the base path:
page.base('/sandbox/f1feedreader/');
or just use window.location if you don't want to tie is to that specific deployment.
page.base(window.location.pathname);
This is an issue with the way the router page.js works. I assume you were testing with gulp serve (which creates a server and sets the web app base url of "/" to be localhost:3000/). The way you're currently setting your page.js routes is that it's looking exactly after the domain name and not at the "root" of the web directory.
In your case page.js is looking at everything after http://purelywebdesign.co.uk/ (meaning all your routes include should start from sandbox/f1feedreader instead of just /f1feedreader).
The documentation for page.js https://visionmedia.github.io/page.js/ says that it uses regular expressions so you could also update the strings.
My website is a posting site with posts from different countries. On homepage load i will make a service call and get all the posts using a controller($http) and will be displayed on the homepage.
In the homePage two dropdown and a button are given from which user can choose or filter the posts by country and theme, and results will be in different page.
I want to use the same controller response data without making a new service call to filter the response and show the results.
Please help me on how can i use the same controller or do i need to use a factory and then make the factory as a dependent to my controller??
The best way to do that is to do with a Service. Service is a Singleton, which means that construction will happen only once. In Service constructor you will load posts, and the from any controller you can access your data.
angular.module('myApp').service('myPostService', function($http) {
var Service = {
postList: []
};
// Here load over $http service your posts and then put it into Service.postList.
return Service;
});
Then inject the service and use the posts
angular.module('myApp').controller('HomeCtrl', function(myPostService) {
$scope.postList = Service.postList;
});
And in HTML iterate over it, filter and do whatever you want.
In my wordpress plugin I need to have a JSON option to load, using jquery, info about a custom post type. This jquery call will come in a page where all users should see it.
as far as i understand from the codex I should have a function:
function my_json_returning_function(){
// get json objects here
echo $json;
die();
}
As well as the actions:
add_action('wp_ajax_my_json_action', 'my_json_returning_function');
add_action('wp_ajax_nopriv_my_json_action', 'my_json_returning_function');
All in my plugin file.
then something like:
jQuery(document).ready(function($) {
var data = {
action: 'my_json_action',
};
// since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
jQuery.post(<?php echo admin_url('admin-ajax.php');?>, data, function(response) {
alert('Got this from the server: ' + response);
});
});
should call the function in question.
My real question is where i should place all the different parts - and if something is missing.
The php function and the actions hooks go into the plugin file. But the javascript I am more confused about. I want to put it in the plugin javascript file, but since i have to fetch the admin url using php that becomes a problem.
Also how do I make sure that the script is only called if in a certain page? Are there more hooks and filters I should be comfortable with? Or is it possible to load it using wp_enqueue_script when executing a shortcode on that page, or is that to late, as I would seem it needs to be loaded in the header.
A lot of questions, but I hope you understand the basis of my problem - I have a hard time placing the code in the right places in the wordpress structure.
EDIT:
Calling echo admin_url('admin-ajax.php'); is not, at least in my eyes the most elegant way of doing it. I'd rather have a json API, with its seperate url, and calling it in the ajax call. How would I go about setting up a page in wordpress that only returns a json object?
What you have above is partially correct.
when using the call to admin-ajax.php, you have in the comments from the wordpress codex page is
// since 2.8 ajaxurl is always defined in the admin header
// and points to admin-ajax.php
this is just it... use the javascript variable 'ajaxurl' in place of the php call..
so it would look like this
jQuery(document).ready(function($) {
var data = {
action: 'my_json_action',
};
// since 2.8 ajaxurl
jQuery.post(ajaxurl, data, function(response) {
alert('Got this from the server: ' + response);
});
});
that should be you.. just place all your functions inside your main plugin file.
when wordpress loads it will produce a variable called ajaxurl that you can then use in your scripts.. :)