I just finished coding a new web project using AngularJS and Bootstrap. The development took place using Brackets, an editing tool that launches Chrome for testing while functioning as the web server.
So far, everything works as required both when Brackets is used as the server as well as when the whole project is deployed within a Tomcat installation, and this as long as the browser being used is Chrome and the machine is a Windows 10 computer.
Now, I started testing the project using different browsers and devices (e.g tablets, mobiles, etc.) and, oops! I am getting crashes all the time.
It would appear that the first (and perhaps central) issue is coming from the way I implemented and use Angular's routing services (or, at least, this is what is suggested by several posts I found). Two things are happening (depending on the browser and the action triggered) pointing in that direction:
I received many times the error infdig, meaning that there is an infinite reload loop somewhere,
When the user successfully logs into the the system, an object containing the user's details is stored as a $rootScope object, and when a $window.location.href command is used to move to other page, all the user information previously stored disapears (strangely, this s not happening with Chrome, but it is with IE and Edge!).
Unfortunately, I was unable to fully understand what is the proper way of using the routing services.
The structure of the project is:
[MyApp] -- This is the folder containing the whole project under TOMCAT's "webapps" folder
index.html
index.js -- Contails the controller related ot the index.html page
[pages] -- Sub-folder hosting all the pages of the project except for the `index.html`
page1.html
page2.html
:
:
[js] -- Sub-folder hosting the controllers of each and every sub-page
page1.js -- Sub-page controller
page2.js -- Sub-page controller
:
:
Transition to the sub-pages (e.g. page1.html, etc.) takes place using the command $window.location.href = "#page1.html";, and the routing service is defined:
$routeProvider
:
:
.when('page1.html', {
templateUrl: '#/pages/page1.html',
controller: 'Page1Controller'
}
.when('page2.html', {
templateUrl: '#/pages/page2.html',
controller: 'Page2Controller'
}
:
:
Based on some posts related to how to define routing, I also tried:
.when('page1.html', {
templateUrl: 'pages/page1.html',
controller: 'Page1Controller'
}
and
.when('page1.html', {
templateUrl: '/pages/page1.html',
controller: 'Page1Controller'
}
getting errors in both cases (e.g. page not found).
Additionally, it is not clear to me what is the impact of including the statement $locationProvider.html5Mode(true); (when including this, I got an injection error).
How can I properly use this Angular routing service, and how can I set HTML5 mode?
Routing params: the way I've done it and it works for me and its simple is using the same route function I showed before:
Then if you look at 'searchresult/:searchCriteria' :search criteria is already a parameter that I am putting in a JavaScript variable called sys (i.e at the beginning of my JavaScript I declare variable var sys = null;).
Then on the SearchResult Controller I put the value of sys inside a $scope variable let's say $scope.sys = sys;. This gives you the variable both in the scope and in JavaScript if you want to check the values in developer tools console and/or play with them.
To call the pafe http://url/#searchresult/myvalue
Just like before call $location.path("/searchresult/myvalue")
like this you can create a path with many arguments (i.e "/searchresult/myvalue1/myvalue2/myvalue3") and they all will be stored in the variable sys
PS: if you want to change your whole url use window.location.replace('new url') without any $. The difference between this routing and the Angular is that this will refresh the page while angular will only refresh your ng-view
Regarding the page not found issue make sure that templateUrl: 'pages/page2.html' has the same path as in the actual folders
- capital letters
- the s in "pages" is also present in the pages folder
Also make sure that the permission are ok such that your application is not getting denied access to the file. I don't know what OS you are using but make sure your application can access it
Regarding the loop error, to help I would need to see a bit more code, but if you open the application in Chrome and see the error in the developer tools it may give you a hint as of where your application is crashing. The other approach is to start commenting part of the application until you don't get the error to find the problematic line then analyze.
This is an example of a controller I use without problems:
Related
here in my local my application is working and previously the build edition used to run in docker also but when we moved to aws the issue we arised is some url and not navigating when we try to navigate i am getting
the link is this http://www.sometesturl/demo-page
and other routing url are working and it is like i declared like
on clicking it has to redirect and like this i have 7 other pages which are working but only this page is not working and i applied
RouterModule.forRoot(
appRoutes,
{ enableTracing: true,useHash:true,anchorScrolling:'enabled' } // <-- debugging purposes only
)
useHash:True also but whats happening is then the url stays in the same page i mean if click on the demo page then it redirects and come back to the same page again like http://www.sometesturl/#/ to http://www.sometesturl/demo-page to http://www.sometesturl/#/ it even doesn't redirect also if i use Hash is there any config rules to be written for aws instance
I'm trying to familiarize myself with the concept of using script tags. I'm making a ruby on rails app that does something as simple as alert "Hi" when a customer visits a page. I am testing this public app on a local server and I have the shopify_app gem installed. The app has been authenticated and I have access to the store's data. I've viewed the Shopify API documentation on using script tags and I've looked at the Shopify Embedded App example that Shopify has on GitHub. The documentation details the properties of a script tag and gives examples of script tags with their properties defined, but doesn't say anything about where to place the script tag in an application, or how to configure an environment so that the js file in the script tag will go through.
I've discovered that a js file being added with a script tag will only work if the js file is hosted online, so I've uploaded the js file to google drive. I have the code for the script tag in the index action of my HomeController (the default page for the app). This is the code I'm using:
def index
if response = request.env['omniauth.auth']
sess = ShopifyAPI::Session.new(params[:shop], response[:credentials][:token])
session[:shopify] = sess
ShopifyAPI::Base.activate_session(sess)
ShopifyAPI::ScriptTag.create(
:event => "onload",
:src => "https://drive.google.com/..."
)
end
I think the problem may be tied to the request.env. The response is not being read as request.env[omniauth.auth] and I believe that the response coming back as valid may be required for the script tag to go through.
The method that I tried above is from the 2nd answer given in this topic: How to develop rails app for shopify with ScriptTags.
The first answer suggested using this code:
ShopifyAPI::Base.site = token
s = ShopifyAPI::ScriptTag.create(:events => "onload",:src => "your javascript url")
However, it doesn't say where to place both lines of code in a rails application. I tried putting the second line in a js file in my rails application, but it did not work.
I don't know if I'm encountering problems because I'm running the app on a local server or if there is something missing from the configuration of my application.
I'd appreciate it if anyone could point me in the right direction.
Try putting something like this in config/initializers/shopify_app.rb
ShopifyApp.configure do |config|
config.api_key = "xxx-xxxx-xxx-xxx"
config.secret = "xxx-xxxx-xxx-xxx"
config.scope = "read_orders, read_products"
config.embedded_app = true
config.scripttags = [
{event:'onload', src: 'https://yourdomain.herokuapp.com/javascripts/yourjs.js'}
]
end
Yes, you are correct that you'll need the js file you want to include for your script tag publicly available - if you are using localhost for development look into ngrok.
Do yourself the favor of ensuring your callbacks use SSL when interacting with the Shopify API (i.e. configure your app with https://localhost/ as a callback setting in the Shopify app settings). I went through the trouble of configuring thin as the web server locally with a self-signed SSL certificate.
With a proper set up you should be able to debug why the response is failing the omniauth check.
I'm new to the Shopify API(s), but not Rails. Their documentation leaves a lot to be desired.
Good luck to you sir,
I am using UI-Router for routes/states in my app and URLs were having "#" so to remove this , I used $locationProvider like -
function configState($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
Added ngRoute in module dependency and added <base href="/" > in my index.html.
Problem -
If I am using it as a normal app like in same tab and navigates to other state, it works BUT whenever I pasted the URL in another tab and hit enter its throwing Cannot GET /app_views/contacts URL is like - http://localhost:9000/app_views/contacts
Though with hash in URL it works in both way manner.
You are likely getting this error because your server is not configured correctly. In other words when you manually enter /app_views/contacts it will make a request to the server for that page. For this to work properly you need configure your server to route all traffic to your index.html page in order for Angular to properly take over and display the correct view.
Here is a related post Reloading the page gives wrong GET request with AngularJS HTML5 mode
I have been attempting to learn how to build a Rally app using the rally-app-builder. I began wiith the Your first Rally app tutorial at https://help.rallydev.com/apps/2.0rc3/doc/#!/guide/first_app, after following the instructions for installing Node.js, and the rally-app-builder, I got to the step where we are supposed to add a rallycombobox to our app. However, when I run the App-debug.html file, my screen is blank. I have attempted to add other objects rather than a combobox and still nothing appears on the screen in the browser. I noticed that one other person had asked this question several months ago, but there is no answer posted as to why this might happen. I attempted to view the App-debug.html file in several browsers as well. None of them displayed the expected output.
Here is the code for the app.js file.
Ext.define('CustomApp', {
extend: 'Rally.app.App',
launch: function () {
this.iterationCombobox = this.add({
xtype: 'rallyiterationcombobox',
listeners: {
ready: this._onIterationComboboxLoad,
scope: this
}
});
},
});
If I use the exact code you posted I get this error in the console of Chrome's DevTools:
Uncaught TypeError: Cannot read property 'fn' of undefined
The reason for it is that in this code _onIterationComboboxLoad is called but never defined.
Try an alternative browser and check javascript console for errors.
To fix the error you may add this method after launch :
_onIterationComboboxLoad:function(){
//can be empty for now
}
As far as general steps to use rally app builder, try this:
Assuming rally app builder is installed, a command rab --version should return a version, e.g. 0.9.2
In the terminal, cd to a directory that you created for a Story Board app.
Run this command:
rab init "Story Board" 2.0rc3
You should see this output:
Creating a new App named Story Board
Creating App-debug.html
Creating App.html
Creating App-uncompressed.html
Success
Look at the code that the rally-app-builder (rab) generated:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
items:{ html:'App SDK 2.0rc3 Docs'},
launch: function() {
//Write app code here
}
})
Open App-debug.html in a browser.
There should be a link to AppSDK2rc3 documentation on top of an otherwise empty page. This link indicates that the app is working.
Assuming it works, you may delete the content of App.js file generated by rab and replace it with the entire code example from the Building Your First App guide here. Copy the entire code of App.js under "The finished app should look like this" and test it in the browser to make sure it works. After that you may delete the content of App.js file once again and go back to the guide and follow it step by step, knowing what to expect.
If at any point you get an empty page, check the console in Dev Tools of your browser and also try alternative browsers. If you are not currently logged in to Rally in another tab of the same browser you will be prompted to login when loading App-debug.html.
There's a couple of things that I have learned with this problem and I had a lot of issues with finding information on the blank Story Board page.
One is that you should be using an API key in the URL string that is defined at the Rally instance that you are trying to access. Without that, you will be faced with errors that show up in the Development tools as no "Access-Control-Allow-Header" errors and a blank screen. So the process would be developing with rally-app-builder that you run the web instance locally with rally-app-builder -run then in the URL when the web browser opens add a ?apiKey="Your api key" then refresh the browser.
I've had this problem for over 2 days and I've spent around 10 hours researching, but NOTHING has worked so far. I'm keeping my stress levels in check, but this is downright infuriating!
This jsfiddle has everything aside from the "page1.html" file that I'm trying to load
http://jsfiddle.net/tAmr3/
I want to load a sibling (same directory), page1.html file as such:
var playground = angular.module("playground",['ngRoute'])
.config(function($routeProvider){
$routeProvider.when('/Page1', {
templateUrl: 'page1.html', // **THIS LINE DOES NOT WORK**
controller:'page1Ctrl'
}).otherwise({redirectTo:'/'})
});
The problem is that "templateUrl" refuses to work!!!
The $routeProvider knows when I'm trying to access Page1 because page1Ctrl is console.logging successfully
The problem here was serving the angular app over file:// and having Angular trigger a cross-origin request when it tried to fetch the template over http://.
The easiest solution to that is to use a webserver rather than accessing the file-system directly.