I am making and app with Nwjs and AngularJS, the app is working fine on Windows but now I am trying to export the app to linux("Ubuntu"), but I am getting
a error with the certificate, on Windows I installed the certificate on "Trusted Root Certification Authorities" and in that case nwjs is getting all the files
without problem.
I will explain the code that I have now:
in the index file I have something like the following code, in that code I load the "js, css and html" from the server:
<script type="text/javascript" src="https://test.com/Devel/Main/js/first.js"</script>
<link rel="stylesheet" type="text/css"href="https://test.com/Devel/Main/css/file.min.css">
Like you can see I need load some files from a server in that case I named that "https://test.com".
in the Route file I have:
inspection.config(function($routeProvider, $translateProvider, $sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://test.com/**'
]);
$routeProvider
.when('/shipmentInformation/', {
templateUrl: 'https://test.com/Devel/Main/html/shipmentInformation.html',
controller: 'shipmentInformationController'
}).otherwise({
redirectTo: '/'
});
});
I tried the solution that I found here, after that I can see the certificate into the etc/ssl, then I
think that the process that I did is correct.
The problem that I have
I am not sure the equivalent of "Trusted Root Certification Authorities" on Linux
Where is reading nwjs the certificates
thanks for any help
After an investigation I found that I only need include the certificate into the package of my NW application with the option named "additional_trust_anchors", into that we can include an array of certificates.
Related
I'm using SPA technique using AngularJS in ASP.NET MVC framework,AngularJS routing between pages are working fine when it's run from VS2013,but after hosting the application in to IIS8.5 routing not working.
When i run the app using IIS express the url was http://localhost:12345/#/home
After publishing http://localhost/myapp/#/home
Here is my app.js,
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "/app/views/home.html"
});
In index.html
<li> Home</li>
When i publish my app in windows azure, app is working fine. Because the url was myapp.azurewebsite.net. myapp.azurewebsite.net/#/home
How can i host similarly in local IIS.
You almost find find the answer -- that is all about absolute file path.
Quick fix:
Change templateUrl: "/app/views/home.html" to templateUrl: "app/views/home.html" (remove the heading slash)
Answer:
If you specify the templateUrl as /app/views/home.html, which starts with /, you tell the browser to get it from root.
If your webapp is stored in http://localhost/myapp/, your browser will visit http://localhost/app/views/home.html to get the template.
That also explains why your app works fine when it is places in root directory, but not working in sub directories, like http://localhost/myapp/#/home .
Do not worry about the side effect of relative path. All the resources are calculated relative to index.html.
This is in relation to my question about changing node.js configuration in a cordova/ionic application - How to configure node.js routes in a cordova app
I didn't get a satisfactory answer to that. I also had a chat with couple of cordova/ionic guys on their blog, but they mentioned node.js cannot be configured by using express in this case and also did not have any clue to how it can be done.
So, my question is is it at all possible to do something like changing default port or url rewriting in node.js server when working with cordova/ionic applications?
Would love to know what you guys think.
Elaborating more -
Let's say I have a couple of routes like so -
http://localhost:6001/#/home/index
http://localhost:6001/#/content/index
As I didn't want the hash in URL, I added this in my app's config section -
$locationProvider.html5Mode(true);
Which works fine and URLs don't show '#' but on refreshing in browser, now I get this error -
Cannot GET /home/index
This is why I need URL rewriting to be done on server, which I can't seem to figure out.
These are my routes in app.js -
.state('home', {
abstract: true,
url: "/home",
templateUrl: "app/home/home.html"
})
.state('home.index',{
url: "/index",
views: {
"index" : {
templateUrl: "app/home/index.html"
}
}
})
$urlRouterProvider.otherwise('/home/index');
As we discussed in chat, the Cordova_CLI project uses a fixed server for rapid deployment through cordova serve (or ionic serve). This node server does not use express or other plugins to handle routing, it uses a script from the [cordova-lib][1] project.
The script provided for this development server does not take into account URL rewrites, so html5Mode would not work properly without modification of this script. It could be a fork as simple as replacing the do404 function logic to instead set filePath to /index.html.
another option would be running a separate web server (node+express or any other) and including the ionic/cordova scripts in the project.
Ideally, the production app would be running against a public server, and the Cordova_CLI server should only be an issue in dev environments.
Worked on basic routing in angular Js with Code1 mentioned below and getting "XMLHttpRequest cannot load Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource" error and founded that we must use local web server to resolve the same and downloaded MAMP and kept my html[login.html] in htdocs folder started the server and replaced templateUrl with [localhostURL/AngularJs/login.html'] as mentioned in Code2 and getting error of Error: [$sce:insecurl] exact error are given below, Guide me with any solution to fix the same in Google Chrome...
Code 1
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body ng-app="plunker">
<div ng-view=""></div>
<script src="angular.min.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('plunker', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/login',{
controller: '',
templateUrl: 'login.html'
}).otherwise({
redirectTo: '/login'
});
});
login.html
Hello from login!
Code2
All other thing are same with changes only in app.js
var app = angular.module('plunker', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider.when('/login',{
controller: '',
templateUrl: 'http://localhost:8888/AngularJs/login.html'
}).otherwise({
redirectTo: '/login'
});
});
Error Code1:-
XMLHttpRequest cannot load file://localhost/Users/karthicklove/Documents/Aptana%20Studio%203%20Workspace/Object_Javascript/Angular_Js/Routing/login.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
Error Code2:- [$sce:insecurl] http://errors.angularjs.org/1.2.26/$sce/insecurl?p0=http%3A%2F%2Flocalhost%3A8888%2FAngularJs%2Flogin.html at Error (native)
I got the similar error. I got a solutions for this, we cannot use Routing in AngularJS by keeping it in your file system. (i.e)file:///C:/Users/path/to/file.html?r=4383065' If you run with this URL you will get error. The route provider will use http protocol. So you have to put your code inside the localhost and then run from browser localhost/foldername/index.html . Don't run it from the folder directly
And also change your template URL like this
templateUrl: '/AngularJs/login.html'
If you have doubt post here.
If you are running a page directly from Chrome (you just double clicked on an html file) and your javascript is trying to request some data you will hit this error.
Reason :
$routeProvider uses HTTP service for requesting data and this request cant be sent unless you are using any server like Tomcat.
Solution :
Deploy your app in any server like Tomcat in your machine and open your page through server.
If you think your just playing around with Client-Side coding then better open file in other browsers like Firefox / Safari.
the issue is probably that you are viewing you page through a different port (port 80 is default http port) yet you are accesssing port 8888 so it would see thee this as a cross origin request and block it think it is potentially a XSS attack or similar.
if you are already on the same port, change the template url to
templateUrl: '/AngularJs/login.html'
Issue mentioned here is resolved by making this as an application i.e when i made this html+angular js page to server dependent and run on server the problem is resolved it works fine in google chrome browser...
As other people have said the problem is the $http service from angularjs and you can work around this by hosting a static file web server.
You can do this without much work by using the http-server npm package.
npm install http-server -g
And start your web service like so.
http-server "C:\path\to\project\"
You will see the following output and can browse the app by using one of the displayed urls.
Starting up http-server, serving ./
Available on:
http://192.168.206.1:8080
http://192.168.89.1:8080
http://192.168.7.202:8080
http://127.0.0.1:8080
http-server is a simple, zero-configuration command-line http server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development, and learning.
Just be aware that both the web server and the browser now caches your requests.
New to angular and I've been having trouble with what should be a simple directive for the past hour or so. Would really appreciate some help!
I believe hello should appear, can't seem to get it to work?
test.html
<html>
<head lang="en">
<title>Test</title>
</head>
<body>
<div ng-app="myApp">
<hello></hello>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
var myApp = angular.module('myApp', []);
myApp.directive("hello", function() {
return {
restrict: 'E'
templateUrl:"hello.html"
};
})`
hello.html
<p>Hello</p>
If you are testing locally and using Google Chrome then this will not work because AngularJS is making an Ajax call to these html files, but Chrome blocks this with the error:
XMLHttpRequest cannot load file:///[filepath...] Cross origin
requests are only supported for protocol schemes: http, data, chrome,
chrome-extension, https, chrome-extension-resource.
You can verify this by opening up your developer console and viewing the errors.
To get around this a couple ways:
You can create a simple web server to run your code. If you have python you can just run the command (EDIT: from your folder containing index.html):
python -m SimpleHTTPServer
You can disable same origin policy in Chrome:
https://stackoverflow.com/a/6083677/1100379
Use an Chrome extension which may do this for you. I looked one up and this was the first result:
Allow-Control-Allow-Origin
Everything works fine, just make sure your syntax is correct.
Do not miss comma's in JSON
myApp.directive("hello", function() {
return {
restrict: 'E',
^
templateUrl:"hello.html"
};
})
Demo: http://plnkr.co/edit/Z6rjbsuqzmcD4gBem36c
Actually we need to give the relative path for the templateUrl directive. Relative path which totally depends on component file in which you are giving path.
lets assume your file path may be like - app/hello.html
then your templateUrl path should be like - templateUrl:"./hello.html"
open dev tools in chrome go to network tab find reqest for hello.html compare reqested path with your path to hello.html on server. Move hello.html in proper place or update templeteUrl
Open your NodeJS command propmpt and install http-server using npm install http-server
http-server is a simple zero configuration command-line http server.
Once installed, just use http-server -o in your NodeJS command prompt.
Download Python and add it to you path environment variable
Create a cmd file to start python server in the directory where your index.html stays.
2 a) Create a new text document in the same root as your index.html
2 b) write - python -m SimpleHTTPServer 8080
2 c) Save as type 'All Files' and with some name like startServer .cmd
Now the workaround for failing AJAX call has been done. Oen in browser 127.0.0.1:8080/index.html
You can import template in the script and use it as a "template", not "templateUrl":
import hello from 'hello.html';
var myApp = angular.module('myApp', []);
myApp.directive("hello", function() {
return {
restrict: 'E'
template: hello
};
})
You can use:
userManagementApp.directive("ngCreateUserForm", function () {
return {
templateUrl : '/template/create.html'
};
});
and in Server side, you must serve youre template like static file
in Go: e.Static("/template", "/path/to/static/folder")
or
in httpd config:
Alias /template/ "/path/to/template/folder"
I'm using angular to develop an application. I'm developing off my local file system, on Windows. However, when I enable angular-route.js, whenever I hit index.html with my browser, it instead goes to index.html#/C:/.
My route definition is:
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'});
}
I think this causes the site to break, because /C:/ doesn't match any angular routes. What's going wrong? How do I fix this?
For routing & ajax (& more) to work properly, run a local development server; avoid use of file:// for development, since browsers have different rules for it.
Tools like yeoman + generator-angular will automatically set up a gruntfile with a server task, which will run a node-connect server to locally serve your files.
You can do this with
python: (3)python -m http.server 8001 (replace http.server with SimpleHttpServer in 2)
node.js + connect
ruby + rack
From the angularjs tutorial (number 5 under "working with the code") - "You need an http server running on your system, but if you don't already have one already installed, you can use node to run scripts\web-server.js, a simple bundled http server."
Response from comments: For phonegap, use the phonegap tools. It does exactly what I said, it runs a local server.
This will work.
angular.module('MainModule', []).config(function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix("!");
$locationProvider.html5Mode(false);
$routeProvider.when('/', {template: './js/templates/home.html', controller:HelloWorldCtrl});
$routeProvider.when('/other', {template: './js/templates/other.html'});
});
In index HTML you need to specify templates:
<script type="text/ng-template" src="./js/templates/home.html"></script>
<script type="text/ng-template" src="./js/templates/other.html"></script>