I'm scaffolding a project with Yeoman and I encountered a problem recently. When I use grunt command on a command line to make distribution version of a project it modifies my index.html and deletes bootstrap.min.js script. Everything else stays the same, it just from some reason deletes that one line of code.
Anyone knows what's the problem?
In the webapp generator, all bootstrap.js files get concatenated into the plugins.js file.
If you look in your index.html file (in the app folder) you should see the block of code I've added here
note the build:js scripts/plugins.js - that's what tells grunt to concatenate the files into the plugins.js file
You can rename plugins.js to bootstrap.min.js in that line if you'd like
<!-- build:js scripts/plugins.js -->
<script src="../bower_components/headroom/headroom.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/modal.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tab.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/affix.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/alert.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/dropdown.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/tooltip.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/transition.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/button.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/popover.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/carousel.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/scrollspy.js"></script>
<script src="../bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap/collapse.js"></script>
<!-- endbuild -->
Related
I just converted some HTML to JSX but inside the HTML file were several script tags. Here is the code below:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/web3.min.js"></script>
<script src="js/truffle-contract.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I am wondering how to use them in the JSX file, which I've turned into a component. Do I import them?
You should add the scripts in index.html like I show you below. Also, you should avoid to use jquery with React check here.
+-- React root dir
+-- public
+-- index.html
index.html
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
--> add scripts here
</body>
Also, you can import Bootstrap read this.
I'm playing around with the yeoman webapp generator and want to have multiple minified JavaScript files for my individual subpages for my page. However, the webapp concats all JavaScript files to one "big" main.js which does not match my setup.
In my setup, main.js is supposed to be some kind of common JavaScript file for all pages but each page should have an additional JavaScript file with stuff that only relates to this page. E.g.
index.html -> uses main.js
subpage1.html -> uses main.js and subpage1.js
subpage2.html -> uses main.js and subpage2.js
The result from gulp build is a big main.js that contains the main.js, subpage1.js and the subpage2.js which leads to errors: if I open subpage1.html, subpage2.js (the one that is included in the big main.js) might try to access HTML nodes that only exist on subpage2.html but not on subpage1.html.
E.g.:
subpage1.html includes the big main.js with subpage2.js
<script src="scripts/main.js"></script>
which contains subpage1.js AND subpage2.js, however if I do the following in subpage2.js
$('#IdThatOnlyExistsOnSubPage2').someMethod(...)
this fails of course.
How do I have to adjust the Gulpfile to solve this problem?
JS and CSS builds are generating with uglify (formerly known as usemin) you could find more advanced options and features from their documentation but I think you should separate build block by your needs.
If you have a common JS file for every page, you have to put them together for each pages and create new block for page specific files.
Here is example.
<!-- build:js scripts/main.js -->
<script src="config.js"></script>
<script src="app.js"></script>
<!-- endbuild -->
<!-- build:js scripts/page-dashboard.js -->
<script src="dashboard-charts.js"></script>
<script src="dashboard-widgets.js"></script>
<script src="dashboard-main.js"></script>
<!-- endbuild -->
Also you could do same thing for CSS file builds.
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="app.css">
<!-- endbuild -->
<!-- build:css style/page-dashboard.css -->
<link rel="stylesheet" href="dashboard-charts.css">
<link rel="stylesheet" href="dashboard-widgets.css">
<link rel="stylesheet" href="dashboard-main.css">
<!-- endbuild -->
I'm new to AngularJS.
Where do I place all .js files like module,routes and controllers?
I found examples but they put all of it inside of tags.
like I currently code like this:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/skills/skillsController.js"></script>
</html>
Is this normal? Or is there a proper way to include the files?
I have heard of RequireJS. But there a way without using it?
Thank you very much.
Regards,
Yuri
There is no right answer.
There are multiple ways. One of them being using <script> tags as your code does.
Other options are:
Gulp
Gulp + Bower
Webpack
RequireJS
SystemJS
You can also use Yeoman to scaffold your project with build pipeline in place.
You can include files normally before end body tag </body> - it's ok.
But more efficient way is pack your files into one or few groups (Libraries, Core, Modules) and minify. It is better to have fewer HTTP requests, so you should reduce amount of files.
To bundle your files and minify you can use gulp or webpack:
See example with gulp:
https://github.com/jhades/angularjs-gulp-example
See example with webpack:
https://github.com/zombiQWERTY/angular-webpack-starter
Few tips, you should pick and choose which ones are applicable to your app.
After all your application markup, load your scripts.
You may use a bundler, here is a starter project I created some time ago gulp-browserify-starter. #1 still applies.
Go through a bit more pain and use webpack to bundle your vendor and app code as distinct bundles.
Good luck
You need to put all your javascript just before body close tag instead of head
<html>
<head></head>
<body>
.......
.......
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/home/homeController.js"></script>
<script src="app/components/skills/skillsController.js"></script>
</body>
</html>
I am using node server to execute project. For executing projectevery time my process is execute following 3 commands in cmd
npm install
node server
grunt serve
I used pagination directive from Git-hub in my project, but the problem arising is that every time I initialize the project above way, the path given to pagination.js file gets disappear from index.html. I added this pagination module using
bower install angular-utils-pagination
I tried this with --save also, but the
<script src="assets/lib/angular-utils-pagination/dirPagination.js"></script>
this line is getting disappeared every time I start project, and I need to enter it manually.
Will you please help me solving this problem?
I see the problem. Like I state on the comment. you putting the script tag on wiredep scope build.
index.html
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="assets/lib/jquery/dist/jquery.js"></script>
<script src="assets/lib/angular/angular.js"></script>
<script src="assets/lib/angular-animate/angular-animate.js"></script>
<script src="assets/lib/angular-aria/angular-aria.js"></script>
<script src="assets/lib/angular-cookies/angular-cookies.js"></script>
<script src="assets/lib/angular-messages/angular-messages.js"></script>
<script src="assets/lib/angular-resource/angular-resource.js"></script>
<script src="assets/lib/angular-route/angular-route.js"></script>
<script src="assets/lib/angular-sanitize/angular-sanitize.js"></script>
<script src="assets/lib/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="assets/lib/angular-touch/angular-touch.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="assets/lib/angular-utils-pagination/dirPagination.js"></script>
<!-- endbower -->
<!-- endbuild -->
move your script tag after endbuild, then try to running 'grunt serve' again
...
<script src="assets/lib/angular-touch/angular-touch.js"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.js"></script>
<!-- endboser -->
<!-- endbuild -->
<script src="assets/lib/angular-utils-pagination/dirPagination.js"></script>
if you want it automatic build on wiredep process then add that on karma.conf.js
I think it locate on test directory. if you could provide me that file, I will show you how.
At the moment, I'm including all of my JavaScript files in the <head> part of my html.
<!DOCTYPE html>
<html data-ng-csp>
<head>
<!-- ... -->
<script src="js/lib/wiki2html.min.js"></script>
<script src="js/lib/es6-promise.min.js"></script>
<script src="js/lib/l10n.min.js"></script>
<script src="js/lib/angular.min.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/angular-sanitize.min.js"></script>
<script src="js/lib/angular-touch.min.js"></script>
<script src="js/wrapper-indexeddb.js"></script>
<script src="js/wrapper-devicestorage.js"></script>
<script src="js/util.js"></script>
<script src="js/app.js"></script>
<script src="js/app-services.js"></script>
<script src="js/app-directives.js"></script>
<script src="js/app-controllers.js"></script>
</head>
<body data-ng-app="FireDict">
<!-- ... -->
</body>
</html>
I thought about using build and packaging tools together with tools like require.js or browserify, but most of my dependencies don't come as npm modules or as requirejs definitions. I have never used any js build tools before, but it seems to be a lot of work if not all of your dependencies come in the right modularized/packaged format.
What is the most elegant way to include AngularJS and the other scripts I'm using?
Some background: I'm authoring a webapp for Firefox OS based on AngularJS. (The problems about ngCsp that I previously described here were due to my ignorance of angular-csp.css. I simply forgot to include it.)
I would take a second look at RequireJS. With RequireJS not all of your packages need to be formatted as AMD modules. In the case where a dependency is not in the RequireJS (AMD) format you would instead use the shim configuration for those dependencies in your RequireJS configuration.