I'm developing a web application using Angular 6.
I have a little problem: with this simple code inside in one of my services:
method() {
document.body.insertAdjacentHTML('beforeend', '<h1>Hello</h1>');
}
I can dynamically display html code every time I run.
This happens, however, only because <h1> is a native HTML tag.
How can I do the same thing with an Angular component associated with an HTMML template? For example, <myComponent></myComponent>,
it does not work this way ...
method() {
document.body.insertAdjacentHTML('beforeend','<myComponent>/myComponent>');
}
Can you help me with a solution that uses a few lines of code?
I have to use this method in a service. Thanks.
Related
Hi guys I am trying to click a button in my Vue.js page to a different .html page that exist in my public folder.
So I am using this way
<button #click="window.location='public/test.html'">See Results</button>
However I get an error that says
"Property or method "window" is not defined on the instance but referenced during render"
How do i navigate to a different page in Vue.js?
I would recommend using vue-router if you're doing the spa approach. It will prevent your page from refreshing when you go to a different page and it will be much faster. But if you don't want to do that you could just use an anchor tag to handle the navigation for you.
<a href="/test.html">
<button>See Results</button>
</a>
You can try to call a method #click="navigateToTestHtml" and put your code in it
methods: {
navigateToTestHtml() {
window.location='public/test.html'
}
}
However, as Vue is a Single Page Application I think it would be better to create another page and add routing for it. Vue Routing Docs
You can't write 'window' into button tag, because window is not defined.I suggest that can write into 'methods',eg:
methods: {
goToHtml() {
window.location = 'public/test.html';
}
}
But, if you use vue.js, I recommend you use vue-router. One page navigate to another page, eg:
methods: {
goToPage() {
this.$router.push('/another/page');
}
}
vue-router navigation usage
So I have a curious situation and I don't think it's going to work, but I figured I'd ask in case it is and someone knows how to. I am using a 3rd party website to create marketing funnels. You can add your own custom html and javascript, but it parses out the html in a rather unfavorable manor. Basically you specify an element on the page and it appends it as a data attribute and dynamically loads it into the DOM. Since this is happening this way, my app isn't being initialized because it's not in the DOM on page load. Is there a way to make this work? I'll explain a little deeper my configuration.
I add custom html such as:
<div data-ng-app="AppName"><div data-ng-controller="ControllerName"><div>perform controller logic here</div></div>
As you can see, this needs to be in the DOM for the app to initialize and, well work. Is there a way to initialize the app after the page has loaded dynamically? I can add my own JS files in the custom html field, but thats about as far as I can go for customization. Any help is appreciated!
Maybe you should execute angular's bootstrap function manually in your script after the required dom loaded.
var app = angular.module('appName', []);
app.controller([...]);
angular.bootstrap(document.getElementById('divId'), ['appName']);
For more information, you can see this doc https://docs.angularjs.org/api/ng/function/angular.bootstrap
I'm working with restangular ngroute and playframework and I'm trying to do my CRUD following this tutorial : http://plnkr.co/edit/d6yDka?p=info
the list.html and detail.html in the index page (in the tutorial), I have them all in customer.scala.html page which call the main page by using this : #main("MyApp") So all my controllers and models are defined in this main page.
So how can I do the routing, the way that when I click on a button I can call the link (localhost:9000/custd) definded here in my js page:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
UPDATE:
this is the link in customer.scala.html
<li>Customers</li>
in the file Application.scala I have this:
def custDetail = Action {
Ok(views.html.custDetail("Your new application is ready."))
}
in routes I have this:
GET / controllers.Application.index
GET /custdetail controllers.Application.custDetail
so how can I link this : /custd (in the angular controller) with my html page
So I think you're jumping in at the deep end a bit here. If you don't understand how to make a simple play web app, and you don't understand how to make a simple angular app then it might not be the best idea trying to integrate both straight away (I tried the same thing when I was new to this and it was complicated!).
Why have you chosen Angular for this given job? If you are not planning to create a single page application (which it sounds like you're not), then just using play templating should be sufficient for your needs (ands there's lots of docs available!).
If you are adamant on using the two, angular routing is geared towards angular applications. Looking at the routing you've provided:
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/custd', {
controller:ListCtrl,
templateUrl:'list.html'
}).
In this you have provided a controller and a template. These are in reference to Angular controllers html templates, not Play. If you're not sure on how Angular controllers work, Angular has great documentation:
https://docs.angularjs.org
You need to work out exactly what information you need from the server side, create an endpoint to serve that data to your Angular app (using AJAX calls). I know this is a high level answer but really integrating the two is quite complex and hard to summarise in a single reply. My advice would be focus on creating an Angular OR Play app, then once you have the basics down move to integrating the two, but be clear as to the reasons behind chosing your technology as it sounds like you may not be
I see examples that show directives rendering an HTML file in lieu of the directive. Or controllers rendering an HTML snippet as a scope variable, written directly between single quotation marks - like
$scope.items = '<ol><li>an item></li> <li>another item</li></ol>'
(this does not work well for me because I have other single quotation marks in the middle of my HTML snippet that seem to stop the HTML snippet from rendering properly.)
Here is something I tried that did not work:
Controller code:
innerapp.controller('ResourcesController', function($scope, $sce, $http) {
$scope.template = 'employeelists.html';
});
HTML code:
<div ng-controller="ResourcesController">
<div ng-bind-html-unsafe="template"></div>
</div>
I have 'employeelists.html' in my app/assets/templates folder. I am using AngularJS with Rails, and this setup already lets me call the file like this:
div ng-include="'employeelists.html'"></div>
But I want the controller, instead of ng-include, to render the HTML file.
Basically, I am working on functionality such that if I select an item on the HTML page (under this AngularJS controller), a function in the controller gets called that updates the scope variable (that's linked to a template file) with another template file.
First, please keep in mind DOM manipulation should allways be left to directives, not controllers. Second, I would highly recommend you looked into views using ui-router. This could easily accomplish what you want to do. Here is an example of simple view changing:
https://angular-ui.github.io/ui-router/sample/#/
Also, someone already found a way to input code to the ng-include directive so you could update it:
angular - update directive template on click
However, do read the answer above how he also recommends you use $stateProvider (ui-routers state configurator) since it would be a much easier approach to what you are trying to do.
I hope this helps
I am working on a project where we are starting to add in angularjs. I have a page where I am injecting some html into the page from an $http request. When I get the data back I compile it and insert it into the document. This all works. The problem I have is it is a large amount of html that has to be inserted into the site. If I save the html in a variable or cache (cacheFactory) I can then just recompile it and add it again. This works but the problem is when it $compiles it it makes the page non-responsive for a second or 2.
What I want to know is if I can cache the $compile html and just reuse that? What I have been trying so far does not work.
promise.then(function(data)) {
cacheService.put("testData", $compile(data)($scope));
addTestData();
}};
function addTestData() {
$("#placeHolder").empty().html(cacheService.get("testData"));
}