I want to take an angular application that works fine on my own domain and 'embed' it into several other sites.
The app uses partials with the ng_view directive so that the only thing i need to do to 'inject' my app into one of my pages is...
<div ng-app="myapp" ng-view></div>
My app looks like this...
angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives', 'ui']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({templateUrl: 'partials/mainTemplate.html', controller: myController});
}]);
this works fine, but when I try to 'inject' the app into another site, In addition to externalizing the script references, I changed the app to look like this...
angular.module('myapp', ['myapp.filters', 'myapp.services', 'myapp.directives', 'ui']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({templateUrl: ''http://mydomain.com/partials/mainTemplate.html', controller: myController});
}]);
But it doesn't work... no errors, no nothing, it just doesn't render my app.
Any ideas? are external partial references allowed?... is the browser being over-protective? Should I take a completely different approach??
I think you should enable CORS on mydomain.com in order to get the view. And, as bUKaneer says, you have to add mydomain.com in the $sceDelegateProvider.resourceUrlWhitelist
Related
I want to redirect to another web page when I click a button. Please find the following code
js
app.controller('myCtrl', ['$scope', '$location', function($scope, $location) {
$scope.redirect = function()
{
console.log($location.url());
};
}
I can obtain the current url using $location.url() which is follows
http://IP:Port/?myId=this-is-my-test-page
What I want to do is i want to redirect to the following page when i click a button
http://IP:Port/?myId=this-is-my-test-page2
I want to edit the existing url inside the controller without hard coding the whole url as IP and Port can be changed. How can I achieve this?
Although I used $location.path("http://IP:Port/?myId=this-is-my-test-page2");
What is does is it appends to the current url as follows
http://IP:Port/?myId=this-is-my-test-page2#http://IP:Port/?myId=this-is-my-test-page2
How can I redirect to the required page ?
I had a not so similar issue where I had to convert the variable to a string and then modify the string. Then convert back to the proper data type.
Angular has its own routing. Everything right of # is the Angular routing (client side routing). Everything to the left of the # sign is your MVC/WebApi routing (server side routing). This is the essence of a single page application.
If you want to change the server side routing you need to do the redirect on the server side, so do a request to the server to change the url. If you want to change the client side (Angular) routing you need to use the "$location.path('')" in your angular code. Be aware that you cannot change anything to the left of the # sign on the client side.
You are trying to change the server side piece of the url, so you need to do a request to the server to change the url.
See this question for more information about the two:
I tried using $window.location and it was successful. Non of the other methods worked.
app.controller('myCtrl', ['$scope', '$window', function($scope, $window) {
$scope.redirect = function()
{
$window.location = "http://IP:Port/......";
};
}
I'm working with AngularJS and AWS S3 and I'm trying to view the files(.pdf, .docx, .ppt, etc..) in the browser but I'm stuck.
I'm trying to use the google docs view:
<iframe src="http://docs.google.com/gview?url=MY_AWS_S3_URL&embedded=true"></iframe>
But I'm getting this error in console's browser and obviously the view of this doc is not working.
Anyone know what is happening? Could be a S3 permissions error or maybe its because angularjs doesn't support it?
EDIT:
I've tried this to show .pdf files and it works but just for .pdf files.
<object width="400" height="500" type="application/pdf" data="your_url" id="pdf_content">
<p>ERROR!!</p>
</object>
First of all, say thanks to #Michael-sqlbot for told me about EncodeURIComponent.
The second step was made trustly the URL for AngularJS following this thread.
The fact is, I had to made this to my S3 URL:
encodeURIComponent(my.s3_url);
And then I had to call $sce library to my controller (like I explained, we have to make trustly the URL for AngularJS) like this:
JS
.module('module.name')
.controller('exExExample', [
'$scope',
'$location',
'$sce',
'info',
function($scope, $location, $sce, info) {
this.my.s3_url = info.url;
// Here I encode my AWS S3 url
this.my.complete_url ='http://docs.google.com/gview?url=' + encodeURIComponent(my.s3_url) + '&embedded=true';
//Using a function of the library $sce called trustAsResourceUrl()
this.my.complete_url = $sce.trustAsResourceUrl(this.complete_url);
}]);
HTML
<iframe ng-src="{{exemple.my.complete_url}}" ></iframe>
And it worked fine, so I hope could this explanation help somebody like it helped me.
Ok, I have data coming back from a Drupal service. I am using AngularJS and the ionic framework that packages html/css/js into a hybrid app for mobile platforms, using Cordova or Phonegap. Here's a link to my code in codepen: http://codepen.io/BruceWhealtonSWE/pen/PqOZeV
I suppose I should have used script tags to hold the partial views, as the about page that I am showing in the html view is not right. In my code, there is an index.html file and that makes the about.html file much smaller.
Anyway, the important part of the code is the app.js file and in particular the controller.
.controller('AboutController', ['$scope', '$http', '$state', function($scope, $http, $state) {
$http.get('http://toptenbooks.net/api/v1/node/6').success(function(data) {
console.log(data.body.und[0].value.toString());
$scope.title = data.title;
$scope.body = data.body.und[0].value.toString();
});
}]);
I can console.log the body text and it is right. It is html content not just plain text. The output from ionic serve shows the html as just text. So, my Drupal based api returns json.
On the about page where I want html to be rendered, in the template, I get the html looking like plain text.
Here is the about.html view:
<ion-view view-title="Information about the App">
<ion-pane>
<div class="card">
<h2>{{title}}</h2>
<div>{{body}}</div>
</div>
</ion-pane>
</ion-view>
Thanks in advance for any help/tips,
Bruce
If you want to display html from a variable in angular, you need to use a directive:
<div ng-bind-html="variable"></div>
Documentation: https://docs.angularjs.org/api/ng/directive/ngBindHtml
I'm building a SPA with Angular and wonder how images or large files in general are handled over $routeProvider. Given the case that I'm having this routes:
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
and inside contact.html there are loads of big images. Does home.html already notices these images, and starts to download them somehow, or do I need a JS way to do this.
Thanks
As far as I understand the route template is not loaded until the route is triggered.
And the trigger will happen when all of the resolve object is resolved
If you want to preload images, then using the resolve property in your route definition is probably the best solution. You can refer to the $routeProvider documentation here.
Essentially, you would do something like this:
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController',
resolve :
imageData: function(Preloader) {
return Preloader.preload();
}
});
Assuming that the Preloader.preload() returns a promise, then your route will only complete once the images are preloaded.
The Preloader service would have to know the images to load, which you could either pass in directly when you call preload(), or maybe pass in the templateUrl and have it parse out the images that way. Anyway, hopefully this starts you off in the right direction!
The answer is Yes. The above code uses basic AngularJs routing configuration and all the defined resources in the routing configuration are downloaded straight away.
However, if you would like to lazy load these resources have a look at resolve option of the routing configuration and requireJS ( further reading purpose only)
Just add <img src="big-image.png" style="display:none" /> into home.html to preload it.
Using the AngularJS SPA template for visual studio. Inside my app.js I have:
$stateProvider
.state('touranalysis', {
url: '/touranalysis',
templateUrl: '/views/touranalysis/index',
controller: 'tourAnalysisCtrl'
})
$locationProvider.html5Mode(true);
If I'm running locally and click on my link for touranalysis it works fine. Here's the link in my nav bar.
Tour Analysis
But if I'm on that page, which is
http://localhost:8080/touranalysis
and I click F5, I get a page not found error. What am I missing?
I guess you don't have touranalysis page in your server. You are getting page not found error because the browser requests touranalysis page when you click F5. Angular routing will work after you have your page loaded. If I am correct, your template is using ASP.NET MVC. So you can add a custom route like this:
routes.MapRoute(
name: "touranalysis",
url: "touranalysis",
defaults: new { controller = "touranalysisController", action = "Index" });
This way ASP.NET MVC will load Index view of touranalysisController which should contain ng-view. After that Angularjs will load /views/touranalysis/index
I hope this helps. Please let me know if you have any questions.