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.
Related
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 would like to to use React with Django non Single Page App way - Django will take care of routing, and rendering HTML templates and serving data.
React should be used just on some specific components inside HTML page for eg. (dropdowns, autocomplete, modals), ideally being able to just drop for eg. div element with a class inside HTML and pass props for React component.
What’s the best - maintainable, scalable solution to go about this ?
See django-jsx package and also server side rendering paper. I'm not a frontend specialist but when I've faced such problem, my friends offered me to google isomorphic app with django and react.
I found this add React to an HTML page in one minute page/example to be absolutely painless in rendering a React component inside of a Django template!
This probably isn't what you want to do, given that React has a pretty robust ecosystem around it for building performant single page applications (SPA's). You should be able to decouple your React site from your Django app. Then you'd be able to throw up your React app on a performant CDN, rather than having your Django server hosting every visitor.
But if you insist, the most straightforward way to proceed would probably be to create an index.js & index.html at each Django route. In other words, make a separate "React app" at each route, which Django will serve as users go to each endpoint. I've seen this done before. It's laggy and inefficient (relative to an SPA), but can be done.
If you really intend to go so far as to write raw HTML/CSS/JS and just use React for bits and pieces in between, you'll probably be looking to invoke ReactDOM.render using a variety of second arguments (called container) rather than the standard React-y way of doing a single ReactDOM.render(<App />, document.getElementById('root')); for the whole app to inject into a barebones HTML template.
I notice you tagged your question with server side rendering. If that is a hard requirement for you for some reason, I'd look into using next.js, a Node framework optimized for exactly that.
I'm coming from a javascript/react/react-router/webpack background to a clojurescript/om environment.
With webpack & react-router it was possible to split my code and only load the javascript needed. E.g. on /login I would only load the js necessary to display the login-page everything else would be left out.
How do I the same with clojurescript/om?
Apparently it's possible to split your code into multiple files: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules
The question is how do I only load the code necessary to render the current page: /login for example...
With webpack I would manually write require.ensure to asynchronously load the necessary javascript to render a certain page. React Router supports this very well.
Is there any equivalent in clojurescript without making multiple html files and each giving it the right script tag with the splitted code through google closure modules?
Sadly I don't have a concrete example yet, and I agree that webpack and react-router make this really easy. There are some links that may direct you to get it working:
Code splitting: http://swannodette.github.io/2015/02/23/hello-google-closure-modules
Manually adding script tags to html files
Actual docs: https://github.com/clojure/clojurescript/wiki/Compiler-Options#modules
Dynamic loading of cljs modules: https://rasterize.io/blog/cljs-dynamic-module-loading.html
Uses multi-methods for route definitions to dynamically add implementations when loading more code
Dense read, there is no easy tooling regarding this use case right now, but the article has all clues to get it working
I hope this helps. If you get around to implementing this in an OSS example it would be great if you could share the link.
All the resources use only HTML, but stuff like Cordova and Ionic work on the client, with HTML pages (and JavaScript and CSS of course), and once MVC has served a page, that page is HTML, so the hybrid tooling should be able to use it.
The only problem is that once it's served, it lacks the .html extension, but maybe I can figure a way to add this.
The reason I'd like to stick to .cshtml for my layout is that I can scaffold views from my sever-side view models, and this adds quite a lot of value for me.
If the question is: can you have .cshtml files on your mobile device, the answer is no. .cshtml file is processed on server by the Razor view machine, so plain HTML can be generated. Obviously you don't have MVC, Razor and such on your hybrid ionic app.
You can however work around it by taking your angular templates to be generated on your server by MVC. So, when you setup your templateUrl somewhere, instead of taking the relative path to your local template .html file, you can point to the controller on your server, giving the full path, with http:// and so. The controller will then generate your template for you and return as plain HTML.
Bear in mind, that angular will cache this, so it will be loaded only once.
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