The main use case I've seen for using webpack on css is with Angular2 or React where you have components that you can require the stylesheets onto. However, I'm using AngularJS so I don't know where I should logically be importing these stylesheets, does anybody know the best practice for this?
Concretely, given:
a stylesheet "loginBox.css"
a template "login.html"
a controller LoginController in "login.controller.js"
and
a route configuration
routeProvider.when('/login', {
controller: 'LoginController',
controllerAs: 'vm',
templateUrl: '/static/templates/authentication/login.html'
})$
How do I get "loginBox.css" to apply to "login.html" and only "login.html"?
To apply css to only one component you have to use shadow dom, however angularjs 1.5.x does not use shadow dom. But from your specification you have 2 options:
1. Load css file in router or via custom directive.
As suggested how-to-include-view-partial-specific-styling-in-angularjs you caninclude your custom css files using either custom directive or by using angular-css module (mode info about this module). I'd suggest to use the second option (angular-css module). Another example how to use angular-css module. However you will have to use specific styles to apply only to /static/templates/authentication/login.html file.
2. Load css files using module local scope.
Another way is to break you application to specific ES6 modules (don't get this mixed up with angular's modules) and include them in main ES6 module. To understand ES6 modules follow this link. And then you can use local scope with css-loader css-loader#local-scope. This option might be harder to make it work, because you will have to change your build process and split application to seperate modules, but you will get option to apply stylesheets to only one module.
To be clear the best sollution might be the first one, no need to change your build process and you can just add one NG module and you are good to go. No need to talk about that you can then load CSS files to your directives or components. But as you stated you need to apply your changes only to one particular .html file, so going for second option might more suit your needs.
When building less modular code requiring stylesheets in your entry file makes sense
Related
I am trying to develop a desktop application using Electron. I am also using AngularJS.
The problem I am running into is that when I create a custom directive, and load a templateUrl, the view doesn't load and the console says it doesn't exist. Yes, the path is correct, I am sure of it.
The problem is that the application is already running index.html, so it can't load the second file. Needless to say, I am not experienced enough to solve this problem on my own.
I know that Electron uses node on the backend, so I suppose setting routes and/or setting a path to my static files might resolve the problem, but I don't know how to do it.
I have searched the whole web for a solution, but I couldn't find a clear answer.
One way you could easily do it, is by adding your template as an inline template on the angular side, for example in your index.html:
<script type="text/ng-template" id="temp1.html">
....
</script>
Then you can reference it from your directive, like templateUrl: temp1.html.
Otherwise, you could also use a module bundler. Webpack has a ng-template loader which does that for you. Gulp and Grunt also have equivalents
Another thing to try, if you need to reference paths from the js side, is to use __dirname nodejs variable. Here an example
How can you package an angular module with its own translations stored in json files, without harming or needing extra config from the host app? This module should be able to exist as a bower dependency.
Basically I want the templates (directives) in my module to set the correct values, based on the $translate.use() of the main (ng-app) module. This without any concatenating of files or special config required by the main app. This would allow me to quickly add the module to various applications. You would just include the module in your app config angular.module('my-app', ['my-translated-module]); and it would be able to render the translations correctly as soon as you're starting to use the directive. The config of the translation is of course in the config section of 'my-translated-module'
For example: think of a login form with a "sign up" and "login" button. I want to have it this as a separate module/directive, so different applications could reuse that part, without having the duplicate the translations. If the module gets an update, i just need to do a bower update on my main app, rerun
I'm on angular 1.5 and using the angular-translate library by pascal precht - with the static file loader.
I now, use angularJS, requireJS, bootstrap to structure my project.Just like the title.Because of all router configured in app.js can make this file be so large and difficult to maintain in the future.So is existing some solution to solve it?Thanks.
Yes, definitely. We actually have a routing config file in each section of our site. It keeps it a lot more organized.
In the JS file you want to configure it you will just need to get a reference to your angular module and chain your config file off it. This is done by simply writing our your module as you would without the dependency brackets like this:
angular.module('myApp').config('configForThisRoute',function($stateProvider){
//define your states as usual
}
You can add your angularjs configuration in any .js file or you can give any name of file, but this file must be included first in html.
My particular question is with Foundation for Apps. Webpack has been great so far if I'm working with CommonJS code or within the context of the application that I'm writing, but I'm struggling to bring in Foundation for Apps, which contains its own HTML templates, SVG icons, JavaScript, and SCSS.
I've included FfA's JavaScript by requiring the concatenated source (which isn't ideal but it works). I can also include SCSS in a more clean way since Webpack's sass loader seems to know what to do with #import statements.
The key problems arise when FfA's source (Angular) requests HTML from a path that doesn't exist post-Webpack.
For example, a request will be made to get /components/modal/modal.html but the only thing in my public directory is bundle.js. How can I load all of the HTML templates and replace any occurrences of templateUrl paths in FfA's source with require statements that resolve to the path of the loaded HTML? Am I going down the right path or is there a better approach?
F4A is using the built-in Front Router plugin which simplifies the creation of routes in AngularJS by allowing you to define them directly in your view templates. As shown here it is meant to be used in the most basic sense and for rapid prototyping. For example, even if it implements Angular's UI-Router and its states, you can't use their resolve property.
I'm not familiar with Webpack and at which level it generates the required templates but if you can't generate them as Front Router's expected markdowns before being generated by gulp, then you may disable the plugin and implement your custom $stateProvider instance by leaving F4A out of it and solve it within AngularJs :
.state('yourstate', {
url: '/yoururl',
templateUrl: 'templates/yourTemplate.html',
//
// or maybe something like :
// -- this is guessing. i'm not familiar with webpack :) --
//
// templateUrl: function (wabpack) {
// return '/partials/' + wabpack.path + '.html';
// }
//
controller: 'YourController',
resolve: {
// you may also use resolve here for extra logic before
// loading your template
}
About how to disable F4A Front Rooter and how to implement your own $stateProvider instance you may check this :
Foundation for Apps : How to replace the default Dynamic Routing plugin?
Im using angular-ui-bootstrap with Grails 2.3.x asset-pipeline:1.6.1 plugin. One of the components - alert.js is attempting to load /template/alert/alert.html but this resolves to 404.
I tried including grails.assets.includes=[*/.html], did not help.
Any workaround for this? Anyway to let asset-pipeline include partial templates?
Is template located in assets, if so remember the first level folders inside of assets are flattened so you may want to nest your templates one more level or adjust your path
I have tried putting the /partials directory under /web-app. It ends up like:
/web-app/partials/content.html
I don't need to mess about with asset-pipeline, it just works!
The versions I use are:
Grails: 2.4.2
compile ":asset-pipeline:1.8.11"
Hope this helps anyone who upgrades their Grails version as well.
thanks for your great blog about AngularJS and Grails, which jumpstarted me on this topic.
Regarding partials, I assume the assets directory is not the right place to put them, because they get concatenated and minified in production mode.
Instead, I use GSP templates as AngularJS partials. For example, I have
views/partials/login.gsp
<div>Hello World!</div>
conf/UrlMappings.groovy
static mappings = {
...
'/partials/login'(view:'/partials/_login')
}
grails-app/assets/javascript/
...
templateUrl: 'partials/login',
...
Advantage: You may even use script lets and taglibs in the partials.
An alternative to using GSP directly would be James Kleeh's approach in this thread.
Best regards,
Björn