AngularJS Routing All Within One HTML page - angularjs

I am working with a serverless HTML so JavaScript cannot load other html content. I was wondering if there is an example of pulling the template from the DOM so that I can pack all my views into a single HTML file (i.e. without having to use string templates).
Would this work?
I am working with AngularJS 1.7.5 rather than the newer Angular 2.
I need it to work with Outlook/IE.
I was thinking of just getting the .InnerHTML of some base element. Advice, notes, concerns?

Related

How to run a validation check with Ionic

I have written an ionic application and would like to know how(if) i can validate the ionic app. Much like validating HTML with W3C.
Is there any way possible to run a validation check on the app.
I have tried to run the application in the browser and run a google chrome local html validation, however the directives are still visible and haven't been generated to html.
I don't believe there is a way to validate the Ionic HTML in the same way you validate the HTML in W3C validator.
however the directives are still visible and haven't been generated to html
Probably a bit of confusion here.
1. AngularJS directives will always be visible "as is" in the HTML code, they will not transform to anything. It's AngularJS itself to use them in its special way.
2. Ionic components are build with custom HTML tags, which means, for example will not transform to anything else. All Ionic custom tags are defined in ionic.css file.

Using Angular with JQuery on the client side only

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?

Template engine useful if using angular?

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.

can I use EJS with AngularJS?

Hi I am new to AngularJS. I have great web app already running with JQuery and jQuery UI.
Now I want to completely get rid of JQuery and am going to migrate to Angularjs because of its MVC (MVW) pattern.
So my jQuery application is running with EJS for templates and entirely DOM manipulation. But when I think about Angular js, I have doubts. Can I still use EJS or not?
So please guide me whether I can use or not.
Another doubt is, let's assume I have list page. It is updated dynamically, and it will display 10 records first then based on user scroll, the next 10 records will be appended in the DOM after AJAX. Can we append to the DOM dynamically using Angular?
How do I achieve these kind of things in Angular?
You can use EJS (server or client side) in combination with Angular but there's no need and you'll probably overcomplicate things. AngularJS is very capable for manipulating the DOM by itself in a very separation of concerns kind of way. The most elegant way to work with Angular is to have a RESTful backend and just serve some static html/js files from a webserver.
As for endless scrolling, there are tons of ready to use plugins (modules) to choose from or you can write your own. Basically this will need a view with a ng-repeat directive to display the currently loaded items and a directive that will notify a controller/scope to load more items when the user is scrolling down.
A nice simple article can be found here.
Similar questions:
Mixing angular and asp.net mvc webapi
Actual use of jade template and angularjs
Yes of course you can use EJS with Angular JS. You might want to have a look at this;
https://gist.github.com/jrmoran/4277025
And about your DOM manipulation question. Yes you can append DOM dynamically using Angular JS. Angular JS have a strong feature of two way data binding which dynamically updates its DOM content when a model variable changes.
Have a look at this:
http://docs.angularjs.org/guide/databinding

Changing pages in AngularJS (under requireJS)

I'm a beginner in AngularJs and I have a simple question: How do I change pages in AngularJS?
Not using router (ng-view) in AngularJS since I need a new html page where there's no common templates. I tried to use "ng-href" but it doesn't work well, since the system works under requireJS and the new html doesnt contain any js or css that I need. (except I force to add them..)
Does anyone has got some idea?
you can achieve with some template engine like "Swig" http://paularmstrong.github.io/swig/ with has a layout template were you base js and css and you can extend it.

Resources