Yeoman built out my first angular app, and in the index.html, it placed the following code that I'm guessing will be consumed by some build process (I don't know what that process is yet.)
But in the index.html, it broke up the scripts between these 3 comment groups. The last one seems to be where my code goes, but the first 2 are somewhat arbitrary in their distinctions. I'm trying to figure out what they mean, so I know where to insert these pieces that I need to add to make the app usable:
<script src="bower_components/angular-ui-calendar/calendar.js"></script>
<script src="bower_components/ng-grid/ng-grid-2.0.7.min.js"></script>
Do they belong in the first group (build:js scripts/plugins.js) or the second (build:js scripts/modules.js)? And why are jquery and angular outside both of those groups. Feels like I need some kind of handle on what those directives do, but googling for build:js doesn't produce results that seem to be relevant.
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-modal.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-transition.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-button.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-popover.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-typeahead.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>
<!-- endbuild -->
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->
An explanation or pointers to the relevant docs would be very helpful.
Yeoman built out my first angular app, and in the index.html, it
placed the following code that I'm guessing will be consumed by some
build process (I don't know what that process is yet.)
The "build process" is grunt, but more specifically the grunt-usemin plugin is what will be using the directives inside the comment blocks in the index.html.
Do they belong in the first group (build:js scripts/plugins.js) or the
second (build:js scripts/modules.js)?
That's a decision for you to make. Keep in mind that all the scripts included within each block will get concatenated and minified into a single script include in the built version of the index.html file. The "build:js scripts/plugins.js" instruction is telling the grunt build system that this is a javascript block and to create a plugins.js from the result of concatenating and minifying the contents of the block.
And why are jquery and angular outside both of those groups?
You can group and categorize your scripts however you want, but there are some best practices. For instance, you may want to place all the scripts that are owned by you in one block since they may change frequently. This may help improve caching performance on the client since changes to your scripts should probably not cause all scripts to be re-downloaded. You probably wouldn't want to include jQuery and Angular scripts in the same block as your code because it would build a very large (monolithic) script that would have to be reloaded every time you update your code.
I typically organize my groups either by categories, such as 3rd party plugins, libraries, or modules. Sometimes, if performance is key, I may think about my groups in terms of how frequently I expect the scripts in each category to be updated, that way the user isn't being forced to download code that hasn't really changed.
Feels like I need some kind of handle on what those directives do, but
googling for build:js doesn't produce results that seem to be
relevant.
Read the docs at the grunt-usemin plugin page to learn all about how to use the "directives" you are seeing.
I think jQuery and Angular are outside because by default, grunt cdnify changes those paths to use Google's CDN.
Related
I am new to the bootstrap framework, but already I want to be able to use AngularJS rather than the provided jQuery that comes out of the bootstrap box. The documentation for BootstrapUI seems easy enough, I can simply download the code from github and include it in my Django project.
What I am not so unclear on, and maybe I missed this in the documentation somewhere, but is this intended to fully replace the javascript components of bootstrap? For example there are a lot of JS libraries that are being delivered via CDNs in the bootstrap examples that appear to make the site browser independent. For example, in the jumbotron examples, I see the following code:
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="' + {% static 'bootstrap/docs/assets/js/vendor/jquery.min.js'%} + '"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous">
</script>
<script src="{% static 'bootstrap/dist/js/bootstrap.min.js' %}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{% static 'bootstrap/docs/assets/js/ie10-viewport-bug-workaround.js' %}"></script>
With BootstrapUI is this something I take out or leave in? Just what exact steps do I need to perform in order to use Angular instead of jQuery in a bootstrap powered site? The documentation doesn't really go over this. Please point me to the right place if I've missed something.
UI-Bootstrap basically contains a bunch of Bootstrap components where the original JavaScript/jQuery has been re-written and wrapped in AngularJS directives which can be easily dropped into your application.
As per the docs,
This repository contains a set of native AngularJS directives based on Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's JavaScript is required.
I am trying to optimize my page speed with me MEAN stack application. I have run into the issue where I should be eliminating the render-blocking Javascript and CSS. I have gotten to the point where I have almost eliminated everything, EXCEPT for the controllers that have to be loaded.
I am thinking that it is not possible to actually do this, since angular throws an injector module error when I place "async" as an attribute on the <script>.
I was also thinking of making one large controller, but that does not really work as well.
The link to the site is https://coastalreign.com, below is the code for the controllers:
<!-- ANGULAR CUSTOM -->
<script src="js/app.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/ProductCtrl.js"></script>
<script src="js/controllers/ProductsCtrl.js"></script>
<script src="js/controllers/CartCtrl.js"></script>
<script src="js/controllers/TrackOrderCtrl.js"></script>
<script src="js/controllers/CheckoutCtrl.js"></script>
<script src="js/controllers/DesignerCtrl.js"></script>
<script src="js/controllers/SublimationCtrl.js"></script>
<script src="js/controllers/LocationCtrl.js"></script>
<script src="js/controllers/ServiceAreaCtrl.js"></script>
<script src="js/controllers/CategoriesCtrl.js"></script>
<script src="js/services/getCategoryText.js"></script>
<script src="js/controllers/CustomQuoteCtrl.js"></script>
<script src="js/controllers/GradContestCtrl.js"></script>
<script src="js/controllers/four04Ctrl.js"></script>
<script src="js/controllers/popularGroupingCtrl.js"></script>
Thank you in advance for your guy's expertise!
The problem is the amount of requests. I would bundle the JS files (app + vendor files) and minify them.
You can check for performance tips with Chrome - Developer tools - audits
You can use gulp-concat to reduce the amount of requests as Alexander's answer suggested. Then you can use gulp-minify to decrease the size of the file. You will have some additional issues if you want to put async option because you might need to render HTML which depends on angular
Like you include bower sourced JS files in an HTML without specifying each script's URL, I want to include all JS files contained in a particular directory.
How to go about this? There could be more than one directories and the JS files may located at any depth in the specified directories.
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<script src="scripts/controllers/contact.js"></script>
<!-- endbuild -->
This sample code is from index.html of a yeoman generated project.
the scripts directory is in the app directory which is inturn specified as an argument to build:js.
As I understand <!-- build:js({.tmp,app}) scripts/scripts.js --> tells wiredep to include all js files from the app directory and create a concatenated file scripts/scripts.js.
However, when I delete the <script> tags and run wiredep again, it does not recrate the <script> tags
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<!-- endbuild -->
Whereas if I delete the script tags for bower sourced JS files then wiredep recreates them.
You can check this answer here, I still doubt how will you handle dependencies ... I mean, scripts should be loaded via certain order to work. It's not like that you are going to leave that task to include all the files on its own and their order will be solved automatcailly.
You can also check out this post
Up until now I was using links to minified AngularJS files in my code, but now there is a requirement because of which I have to use complete AngularJS file. I have downloaded it from the official site, and:
<script src="../Angular/angular.js"> </script>
<script src="../Angular/angular-animate.js"></script>
<script src="../Angular/angular-aria.js"></script>
<script src="../Angular/angular-cookies.js"></script>
<script src="Angular/angular-loader.js"></script>
<script src="../Angular/angular-message-format.js"></script>
<script src="../Angular/angular-messages.js"></script>
<script src="../Angular/angular-mocks.js"></script>
<script src="../Angular/angular-resource.js"></script>
<script src="../Angular/angular-route.js"></script>
<script src="../Angular/angular-sanitize.js"></script>
<script src="../Angular/angula-scenario.js"></script>
<script src="../Angular/angular-touch.js"></script>
and this is how I added all these files in my code, but it is not working, please let me know what is the correct way of using complete AngularJS file.
Your path for angular-loader is different from the rest of your paths. I'm not sure if any of them are correct. I'd recommend starting the Chrome developer tools and then going to the Network tab to see if all of your resources are loading correctly.
Looking at your codepen it appears that you are reloading the Angular libraries later in your HTML. That is probably causing Angular to reinstantiate and therefore destroying whatever you've done in your code in between. Try deleting or commenting out the lines where you load Angular from cloudflare.
In my angular project, I am planning to have a separate .js file for each page and a separate .js file for each service.
However, as I begin to code, I realized that I have a lot of import statement in my index.html. This would cause user having to load all the .js file even if they might not need it.
An example of the .js for my index.html
<!-- JS -->
<script src="js/vendor/angular.js"></script>
<script src="js/app/app.js" ></script>
<!-- controllers -->
<script src="js/app/controllers/roomController.js"></script>
<script src="js/app/controllers/dashBoardController.js"></script>
<!-- services -->
<script src="js/app/services/dashBoardService.js"></script>
<script src="js/app/services/roomService.js"></script>
<script src="js/app/services/chatService.js"></script>
<script src="js/app/services/videoService.js"></script>
Is there any solution to this?
It's really a best practice to have each controller, each service, each directive… in a separate file, so you're doing it in the right way.
However, as you notice, it's better for the user (and for the server!) to download a minimal number of files. Your index.html is fine for development, but in production, you must compress all your files in in one, typically with a tool like UglifyJS or YUI Compressor.
This is a known issue, especially with large projects. A viable solution is using RequireJs . You can find plenty of resources on the web about that, for instance you can try this.
I had exactly the same problem so decided to use RequireJS to allow on-demand loading of my angularJS scripts. I created a wrapper called angularAMD that hopefully can help you integrate RequireJS and AngularJS:
http://marcoslin.github.io/angularAMD/