I developed a web app using bootstrap, angularjs. I used routeprovider to route between pages. The app was working fine when debugged using Visual Studio. The application is running well and I can route between pages. But when I load the index.html from localmachine file:///C:/Users/index.html the script file is not loaded and nothing works. I have to deploy this webapp to a mobile app using cordova.
Thanks in advance.
script.js
app.config(['$routeProvider', '$httpProvider','$compileProvider','$locationProvider', function ($routeProvider, $httpProvider, $compileProvider,$locationProvider) {
$routeProvider.
when('/web', { /* Route provider with masterpage and templates*/
templateUrl: 'templates/web.html',
controller: 'webctrl'
}).
when('/login', {
templateUrl: 'templates/login.html',
controller: 'webctrl'
}).
when('/register', {
templateUrl: 'templates/register.html',
controller: 'webctrl'
}).
when('/account', {
templateUrl: 'templates/account.html',
controller: 'accountctrl'
}).
when('/share', {
templateUrl: 'templates/share.html',
controller: 'sharectrl'
otherwise({
redirectTo: '/web'
});
$locationProvider.html5Mode(true);
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
}]);
That's the limitation of the browsers. It is intended, that HTML pages, opened form file system are not treated as a trusted source... Take it as a security
Solution:
Use web server.
Any kind. And always provide your pages as such web server requests
Related
I couldn't find any documentation or article on this.
We here at the company I work for have MVC project.
And we build Angular SPA on top of it.
Also we want it to work offline.
So, I need cache. Found $templateCache module in AngularJS.
And trying to implement it.
Since the project is MVC, all the templates I want to load into ng-view are actually MVC partial views and I can load them by calling {Controller}/{Action}.
But the are no examples on internet ho to implement $templateCache in this case.
All the examples show how to use static templates, like mytemplate.html or just strings. This won't work under MVC.
So, I was trying to figure out how to accomplish that, wrote this, for app.ts:
namespace AppDomain {
"use strict";
export let app = angular.module("app", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/", { templateUrl: "Home/Template?name=Main", controller: "Controller", controllerAs: "vm" })
.when("/About", { templateUrl: "Home/Template?name=About", controller: "Controller", controllerAs: "vm" })
.when("/Contact", { templateUrl: "Home/Template?name=Contact", controller: "Controller", controllerAs: "vm" })
.otherwise({ redirectTo: "/" });
});
app.run(function ($templateCache) {
$templateCache.put("Home/Template?name=Main", "Home/Template?name=Main");
$templateCache.put("Home/Template?name=About", "Home/Template?name=About");
$templateCache.put("Home/Template?name=Contact", "Home/Template?name=Contact");
});
}
Obviously this doesnt work. Any suggestions? Thanks.
I have a symfony application which works in a subdirectory:
www.example.com/subdirectory
At this point my application is routed client side with angularjs-framework:
app.config(["$routeProvider", function($routeProvider) {
$routeProvider.
when('/', {
redirectTo: '/homepage'
}).
when('/homepage', {
templateUrl: 'index1.html',
controller: 'HomepageCtrl'
}).
when('/contact', {
templateUrl: 'index2.html',
controller: 'ContactCtrl'
}).
otherwise({
redirectTo: '/homepage'
});
}]);
When the site is loaded:
www.example.com/subdirectory
it automatically changes to:
www.example.com/subdirectory#/homepage
But it should be
www.example.com/subdirectory/#homepage
Anybody could help me to get this working?
Thanks and greetings!
For changing the base URL of your application you could use <base href="/subdirectory/"> inside your head tag of page.
But as per your $routeProvider setting the remaining part of URL seems OK to me. If you really wanted to change it then you need to replace
/homepage
with
homepage
in config phase of angular.
While developing some SPA AngularJS Application I define the rooting with $routeProvider. Everythings works fine, but I get tired with clicking through the whole application to see particular changes I've done anytime I republish the application to the server. Is there a possibility to change this behaviour? I mean, when I hit refresh on my browser or use some tools for automatical refreshing (like LiveReload Server) is there a way to tell angularJS to not to navigate to the default page?
Regarding to the comments below, here is the routing content.
Below is the MainRoutingContent
'use strict'
angular.module('MainModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'webapp/modules/authentication/views/login.html',
hideMenus: true
})
.when('/register', {
controller: 'RegistrationController',
templateUrl: 'webapp/modules/registration/views/register.html'
})
.when('/', {
controller: 'HomeController',
templateUrl: 'webapp/modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
}]);
The single html page has the ng-view defined:
<div>
<div ng-view></div>
</div>
And some additional for the RegistrationModule:
angular.module('RegistrationModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/register/user', {
controller: 'UserRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-user.html'
})
.when('/register/company', {
controller: 'CompanyRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-company.html'
});
}]);
Ok, I got it. I defined some run block in the main module of my application with the redirection to the /login page. Here is the code:
angular.module("app", [...])
.run(['$location',
function ($location) {
$location.path('/login');
}])
If someone will get such an issue with refreshing the page in the future, please look for some run block defined in your code.
So I'm playing around with learning angular and trying to make a project issue tracker, only I'm having problems with ngRoute and routing.
What I'd ideally like is a system whereby (say) issuetrack.com/projectX returns a view of all the issues for projectX, and issuetrack.com/projectX/XYZ returns a view of the specific issue with the related ID (XYZ).
I've setup my config as such:
tracker.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'static/partials/index_partial.html',
}).
when('/dashboard', {
templateUrl: 'static/partials/dashboard.html',
controller: 'DashboardController'
}).
when('/404', {
templateUrl: 'static/partials/fourOHNOfour.html',
}).
when('/:project', {
templateUrl: 'static/partials/project.html',
controller: 'ProjectController'
}).
when('/:project/:issue', {
templateUrl: 'static/partials/issue.html',
controller: 'IssueController'
}).
otherwise({
redirectTo: '/404'
});
$locationProvider.html5Mode(true);
}]);
But every time I visit (say) localhost:8080/example/1 the page just hangs and becomes unresponsive. localhost:8080/example works completely fine though.
Is what I've done the right way to go about it, or is there another way my googling hasn't been able to find?
Thanks!
Fixed! After several hours...
All you need is:
<base href="/" />
In the head of the index page where the ng-view is.
I have the following in my app.js file:
// Declare app level module which depends on filters, and services
var APP = angular.module('DiagsDashboard', ['ngRoute', 'DiagsDashboard.filters',
'DiagsDashboard.services', 'DiagsDashboard.directives', 'DiagsDashboard.controllers']);
APP.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/views/shared/Error.html' })
.when('/Error', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard/Error', { templateUrl: '/views/shared/Error.html' })
.otherwise({ templateUrl: '/views/shared/Error.html' });
});
But when I browse to:
- /localhost/#
- /localhost/#/DiagsDashboard/
- /localhost/#/DiagsDashboard/Error
- /localhost/#/error
The whole page re-loads and everything refreshes.
I've copied this code from a project where it works and I have angular-route.js included.
This is an MVC application located within IIS as a sub-application at /localhost/DiagsDashboard.
The issue was simply I hadn't give ng-app a name in the markup. I'd read that it is possible to use ng-app without a name but obviously that isn't the case.