Im currently building a project that contains foundationApps in it which is based on angular. In the directives there are calls to template paths like so
templateUrl: 'components/accordion/accordion.html',
Im using grunt at the moment to copy the files over but with the path being as above all of the components are being moved to the root of the project for it to work without refracting.
Can I use grunt-rebase to change this link or is there another tool in the grunt collection to do it or that can do it better then manually changing the files each time I update
I normally use the html2js package to compile all my templates into a js file instead of moving the original files. It puts all the templates into the Angular $templateCache service.
Personally I've only used it with gulp but here's a Grunt package:
https://github.com/karlgoldstein/grunt-html2js
Related
I think that I've got how Webpack works. My problem is: Most tutorials/examples are based on a single index.html. So, how would I organize my webpack.config.js and directory structure for multiple pages?
Let's assume that I need the following things:
index.html with a css and js file
dashboard.html with a css and js file
profile.html with a css and js file
And here is what I don't get:
How would you structure your src and dist folder?
How do I have to configure Webpack? Probably with HtmlWebpackPlugin(?)
Is a single index.js file enough as entry point / How does one structure the index.js file / How do ES6 projects look in general?
A sample project would help a lot. A project with more than just an example index.html file.
Have a good day! :)
I think u can do that by convert html+js+css into web component and u can do that easily by a framework , i think Vue js give very good boilerplate full Webpack template to let u do that just start to think about the other page as a new component remember that u r using webpack to get a bundle
So you can have one watch output multiple bundle types by passing in a command line arg to build the right bundle. There can be multiple entry points in webpack but webpack is only build to output one bundle. So, to solve this issue I figured passing a command line arg to webpack is a clean way of having multiple bundle possibilities while maintaining only one config file.
To see how this can be accomplished checkout...
https://www.hipstercode.com/blog/27/
Attempting to wrap my head around Ember.js.
Seems I understand the complex things, but miss out on the little things.
How would one go about adding an example.js file?
For simplicity, let's say the example.js file only contains:
(function(){
console.log("example is alive in console");
})(window);
This should display "example is alive in console" within the browser console.
I have tried:
adding app.import('vendor/javascripts/example.js'); within ember-cli-build.js and adding <script src="{{rootURL}}vendor/javascripts/example.js"></script> to index.html
Console is showing
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
DEBUG: -------------------------------
DEBUG: Ember : 2.11.3
DEBUG: Ember Data : 2.12.1
DEBUG: jQuery : 3.2.1
DEBUG: -------------------------------
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
All of the answers I have found stated that just adding custom.js to vendor file works. Sadly, I am missing something.
When modifying ember-cli-build.js you MUST RESTART the ember server manually. The livereload server will not pick up the changes.
This works for me when I don't nest assets in the /vendor directory. The ember-cli build process bundles JS files in /vendor into a single vendor.js file, which you can see linked in app/index.html. So place your example.js file at the root of /vendor, and then add the import to ember-cli-build.js:
app.import('vendor/example.js`);
Now when you start the server, your code from example.js should execute, since it will be included in assets/vendor.js.
Firstly, Ember.js has Convention Over Configuration approach, and your URL can do a lot of things than a normal HTML website.
Whatever you may want to do with your custom.js file it is not ember way of having it as a path. You need routes for navigation across the app. Although routes do much more than navigation. You specify the structure of your app that a user can browse through using Router's map function in app/router.js file.
However if you want to include custome.js file in your app, and have custom.js do some set of tasks for your app. You can simply go ahead and create a directory with any name, javascript for instance inside app directory. Have your javascript files placed inside it. Then you can import these files as simply as referencing any other files in ember:
import customObject from 'yourApp/javascript/custom.js';
Here, your custom.js should be exporting customObject.
Do read the guides if you want to learn more. And the API docs if you actually want to learn more.
Note: At the time of writing this answer current ember-cli version is #2.12.0
guyz,
I'm trying to build the angular2 for the production environment and I've generated the app.min.js using gulp and this link. After that I've provided the inline HTML in my component file and tried to run it, its working but, how do i provide the template cache in angular2 so, that my templateUrl in #component decorator can read and fetch the template from minified html template cache. Kindly help me on this.
Thank you
This would typically be done in the build process. Instead of using templateUrl one uses template and requires the HTML template as a string for that property. This way the templates are writting in the app.min.js file along with the rest. Are you using gulp or browserify? If the latter, you can use the stringify plugin to load the templates.
I have been using AngularJS for around 6 months now and have recently started using Yeoman and Grunt to help with my workflow.
Is there a way to have grunt update my index.html file for files/scripts that I add manually into my app folder?
I know that if I use the command:
$ yo angular:service New-Service
then a boilerplate file will be created and my index.html file will be updated to reference the new file.
Is there a way to have this functionality for files that I do not add with the syntax shown above?
Thanks for the help.
You are searching a linker. There are several grunt plugins to do this job :
- grunt-asset-linker
- grunt-sails-linker
Here is what you have to do :
Add a grunt task with (grunt-contrib-watch) to watch folders where files are added
Add a task with (E.g : grunt-asset-linker) to link all files from one or many folder to your index.html
I am using Angular js for my client side application.
Que:1
My folder structure is like :
Main
--Client
----app.js
----index.html
----Modules
------Module Name
--------module_name.js
--Server
I want to access Module Name.
I have tried using Main/Client/Module Name but I didn't get anything.
Which is proper way to get this?
Que:2
How can I add all js of Modules in index.html
I have to add all js of modules and its controllers in index.html manually.
Is there any way to add js automatically when module is called?
for question 1: you should better use absolute paths, /Main/Client/Module_Name
and for question 2: you should use grunt or a similar task manager to arrange those stuff for you. you can write a merge command that will merge all js files under Module to a single js file and add that file in index.html