Can We use angularjs and handlebar.js in the same page.
If so how to use angularjs and handlebar.js in the same
html page.
I suppose you could. If the handlebar-generated content will contain Angular directives, you will likely need to use the $compile service after you insert the generated HTML into the DOM.
See also AngularJS is too humble to say you’re doing it wrong and adding support to angularjs templates, so one can use handlebars or angular in the client-side
Related
I have an angular app that I need to use as a source of the components for my new app that will be mostly using pure HTML. I need to get the HTML and CSS from the Angular app.
The problem is, that the app uses custom components such as <mat-icon> that are not standard HTML tags. I assume, that under the hood they eventually consist of simple HTML elements but I can't figure it out. Is there any method to convert an Angular website to plain HTML & CSS? I know that the dynamic content can't be extracted, but I mean only the view. Maybe there is a Chrome extension to do that? I do have access to the app source code, so it can be also some npm module.
I have a pug template index.pug for my project. I have also made navbar.pug, footer.pug, sidenav.pug. These files are included in the index.pug.
For server side I am using node.js, express.js and socket.io. Now I want to update only the navbar.pug file according to server response. But when I tried to do that I found some solution. But all of them refresh the full index page.
Is there any method that can help to update an specific portion of the webpage(in PUG) without refreshing the whole page?
Thanks in advance...
No, pug is a server-side only HTML processor. As such there is no way to do what you describe here - to get pug to process more means another round trip to the server to re-render the page.
Although technically you could do this with plain JavaScript, you should look into a client-side library like jquery, React, Angular, or Vue to do what you want. A lot of us use pug in combination with those toolsets to build modern web apps, but with those frameworks pug becomes a quicker way to write HTML and is no longer a server-side pre-processor.
I'm rewriting my website https://ixtutor.com/ completely in angular. I've created few components that render as widgets on a blog page.
For example, on a blog post https://ixtutor.com/tensorflow-basics-with-housing-prices-prediction-example-chapter-i/ , there are widgets like,
(i) Code runner widget
(ii) Exercise widget
I'm modeling these widgets as components in my angular application.
Problem: One of the page in my application is a live html editor, which allows an author to write the (angular) html templates in a textarea T1 and see the (rendered) view side-by-side. I also want the author to be able to use the widget components in the html that they create.
This works great with regular html tags, where I can use the innerHTML property of a div to directly bind the ngModel of the textarea T1, however, it doesn't work for the angular components.
I've looked at dynamic angular components but I cannot figure out how to use that in a full-fledged html template. Any recommendations or suggestions will be really appreciated.
Thanks.
Angular does not support inserting dynamic components in the template at runtime. It has to know at compile time which components will be inserted.
The only way is to compile your Angular components to web components using Angular elements, that way, you will be able to insert them as custom HTML elements in your application.
You will have to develop them in a separate library for this.
I have ~2,000 lines of HTML code that I can retrieve from my Java server. This HTML code also has angular directives inside of it, such as ngIf* and (click) and [ngClass]. When I try to display that HTML in my client with such methods as the below:
<div [innerHTML]="htmlData"></div>
<div innerHTML="{{ htmlData }}"></div>
I see all of the HTML elements displayed correctly, but none of the angular directives are working (such as some of the HTML should be hidden with the *ngIf but they aren't... and none of the (click) events work. What can I do to fix this?
I need this functionality because I am delivering my code as a JAR file to various users to run on their local machines, and I want to serve the HTML code from some Amazon's S3 so I can update it whenever I want to give their website an update.
And I tried looking at the below answers, but those dealt with pure HTML from the server, and didn't have any angular directives.
Inserting HTML from server into DOM with angular2 (general DOM manipulation in Angular2)
Angular HTML binding
Unfortunately it's not possible. InnterHTML will put HTML code there - not angular. Angular code should be compiled ahead of time - a process where all the directives and html magic is replaced with simple JS.
You can transform you angular code to plain html by server side rendering with node js.
You can read more about server side rendering here: https://angular.io/guide/universal
But just as well you can use JAVA and with any popular templating framework for JAVA servers if you'll send your parameters on the http request.
I'm newly started from the angularJs web application using html. I want to know about the difference between ng-include and ngroute in angularjs and also when should i use of them. If anybody can know this please give me an example to learn it.
Thanks and regards,
Parthi
ng-include just dumps the included html into the DOM.
ng-route has lots of different capabilities, including route parameters.
You can see that the URL changes when you go to different routes.
Primarily routes are used for having a single page app. Different pages of the app are routed into the ng-view. You can then go to these pages by URL since the router will automatically resolve these routes to the right view.
ng-include is called a directive in angular, its a core concept in Angular. It lets you include partial html files in your page.
ng-route is an extra component you can add to your angular application that allows you to work with the routing of URL and data. In order to use it you need to reference it as a dependency.
angular.module("app", ["ngRoute"]);
The differences:
one is a extension of angular with routing capability the other one
is a built-in directive that lets you include markup on your page
from another location.
ng-include is used on the markup <div data-ng-include="..."></div>
ng-route is used and reference in your JavaScript files.