This is my Html. I have given paths like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script type="text/javascript" href="/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script type="text/javascript" href="/node_modules/chart.js/dist/Chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="app/components/root/root.css">
<link rel="stylesheet" type="text/css" href="app/components/imgComponent/imgComponent.css">
<link rel="stylesheet" type="text/css" href="app/components/typesComponent/typesComponent.css">
<link rel="stylesheet" type="text/css" href="app/components/sourceComponent/sourceComponent.css">
<link rel="stylesheet" type="text/css" href="app/components/severitiesComponent/severitiesComponent.css">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
</head>
<body ng-app="appModule">
<app-root></app-root>
</body>
</html>
In my script I wrote:
'use strict';
const appModule = angular.module('appModule',["chart.js"]);
appModule.component('appSeveritiesComponent', {
templateUrl: '/app/components/severitiesComponent/severitiesComponent.html',
controller: severitiesComponentController,
bindings: {
}
});
severitiesComponentController.$inject = [];
function severitiesComponentController() {
}
When I am using in my application it is giving error
Uncaught Error: [$injector:modulerr]
How to solve this error?
You are missing reference for angular.js
add the reference for angular.js above
<script type="text/javascript" href="/node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
<script type="text/javascript" href="/node_modules/chart.js/dist/Chart.min.js"></script>
The order of your scripts matter. If you look at the Installation section on angular-chart.js, you will see the following order:
<script src="node_modules/chart.js/Chart.min.js"></script>
<script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
Chart.js should come before angular-chart.js
Moreover, you also need angular.js script inserted before those two.
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 know this is going to be a very simple error I am missing.
In my Angularj App, Error: Failed to instantiate module myApp due to: persists on showing. I know this down to the module not being loaded before being called by my own but I have been staring at my code trying to understand why it won't load i.e my own script loading before the module CDNs, spelling mistake etc.
My scripts are loaded like so:
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/components/chart/components/chartComponent.js"></script>
<script src="app/components/chart/services/chartService.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<title>Angular</title>
</head>
And in my app.module.js I try to inject two modules chartjs and uirouter. I switch them about and which ever is first it still flags an error
var app = angular.module('myApp', ['chart.js', 'ui.router']);
Question
Why are the modules failing to load? Sorry for the simple question.
You are missing the reference for angular-chart.js and reorder the references as follows,
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.routes.js"></script>
<script src="app/components/chart/components/chartComponent.js"></script>
<script src="app/components/chart/services/chartService.js"></script>
I am not able to inject froala wysiwyg-editor dependency to my module.
It shows this error:
Failed to instantiate module froala due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.5.6/$injector/nomod?p0=froala
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:25:235
at b (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:24:282)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:25:20
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:374
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:222)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:391
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355
My module in app.js is:
var teacherDashboard = angular.module('teacherDashboard', ['froala','ngMaterial', 'ngMessages', 'ngRoute', 'angularCSS']);
and the main index.html head contains:
<head>
<title>
Teacher Dashboard
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-css/1.0.8/angular-css.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc.5/angular-material.min.js"></script>
<!--floara editor-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4/js/froala_editor.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.3.4/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<!------>
<script src="./scripts/app.js"></script>
<script src="./scripts/services/service.js"></script>
<script src="./scripts/controllers/selectTopics.js"></script>
<script src="./scripts/controllers/selectTest.js"></script>
<script src="./scripts/controllers/assignQuestionNo.js"></script>
<script src="./scripts/controllers/assignTeachers.js"></script>
<script src="./scripts/controllers/reviewPanel.js"></script>
<link rel="stylesheet" type="text/css" href="./styles/teacherDashboard.css">
<!-- <base href="/">-->
</head>
I am following this link for refernce LINK
Where am i possibly going wrong?
You are probably missing the "froala" angular module in your index.html
Here is the link of the module : angular-froala.js
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
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...