relatively new to Angular so I'm not sure what the best practice is for this scenario. I have a fairly simple index.html that include an ng-view in the middle. Later on in the html I need to include page(view)-specific js scripts after some of the generic app-level scripts load. What is the best practice for doing so?
Pseudo-Code
[ng-view]
[generic stuff for all pages]
[view-specific scripts]
By default AngularJS needs all the script related to your ng-app module loaded at one go, which is called bootstrapping the app. What this means is that if the scripts are related to AngularJS such as controller, directives and service, routes have to be loaded together in the script block, they cannot be loaded on demand.
There are some plugin that allow lazy loading such as these
https://github.com/matys84pl/angularjs-requirejs-lazy-controllers
https://github.com/nikospara/angular-require-lazy
https://github.com/ocombe/ocLazyLoad
Related
Looking for a suggestion of a good way to create an abstract directive in one module and load its template on different modules.
The scenario is the following: I have a web site split into two (web portal and backoffice) which are two different deploys. Both share a lot of modules and the layout but have different functionalities.
I would like for the menu directive and structure to be on a core/common module, but its template should be loaded by the modules, so that the core module doesn't need to know what specific deploy is being used!
I thought about using $templateCache on each module configuration process, but does anyone know a better option for this?
Yes, the only option to keep templates and the rest of the application in different JS bundles is $templateCache. Other options (directive inheritance or requireing and bundling template HTML files with Webpack) will likely result in monolithic bundles.
There's no separate template unit in AngularJS, so in order to be included in module, templates should be defined with $templateCache.put.
I am writting an app from scratch in Angular with node.js and I was wondering if I am doing things correctly.
I want to split the content of my index into smaller html modules with their respective controllers, this way, everything will look more structured and easy to find when the project gets bigger.
For example :
index.html <--- main file
/views/menu.html <--- menu module
/views/content.html
/js/menu.js <---controller for the html module
/js/content.js
...
I can manage those files by just adding ng-include :
e.g
< ng-include src=" 'views/menu.html' ">
My concern is that this is like a GET request per file and I was wondering if this would affect the load speed of my application. Because I am working in local, this loads in 2ms which is very quick but I was wondering how this would behave online.
My questions are :
Is this the best way to create a modular app with different html files and js controllers ?
Is there a better way to achieve what I want to do ?
I am still learning Angular, sorry if this is too basic.
Thanks
Its better to use index.html as basic load file which will load all css and js on the load of the app,
for ex:- you can make diffrent app for login and after login section. After login.
load all the js and css files through the app after login..it will improve the loading time and also be a modular
as suggested by #Dhruv Raj Singh It is good to use a different ng-app for pre-login and post-login.
It is always good to structure the code that you want.
Now ng-include
will Emitted event $includeContentRequested every time the ngInclude content is requested.
Now it up to the requirement use cases how to use and when to use.
If
the module is a sperate and special one which requires lots of resources specific to it only and will be used by few users and only few times then it is better to include them for that module only
else common resources should be included at ng-app level.
You can name and organised the resources whatever way you want but include them at post-login app creation.
I just learned how to create custom directives with angular today via codeschool and it is fantastic! The way it taught me was to make a directive in my JS file, link it to an html file, then write the tag accordingly in the index.html file which is my main file.
My question is does creating a whole new html file for a custom directive hurt load times on the main page? If you want a reference to the section I'm in, it is shaping up with angular level 4 (custom directives).
It depends on whether or not you precompile the templates directly into your main.js or not.
If you precompile them, your main.js will take longer to load, but, when rendering the view, angular won't need to send an http request to get the template so rendering will happen faster.
If you don't precompile them, the up front load time will be faster, but rendering the view may be slower the first time because angular needs to send an http request to get the template for the first time. after the first load, it will be cached in the template cache.
You could also use a hybrid solution, precompiling things needed for the main entry to your app, and letting angular request the rest as needed.
which one is better is a debate not suited for stackoverflow.
I am starting a side-project based in Sails to try it. Most of the pages are server-side rendered via EJS and don't require javascript on the front-end (my landing page doesn't, my "about" page certainly doesn't etc). However, I have a few pages that have quite a lot client-side functionality and I want to use Angular, because I am mostly familiar with that framework. The routing to these pages is again handled in the server and there's really no meaning in bundling them as a SPA.
So I am trying to wrap my mind around these concerns:
Where to place the Angular app's scripts?
Is /assets/js/dependencies still the proper place? Wouldn't placing them there make the Grunt task inject them in layout.ejs and thus in every page?
How to conditionally load the Angular base and it's components (controllers, services, etc)?
Sails uses views/layout.ejs as a base layout for loading project-wide styles, templates and scripts. Each page's controller handles injecting the body part into this layout according to the view "partial" that has been developed for that page. Is this view "partial" .ejs file the appropriate place to conditionally load the Angular app files in only the pages that require them?
How to add min/conctact/uglify of Angular' script sources in Grunt tasking?
All the Angular related files will need to be concatenated, minified/uglified for production. This will need to be a new js concatenated file to be loaded in appropriate pages apart from the "generic" js file that currently Sails tasks create and is loaded in every page. So we're essentially talking about two concatenated js files for the client side. One that is globally loaded, and the Angular one that only the pages that need it load. Which parts of the build/tasking procedure will require modifications? Some examples or resources to check would be highly useful here.
Where to place the Angular app's scripts?
Is /assets/js/dependencies still the proper place?
No, just put your angular.min.js in your dependencies folder, but not your Angular app's script. You need to put all you Angular app in the assets/js folder ( or in a sub-folder, but not in dependencies )
To be sure that each file of your app will be loaded in the right order (for example you need to load first the Js file which inject your angular app's dependencies), you can modify the tasks/pipeline.js file, and specify the order you want : You need to modify the jsFilesToInject array which contains all the Js files to load in the right order.
For example for your project :
var jsFilesToInject = [
// Load sails.io before everything else
'js/dependencies/sails.io.js',
// loading angularJS
'js/dependencies/angular.min.js',
// all the rest in dependencies
'js/dependencies/**/*.js',
// loading first AngularModule definition
'js/app/app.module.js',
// all the rest of the angular application
'js/app/**/*.js'
];
For your other question I think you need to look at the tasks/config/sails-linker.js file, that inject all the Js scripts in the <!--SCRIPTS--> tags in your HTML code.
I hope that it will help you and that I'm not too late !
I am using Angular JS. I wish to put unrelated code (ie, which is not a factory, service, controler, etc) in additional, separate modules, in a similar way one would with AMD or CommonJS.
At the time of writing, a search for 'Angular.JS make new module' using Google does not return any documentation on making Angular.JS modules.
I have a found a post on the Angular.JS Google Group that seems to indicate that instead of loading dependencies dynamically like other module systems, in Angular.JS dependencies must be inserted as additional script tags.
Is there any documentation on making Angular modules (which is not limited to controllers, services, or other angular concepts)?
Is the statement about script tags true? Do I need to manually add script tags for every module I may use?
Looking further into the various Angular boilerplate apps, apps manually load every part of their apps via script tags. Unlike other systems, Angular 'modules' don't take care of actually loading dependencies, they just inject them once already loaded.