I want to generate static html using Angular 1 directives for various use cases. For example:
<div>
Name: <span ng-bind="name"></span>
</div>
<div ng-if="phone">
Phone: <span ng-bind="phone"></span>
</div>
given {name: "John"} as $scope should generate the following html:
<div>
Name: <span>John</span>
</div>
Notice the absence of angular directives and angular ng-if comments. Is something like this possible with Angular 1?
UPDATE: I want to use angular's template engine to generate static, non-interactive, html. Think underscore templates or server side template engines. The use case is to generate pieces of html that user can take away into his own non-angular application. Another use case would be to assemble a static html email from an angular template. All of this done without server side. Angular already let's you do this but it leaves all of its artifacts in the html which are obviously not needed for my use case. This is not inefficient as some commenters have said, this is actually quite efficient to be able to generate html without server side and utilizing the already powerful template engine of angular.
No. Angular is developed to work on the Client-side. Hence, you cannot use it on the Server-side for templating.
Instead you could try ejs - embedded js for templating. That is much more simpler and serves as a templating engine.
Check out EJS Website
Angular was not designed to do this because it is not a templating engine, it is much more than that.
There is no build-in way to accomplish this. Your best bet would be strip all ng attributes, angular classes and angular comments and probably some elements too. I personally wouldn't do it.
Related
As the title states, I’m unable to use #mousemove / v-on:mousemove or event listeners with the v-on directive.
So for instance this will not work:
<div v-on:click="clickHandler">
Mustache syntax for text interpolation is also not understood. e.g.
<p>{{ variable }}</p>
I have a very minimal knowledge of Angular – is there a simple way to disable it within an html element so that VueJS will work? Was aware of ng-non-bindable but this doesn’t work so am not sure I’ve correctly understood it’s use.
I've got a web application. It's got a very traditional technology stack. The server side is Apache Struts, the database is db2 and on the client side I am using JQuery. The application is deployed over websphere.
Recently I have started to use JQuery heavily on a number of pages and I have slowly started to see the JQuery code behind certain pages turn into spaghetti code.
I am looking to add Angular.js and handlebars.js on the client side to give my JQuery more structure.
Firstly I'd like to ask if that is a good use for Angular.js and also If I use Angular and handlebars with jquery what purpose will each one serve.
thanks
I did a lot of DOM manipulation using jQuery.
Switching to angular has greatly cleaned up my code. Here are a few things that come to mind:
Do trivial stuff right in HTML
The simple fact that you can do a lot of the trivial things right in the HTML gets rid of a lot of js code. The code below in jQuery required me to watch the checkbox for changes, than depending on the checked state I had to either show or hide the span below. With angularjs, not a single line of custom js is needed.
<input type="checkbox" ng-model="show"/>
<span ng-show="show">show me when checkbox is checked</span
No more HTML in your js code
Every now and than you find yourself looping trough an array, adding table rows or li's in your js, and than push em to the DOM. You're basically writing HTML in your JS file. Using ng-repeat you can keep the HTML in your template file and loop trough your arrays right where you want to build that table/list/etc..
<li ng-repeat="user in users">{{ user.name }}</li>
Functionality is clearer in your HTML
Because jQuery uses selectors in the javascript code, I often found myself searching for what a button actually does. With angular you can use ng-click to call a function. This made it much clearer what actually happens from just looking at the HTML.
<button ng-click="recalculateUsage()">recalculate</button>
No more placeholders
Another great benefit is that showing data in your templates can be as simple as {{ user.name }}, instead of creating a placeholder that you than fill using jQuery.$('#userName').html('my new content').
Directives
Directives are another great way to clean up you code. Much used elements can live in their own js/template file and can be inserted into your HTML in an easy manner.
AngularJS and JQuery both serve different purposes as both have different goals.
JQuery benefits you in DOM manipulation without much caring about data involved. While AngularJS on the other hand provide you MVC like framework for separating model, view, controllers logic and provides two way data binding.
See this for more details about benefits of Angular What does AngularJS do better than jQuery?
i am building a single page application using node.js and angular.js.
I wonder if there is any advantage on using a template engine like jade or ejs since angular has the ng-include directive which let you inject html partials inside your main html page, and of course with angular you have two-way data binding. Any thought on this?
It’s good idea to use Jade (or another template engine) for all html pieces in your project even if you’re creating SPA with AngularJS. Jade allows you to generate templates easy and fast. Templates will be neat and easy-to-read.
As for include directive, stick to the following rule in Angular+Jade projects: use Jade’s include for reusing pieces of html when you create static templates, use ng-include for dynamic purposes when partials depend on the App’s state.
I am working on a backbone app that we want to migrate over to angular. However, a true "port" or "rewrite" is not an option due to resource constraints. Instead, we want to introduce angular into the app in a modular sort of way -- ie, identify and carve off easily separatable functionality and make it angular, as well as introduce any new modules (i.e. an admin module) as angular code.
Is this possible? If so: a) Where would you put your "ng-view" tag? Inside the div that you currently render your backbone-based markup? b) How do you introduce angular-routes into all of this?
You can add target="_self" for all the backbone links, then angular would not route those links. We had the same problem and adding this fixed the problem. Hope this helps..
Test
You can use angular in any place you want in your app and use it with backbone if you want but stay in mind that you're using two frameworks and in this case it's totally unnecessary and wrong, but i think that you don't have choice, all you have todo is put the directive "ng-app" where you want to use angular, here is my example:
<html ng-app="myModule">
//your code here
</html>
and the script(like any other angularjs app):
var app = angular.module('myModule', []);
// the rest of the code
I never tested before angularjs + backbone, but i think you can have some problems like to deal with data from server, who will gonna do that? Angular or Backbone?
We are migrating from developing in Java with JSP to an AngularJS approach (rich-client).
In JSP we could template with Apache Tiles, so we defined common things, like menus, header and footer and import everywhere.
I was thinking in make it with JSP/Apache Tiles, but I think this will difficult my automated tests with Karma.
EDIT: We are building an huge application, we will have tons of forms/menu items, and we are planning to have one Single Page Application for each one of these.
It depends.
You can still use server-side templating (I use twig with a Symfony2 app) for the overall application and then use directives with partial templates (simple html files) for certain reoccuring elements that need to have functionality in some way.
You can actually write those partial templates in your favored template engine again, as long as ou make sure it will be parsed before it's delivered to the client.
Other then that: Just use simple HTML/CSS, use binding for "variables" and just use ANgular directives (ng-class, ng-if etc.) to style/display elements the way you want them based on your model data. And if you need more complex stuff: Just write your own directives!
Look into angular directives: http://docs.angularjs.org/guide/directive
Having a directive means you can define something like this:
<div class="someContainer">
<div class="menu"></div>
</div>
And have it turn into this:
<div class="someContainer">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</div>
Angularjs is the best solution for single -page application with thick-client. It goes well with everything and anything. Make sure you spend some time on designing your directives.
These veidos might be helful: http://egghead.io/
And its not just directives. As a whole fraework its awesome. You can realy scale you application with best performance and testing support.