I want to add angular material design in my website.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
But its not working for me.Please help me...
Refer in the following order.
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js"></script>
<script src="//rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
</script>
Working App
Related
I am using AngularJS and trying to use the angularJS material datepicker. I have been following the tutorial video at https://egghead.io/lessons/angularjs-angular-material-containers-with-the-layout-api
However, I keep getting this error and dont know why?
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.9/$injector/modulerr?p0=kg-App&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.9%2F%24injector%2Fmodulerr%3Fp0%3DngMaterial%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.6.9%252F%2524injector%252Fnomod%253Fp0%253DngMaterial%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A7%253A76%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A26%253A408%250A%2520%2520%2520%2520at%2520b%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A25%253A439)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A26%253A182%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A332%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A180)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A364%250A%2520%2520%2520%2520at%2520r%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.9%252Fangular.min.js%253A42%253A180)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A43%3A99%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A364%0A%20%20%20%20at%20r%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A42%3A180)%0A%20%20%20%20at%20gb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.9%2Fangular.min.js%3A22%3A332)
The error happens when I inject the ngMaterial in my app.js
angular.module('kg-App', ['ui.router','ngMaterial'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('login');
});
I followed the video and have all the scripts that I need
<!DOCTYPE html>
<html ng-app="kg-App">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KG Strength</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="//cdn.rawgit.com/indrimuska/angular-moment-picker/master/dist/angular-moment-picker.min.css" rel="stylesheet">
<link type="text/html" rel="stylesheet" href="node_modules/angular-material/angular-material.min.css">
<link rel="stylesheet" href="./stylesheets/main.css">
<link rel="stylesheet" href="./stylesheets/newform.css">
<link rel="stylesheet" href="./stylesheets/admin.css">
<link rel="stylesheet" href="./stylesheets/nextsession.css">
</head>
<body>
<header-template></header-template>
<image-template></image-template>
<footer-template></footer-template>
<ui-view autoscroll='true'></ui-view>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script type="text/html" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/html" src="node_modules/angular-aria/angular-aria.min.js"></script>
<script type="text/html" src="node_modules/angular-messages/angular-messages.min.js"></script>
<script type="text/html" src="node_modules/angular-material/angular-material.min.js"></script>
<script src="./javascripts/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
Please help
Move the jquery.js script reference before angular.js (important, because angular.js use it internally )
in the App.js, add a dependance to ngMessages !
angular.module('kg-App', ['ui.router','ngMaterial', 'ngMessages'])
Also take a look to enter link description here (the video you looked seem outdated)
I am working on MEAN Stack application. I want to use Bootstrap Material Design CSS styles to my single page application but routing is not working when using mdb.min.css .what is the solution to avoid this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Testing Application</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="css/mdb.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<div ng-view></div>
<!-- SCRIPTS -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/tether.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script type="text/javascript" src="js/routingCtrl.js"></script>
<script type="text/javascript" src="js/loginCtrl.js"></script>
</body>
</html>
if i add mdb.min.css the routing page is not visible in ng-view.but if i remove mdb.min.css the page is visible without styling
Try using the CDN by adding it to the head tags of your root index.html of your angular app like this.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
If it doesn't work please make your issue more elaborate.
I am trying to implement angular chart with my app. I bower installed angular-chart.js and have chart.js listed as a dependency. However when I load my page I get the following error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module chart.js due to:
Error: [$injector:nomod] Module 'chart.js' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
My questions is this: How do I get this error to go away? I've verified that charts is being loaded before angular-chart but I'm not able to get this error to go away.
Here is my index.html:
<!--suppress ALL -->
<html lang="en" ng-app="app" ng-cloak>
<head>
<meta charset="utf-8">
<base href="/">
<!--[if IE]><link rel="shortcut icon" href="assets/img/favicon.ico"><![endif]-->
<link rel="apple-touch-icon-precomposed" href="assets/img/favicon.ico">
<link rel="icon" href="assets/img/favicon.ico">
<!-- Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta name="description"
content="Convenient, affordable online CPA and EA self-study CPE. Complete CPE courses in your spare time, on the go.">
<meta name="author" content="Learning Suite Inc">
<meta name="google-site-verification" content="3QtiwaamWrLo-A9BAx0kTgVHagRJfe0xE60hMULF12M"/>
<meta name="fragment" content="!">
<title update-title>Prolaera</title>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/pricing/pricing_v6.css" media="screen" title="no title" charset="utf-8">
<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans"/>
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v2.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- <link rel="stylesheet" href="assets/css/headers/one.css" media="screen" title="no title" charset="utf-8"> -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/sky-forms-pro/skyforms/css/sky-forms.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
<link rel="stylesheet" href="css/sweetalert2.css">
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
<!-- Bootstrap core CSS -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Bootstrap theme -->
<link href="lib/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet"/>
<!-- Angular CSP-->
<link href="lib/angular/css/angular-csp.css" rel="stylesheet"/>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/lib/html5shiv/html5shiv.min.js"></script>
<script src="/lib/respond/respond.min.js"></script>
<![endif]-->
<!-- must be before require.js -->
<script type="text/javascript" src="https://cdn.auth0.com/js/lock-9.1.min.js"></script>
<script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="lib/moment/moment.js"></script>
<script type="text/javascript" src="lib/url-template/url-template.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="js/apigClient.js"></script>
<!--jquery/bootstrap needed here for calendar and collapse navbar toggle-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>
<!-- jquery, moment, and angular have to get included before fullcalendar -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/gcal.js"></script>
<!-- require -->
<script src="lib/require/require.js"></script>
<script type="text/javascript" src="lib/auth0-variables.js"></script>
<!-- angularjs -->
<link href="lib/angular/css/angular-csp.css" rel="stylesheet"/>
<script src="lib/angular/js/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-bootstrap-typeahead/ui-bootstrap-typeahead.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-bootstrap-toggle-switch/style/bootstrap3/angular-toggle-switch-bootstrap-3.css">
<script type="text/javascript" src="bower_components/angular-bootstrap-toggle-switch/angular-toggle-switch.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-spinkit/build/angular-spinkit.min.css">
<script src="bower_components/angular-spinkit/build/angular-spinkit.min.js"></script>
<script src="bower_components/angular-stripe-checkout/angular-stripe-checkout.js"></script>
<!
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css">
<script src="lib/angular/js/angular-animate.js"></script>
<script src="lib/angular/js/angular-ui-router.js"></script>
<script src="lib/angular/js/angular-ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
<script src="https://cdn.auth0.com/w2/auth0-widget-5.js"></script>
<script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script src="//cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script src="//cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<script src="lib/sweetalert/SweetAlert.js"></script>
<script src="lib/sweetalert/sweetalert2.min.js"></script>
<script src="lib/smarttable/smart-table.min.js"></script>
<script src="lib/angularsanitize/angular-sanitize.min.js"></script>
<script src="lib/ng-file-upload/ng-file-upload.min.js"></script>
<script src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script src="//code.angularjs.org/1.2.16/angular-cookies.min.js"></script>
<!-- Uncomment for deployment and comment for dev -->
<script src="js/analytics.js"></script>
<script src="js/inspectlet.js"></script>
<!-- Unify styling -->
<link rel="stylesheet" href="assets/css/headers/header-v1.css">
<!-- CSS Page Style -->
<link rel="stylesheet" href="assets/css/pages/shortcode_timeline2.css">
<link rel="stylesheet" href="assets/css/pages/page_pricing.css">
<script src="js/app.js"></script>
<script src="js/navbar-directive.js"></script>
<script src="js/footer-directive.js"></script>
Here is beginning of my app.js:
(function() {
var app = angular.module('app', ['ngCookies', 'auth0', 'angular-jwt', 'angular-storage', 'ngFileUpload', 'ngSanitize', '19degrees.ngSweetAlert2', 'ui.router', 'ngAnimate', 'ui.bootstrap', 'angular-spinkit', 'angular.filter', 'stripe.checkout', 'ui.calendar', 'ui.bootstrap.typeahead', 'toggle-switch']);
define('app', [], function() {
return app;
});
You have to import chart.min.js - and if you want to use full version of Chart.js you have to import Chart.bundle.js which is downloadable from chart.js webpage.
I had the same issue, tried to point to a CDN and it worked fine,
Then tried to used node_modules instead of bower_components and it worked fine too !
So I believe something is wrong with the bower version ...
Hope this helps ! Let me know !
I built a table in my demo. I got help from this example.
In this example, first column there is an image of "edit image" (coming from bootstrap).
I also make same example in my plunker, already includes jquery and bootstrap but it is not displaying the image. Why?
here is my code (plunker)
<head>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link data-require="bootstrap#*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<script data-require="jquery#2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
</head>
Your second example is missing this:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Adding it in gives this:
Essentially the image is a font coming from font-awesome, not bootstrap.
i want to use ngAnimate but somehow it doesn't work and i don't know why.
i have added everything to my page and have injected them in my app but still i am getting nothing.
here is my index and my app;
var app = angular.module('iranfile', ['ngAnimate','ngRoute','mgcrea.ngStrap']);
<html ng-app="iranfile">
<!-- ye lahze khafe sho-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> home page </title>
<!-- Add Jquery and bootstrap -->
<script src="js/jQuery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap/css/bootstrap.rtl.min.css"/>
<link rel="stylesheet" href="css/bootstrap/bs-additional/bootstrap-additions.min.css"/>
<!-- / Add Jquery and bootstrap -->
<!-- Angular CSS -->
<link rel="stylesheet" href="js/angular/ng-animation.css"/>
<link rel="stylesheet" href="css/angular/angular-motion.min.css"/>
<!-- Angular CSS -->
<link rel="stylesheet" href="js/toastr/toastr.min.css"/>
<!-- Narvan CSS DOCs -->
<link rel="stylesheet" href="css/fonts.css"/>
<link rel="stylesheet" href="css/layout.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="css/singup.css"/>
<link rel="stylesheet" href="css/estate.css"/>
<link rel="stylesheet" href="css/favor.css"/>
<link rel="stylesheet" href="css/account.css"/>
<!-- Narvan CSS DOCs -->
</head>
<body>
</body>
<!-- ADD AngularJs -->
<script src="js/angular/angular.min.js"></script>
<!--<script src="css/angular/angular-animate.min.js"></script>-->
<script src="js/angular/angular-1.4.4/angular-animate.min.js"></script>
<script src="js/angular/angular-strap/dist/angular-strap.min.js"></script>
<script src="js/angular/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script src="js/angular/angular-strap/dist/modules/tooltip.min.js"></script>
<script src="js/angular/angular-strap/dist/modules/parse-options.min.js"></script>
<script src="js/angular/angular-1.4.4/angular-route.min.js"></script>
<script src="js/angular/angular-1.4.4/angular-sanitize.min.js"></script>
<script src="js/client-connection.js"></script>
<script src="js/app.js"></script>
I've ran into lots of issues when using angular-strap & bootstrap-rtl
Try removing bootstrap rtl and check...