I was trying to import bootstrap's css and material design's one into my angular application but i found at the same time an issue and a compromise.
If I include them with "link href" in my index.cshtml file, I get as
result that this prevents my angular app from loading.
If I include them with #include into my main .css file (which is
called by require("style-loader!./styles.css"); ), it actually
works but this prevents my app from parallel .css download and the
result is that - yes, it works - but that slows my app a lot.
I saw that lot of people include them into the proper angular-cli json file but my app is not an angular cli application so I actually can't do that.
So the question is: can you suggest me what's the best way and the best practice to include the css in a non-angular cli application?
OTHER INFORMATIONS:
I am using also webpack, don't know if this changes or means something for my question
One thing good to know about the angular CLI is that in the background it makes a call to webpack to bundle your application with bootstrap
(if you put the proper line in the angular-cli.json file
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
)
As you are not using the angular.cli.json file, you have to directly import the bootstrap framework with webpack. A link which might help you to import boostrap with webpack : https://getbootstrap.com/docs/4.0/getting-started/webpack/
I hope it will be helpfull !
Related
I am new to using reactjs. I have an html file where i am trying to enter a react component . The react is described in two files: index.js which is "importing" a main.js file.
i want to have those components in my webpage. Can anyone tell me how can i do it ?
I tried using a script in my html file :
script src="index.js"
but it is not working.
I am totally new to this .
Reactjs is a group of components which bundled together to make a single page app.
I suggest reading the documentation of Reactjs
React js library is used to build a single page application. And it is a component-based library. You write your components and then render them into a single HTML div tag.
You should start your react journey with create-react-app boilerplate (https://reactjs.org/docs/create-a-new-react-app.html#create-react-app).
I developed an application with angular 4 for security reason and changing the template without compiling I am trying to find a way can change HTML and application use that. somehow I need to read HTML template files from an external folder and use that.
I tried to find a way, but unfortunately I could not get a direct answer I hope here I can found out is it any solution for that or not?
what I did are:
https://github.com/lacolaco/ng-dynamic
Load Angular2 template from external URL
Equivalent of $compile in Angular 2
Angular 4 Template Binding with ES6 Template String
Dynamically load HTML template in angular2
How to bind raw html in Angular2
Previously Angular were shipping angular-compiler in build (bundle js) for security reason they removed angular-compiler from bundle and reason is obvious that angular compiles code on build and there is no need to ship compiler. It creates extra overhead on your production site and also creates heavier bundle. So the answer is no. You cannot inject template from external source. Why not create a component and use condition to show your external html in this way?
Within our application we're trying to achieve (html)templating based on themes. For example, if the specified theme is default, we should use the basic templates, but if the theme is 'coolTheme', all templates postfixed with '-coolTheme.html' should be used instead.
We have considered different solutions, but figured there must be a simple/default way to do this. These are the options we came up with:
Gulp task that puts all html files per theme in a {myTheme}-templates.js. When changing the theme angular resets the $templateCache, loads in the theme file and puts the templates in the $templateCache.
Gulp task that copies over all *-.myTheme.html to where the default templates should be (based on given theme parameter). Disadvantages are that you cannot change the theme on the fly.
Intercepting/decorating the $templateRequest, to check in a list/configuration file if the requested file is marked as 'themed', and then change the request to 'theFile-{myTheme}.html' instead
Which is the best way to handle this? And why? Does anyone have the 'perfect' solution for this?
I wish to keep views as modular as possible. In practice it means I have lots of small generalized HTML snippets, from which the actual HTML page is composed. Now ng-include and custom directives with templateUrl suit me quite well, but only in development, because each HTML snippet is being requested separately.
In production, however, I expect a single page app to be, ummm, in a single page, all bundled and minified — just like the JavaScript module loaders (RequireJS, Component, Browserify, DuoJS, etc.) would do to modular JavaScript files. No extra HTTP traffic for loading HTML chunks is acceptable.
Now I'm pretty sure AngularJS does not do bundling out-of-the-box (I would've found it by now), but maybe you guys have come up with something to address this issue?
P.S. It should be noted that I am not looking for cache-related solutions.
you can use grunt-angularjs-template
it does concatenates all templates in one file. as per its docs
Grunt build task to concatenate & register your AngularJS templates in
the $templateCache
if you are using gulp, the gulp equivalent of it is gulp-angular-templatecache
If you’re using gulp then a good option would be gulp-angular-embed-templates
I am developing the RWD web app using twitter bootstrap, i want to do customize the bootstrap fro my needs, for that i downloaded the bootstrap source from getbootstrap.com .
I am planning to customize the bootstrap by keeping the bootstrap less files untouched and i want to create my own less files for customiztion as below
#import "../bootstrap/less/bootstrap.less";
#import "custom-variables.less";
#import "custom-other.less";
#import "../bootstrap/less/utilities.less";
But when i downloaded the bootstrap source, i am seeing so many folders along with the bootstrap LESS folder as below,
My question is: what are the files needed for me from bootstrap source folder to include in my web project.
Thanks in advance for any help.
The only file you need to import is bootstrap.less from less folder.
This file itself imports all the other .less files from that folder (besides theme.less, which is used for theming).
I'd suggest importing bootstrap.less and using theme.less to develop customized solutions.
Reading source of both files above may be beneficial to understanding what is "under the hood".
Remember that although you only import bootstrap.less, all the other files must be kept where they are, in order for bootstrap.less to be able to import them.
The files you need are in LESS folder. You can create a new file if you don't want to keep bootstrap same with layout.less . And can import that in master. After compilation your changes will be on top of it. You can use any compiler of your choice. e.g. Sublime Text plugin
You can also use just bootstrap.min.css and write your LESS code in a file a compile it to apply your custom changes(remember to import or include in your html file). This way you don't have to keep track of so many LESS file. As in any way your plans are not to change base bootstrap. So you can choose precompiled version and can always replace it when new updates come.