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.
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 have created a project using the command
yo angular c3Chart
after successful scaffolding, In bower components i am getting angular.min.js.gzip file, for that getting error as "Uncaught ReferenceError: angular is not defined".
In index.html
<script src="bower_components/angular/angular.js"></script>
why this path is missing ,it has to come automatically after build. i tried adding manually it disappears after grunt serve command.
In index.html build:js is empty
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
I have an Ionic app and in the index.html file I have the following
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js" async="false"></script>
<!-- your app's js -->
<script src="js/app.js" async="false"></script>
<script src="js/controllers.js" async="false"></script>
<script src="js/services.js" async="false"></script>
The issue is that in cordova.js I have a plugin that does get initialized only after the controllers.js file is downloaded and executed, thus if I want to use that plugin in the controllers I can't because of an undefined error.
How can I make the controllers, app and services scripts load only after the cordova.js script has been downloaded and executed?
Thanks
Load it in this order
<script type="text/javascript" src="cordova.js"></script>
<script src="ionic.bundle.js"></script>
module
directive
service
controller
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 -->