Angular routing and dynamically loading controllers - angularjs

We are creating a single page app with Angular routing.
The problem is that the Javascript with the controller(s) need to be referenced.
I want the js file to be downloaded dynamically on demand.
Is it mandatory to use a system like RequireJS ? Is there an alternative ?

AngularJS is just a wrapper over pure JS to make a system that's defined in its documentation (MVC, two-way binding, directive and so on). So, you can download the JS and bind the controller defined in the file to the angular app (ng-app). You don't need to use RequireJS to load the file, rather you can use pure JS to do the work.

Most people use requirejs but you can do it in pure JS.
stackoverflow.com/questions/7718935/load-scripts-asynchronously

Related

Integrate angular js directive inside angular 7 component

Is it possible to integrate Angular js directive inside Angular 7 component at the runtime. The Angular js is a separate project module with its own folder stucture.This folder structure includes directives as well. Can these angular js directives be imported into Angular 7 application by providing the directive's file path and used in Angular 7 component template. Kindly suggest if there is a way to do this.
This is NOT recommended. The architectures and life cycles of both are very different and you are just increasing the chances of errors, time and effort by doing so.
To answer your question: Yes, there is a way to do it as you can manipulate the DOM using any JS lib/framework and by using your ng7's #ViewChild/templateRefs to gain control of the element, but you will face issues while updating data to/from Angular7.
I'd highly suggest you make a new ng2+ component and import the code from your old project and work on it to make it into an Angular2+ component.

what is the jquery usage with angular js?

i want to implement Angular JS, Angular JS UI plugins and bootstrap in my ASP MVC 5 apps. Some people say Jquery is still in use in Angular JS part, so could any one here please explain when and where i would need to use JQuery in Angular Js code?
Angular doesn't include jQuery but a light-weight plugin called jq-lite. This provides a lot of the methods that jQuery does, but not all of them.
It specifically has to do with Angular.element. You can take a look at the documentation here
https://docs.angularjs.org/api/ng/function/angular.element
jqLite is a tiny, API-compatible subset of jQuery that allows Angular to manipulate the DOM in a cross-browser compatible way. jqLite implements only the most commonly needed functionality with the goal of having a very small footprint.
Basically, there are a couple of pointers to keep in mind
Keep all DOM logic outside of the controllers. Use custom directives on attributes for that.
Instead of simulating mouse events, use their angular counterparts. Examples include ng-click and ng-mouseover. Add these directives to the elements in the form of attributes.
Instead of adding classes, use ng-class
If you are using jquery or jqlite, be sure to include the jquery script before the angular script.

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.

External js library within Angularjs

Is it possible to use any external js library within Angular js. If So, how to use it ? Suggest me with an example.
angularjs already included jqlite which is a short version of jquery with limited jquery api.
http://docs.angularjs.org/api/angular.element
maybe the link below will be useful as a start if you want to use jquery plugins with angularjs.
http://www.grobmeier.de/angular-js-binding-to-jquery-ui-datepicker-example-07092012.html

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