I have installed Angular (1) Material (v.1.1.5) via NuGet in my Visual Studio project and referenced it following their guide:
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-animate.min.js"></script>
<script src="scripts/angular-aria.min.js"></script>
<script src="scripts/angular-messages.min.js"></script>
<script src="scripts/angular-sanitize.min.js"></script>
<script src="scripts/angular-material.min.js"></script>
<link href="content/bootstrap.min.css" rel="stylesheet" />
<link href="content/angular-material.min.css" rel="stylesheet" />
From their guide:
If you're using the Angular CLI, you can add this to your styles.css:
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
Alternatively, you can just reference the file directly. This would
look something like:
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
NuGet won't install the prebuilt themes .css files and I cannot find them on the Net. Or am I simply doing something wrong? Am I missing something? Should the prebuilt themes be part of the angular-material.min.css file?
EDIT:
#Edric:
I have already defined my mdThemeProvider:
<body ng-app="myApp" ng-controller="MainCtrl" md-theme="ccc" md-theme-watch="true">
&
var myApp = angular.module("MyApp", ['ngAnimate', 'ngAria', 'ngMessages', 'ngMaterial', 'ngRoute', 'ngSanitize']);
rcaApp.config(function ($mdThemingProvider) {
$mdThemingProvider.theme('ccc')
.primaryPalette('pink')
.accentPalette('orange')
.dark();
});
You're looking at the documentation for Angular Material. You should be looking at the docs for AngularJS Material instead.
Anyways, here's the correct way to define a theme using $mdThemeProvider:
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
More info on theming
Related
I'm new to react and started to hate it
there are literally no documents about how to use CSS frameworks offline with react.
I don't wanna use npm or CDN all the time because I'm usually offline
Is there any way to add materialize CSS and js to react like a normal project with link and script
yes, you can install the assets of materialize from the offical site
https://materializecss.com/getting-started.html
then you can add the files into public folder after that add the following scripts at public/index.html file like that:-
<head>
<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<script type="text/javascript" src="%PUBLIC_URL%/js/materialize.min.js"></script>
</body>
but this isn't the best practice for react projects.
I'm new in Angular and I have created an Angular 2 application using Visual Studio 2017 Angular Spa template.
I want to add Angular Material to my project and in its guide said that I have to add this:
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
But I don't know where.
I have add it inside app.component.css file:
#import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
But I get a warning:
(CssLint) #import prevents parallel downloads, use instead.
I have found this answer, but I don't think it applies to my problem.
Where can I add styles or fonts to use them globally?
Since you're new to Angular, I can only advise you to follow their guidelines.
And one of their guidelines is to create a project using the Angular CLI.
Once you've created the project, if you want to add Angular Material, follow their guide too.
About your font issue : you're not trying to import a style, you're trying to import a font. Fonts goes in the index.html page, in the head. #Gregor placed it well.
In your Angular project folder you should got to src/app/. In the app-folder you can see index.html and styles.css. So this two files are global. You can add font styles in index.html od via #import in styles.css.
In case of your question you should have an index.html in your wwwroot folder. In this example the author does so.
For example index.html:
<html>
<head>
....
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
...
</head>
<body>
...
</body>
</html>
Answer that you posted actually applies to you, but firstly you should download this font and copy it to your project dir so it can be static asset. Then you can import this file using webpack plugin (look here). I'm not familiar with project generated by Visual Studio you can just simply add your link tag to index.html inside head tag.
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
</head>
...
</html>
Only add our CSS files to the nonTreeShakableModules array of the webpack.config.vendor.js, e.g. my webpack.config.vendor is like
const nonTreeShakableModules = [
'bootstrap-css-only/css/bootstrap.css',
'font-awesome/css/font-awesome.css',
'es6-promise',
'es6-shim',
'event-source-polyfill'
];
That's because of you have (in the same webpack.config.vendor)
const clientBundleConfig = merge(sharedConfig, {
entry: {
vendor: isDevBuild ? allModules : nonTreeShakableModules
},
}
In case of a font I don't know if the best solucion it's simply add a link in _layout.cshtml as #Gregorg say
I want to using in my service webjars bootstrap.
I added dependency
compile group: 'org.webjars', name: 'bootstrap', version: '4.0.0-alpha.6-1'
I register source
registry
.addResourceHandler("/webjars/**")
.addResourceLocations("/webjars/");
I using bootstrap css in thymeleaf
<link rel="stylesheet" th:href="#{webjars/bootstrap/4.0.0-alpha.6-1/css/bootstrap.min.css}">
And bootstrap does not work at all. No items. How this service did not see the bootstrap css file? In the project I use, for example, Spring Security. Could it have any effect? And is it worth the trouble of fixing it? What is the speed between a webjars file and such a plain css file in the 'resource' folder?
To add Bootstrap as webjar pls add the following to build.gradle:
dependencies {
...
compile 'org.webjars:bootstrap:4.1.3'
}
And attach it to html template:
<body>
<script src="/webjars/bootstrap/4.1.3/js"></script>
...
</body>
You can add bootstrap.min.css file like below:
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
A github example is given in this link: https://github.com/springframeworkguru/springbootwebapp
Full tutorial is here: https://springframework.guru/spring-boot-web-application-part-2-using-thymeleaf/
I'm using Yeoman to develop a new site with angularJS. I've tried with bower install materialize and bower install angular-material but nothing happens, I mean, it doesn't change the appearance and functionality. I've add also to the index.html these two lines:
<script src="bower_components/angular-aria/angular-aria.js"></script <script src="bower_components/angular-material/angular-material.js"></script>
I guess I may change the css route for the style, but not sure how...
bower install angular-material --save
This will install and (--save) update your package.json file.
when you make use of bower it will automatically update your index.html (add css and js files), you dont have to add any it manually.
In your case i would suggest you to check whether the dependency is added to your app.js or not, this could possibly be issue.
Late to the party but I know how to do it with Angular Projects
Angular 1.xx
Simply import Materialise CSS in your project like this
<script type="text/javascript" src="./js/cdn/jquery-3.2.1.min.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="./js/cdn/angular.min.js"></script>
<script src="./js/cdn/angular-route.js"></script>
<script src="./js/cdn/angular-animate.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="./js/cdn/materialize.min.js"></script>
<!--Initalize MaterializeCSS-->
<script src="./js/init.js"></script>
Angular 2+
First install materilize and Jquery
npm install materialize-css jquery font-awesome --save
And then import Materialise CSS in angular-cli.json by simply copy paste below script and CSS paths
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/materialize-css/dist/js/materialize.js"
]
Include material icons in the <head> of index.html and you are good to go.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Add the line below to your head to load the css
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
The full skeleton is available at
https://github.com/angular/bower-material/blob/master/README.md
By the way, your bower install and script src both refer to https://material.angularjs.org/latest and not http://materializecss.com/, which is in the title and tags. materializecss is a separate project that provides similar components. You probably don't need both.
There is a nice yeoman generator that will do that for you if you are starting a new project: https://github.com/Swiip/generator-gulp-angular
just select it in the options after:
yo gulp-angular
For existing projects I just use the following repo:
https://github.com/angular/material#bower
which can be implemented by installing angular-material
bower install angular-material
I was wondering if anyone out there knew which js files from zurbs foundation requires Jquery. I am building my functions.php file in wordpress and I want to set the dependencies for the scripts if they have any, so that they are guaranteed to load after the Jquery file. Here is a list of the files
modernizer.js
foundation.js
app.js
Again which ones have dependancies on Jquery?
This question is a bit old, so the question wouldn't be exactly the same now:
modernizer.js doesn't require jQuery, I think foundation & app did, but zurb has significantly changed the javascript files, including made their own fork of modernizer (modernizr.foundation.js) - the current (foundation 2.2) "preferred" load order is:
<head>
<script src="js/modernizr.foundation.js"></script>
</head>
<body>
...
...
<!-- end of container/all content -->
<script src="js/jquery-1.7.2.js"></script>
<!-- all the jQuery dependent files begin with 'jquery.' and are separated so
you can remove what you don't use -->
<script src="js/jquery.reveal.js"></script>
<script src="js/jquery.orbit-1.4.0.js"></script>
<script src="js/jquery.customforms.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/jquery.tooltips.js"></script>
<!-- app.js is basic functions that you're supposed to edit -
it requires jQuery to start as well -->
<script src="js/app.js"></script>
</body>