How to fix angular.js:99 Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.7.8/$injector/modulerr?p0=home&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angul.......1.7.8%2Fangular.min.js%3A22%3A57)%0A%20%20%20%20at%20Uc%20(http%3A%2F%2Flocalhost%3A8000%2Fangular-1.7.8%2Fangular.min.js%3A22%3A370)
?
<script src="/angular-1.7.8/angular.min.js"></script>
<script src="/angular-1.7.8/angular-aria.min.js"></script>
<script src="/angular-1.7.8/angular-material.min.js"></script>
<script src="/angular-1.7.8/angular-animate.min.js"></script>
<link href="/angular-1.7.8/angular-material.min.css" rel="stylesheet">
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="bootstrap-material-design.css" rel="stylesheet">
<script crossorigin="anonymous" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link crossorigin="anonymous" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" rel="stylesheet">
JS code
angular.module('home', ['ui.bootstrap', 'ngSanitize', 'ngAria', 'ngAnimate', 'ngMaterial']);
it will work without ngSanitize, but I need it.
you have to include cdn for ngSanitize and cdn is
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-sanitize.js"></script>
Related
Failed to instantiate module minovateApp
I am getting this error while building the angular project. I have installed ng-resource to my project:
Uncaught Error: [$injector:modulerr] Failed to instantiate module minovateApp due to:
Error: [$injector:nomod] Module 'minovateApp' 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.
http://errors.angularjs.org/1.5.0/$injector/nomod?p0=minovateApp at file:///E:/InnovationBeesprojects/cargobees-
.....
This is my index.html code
<!doctype html>
<html ng-app="minovateApp" ng-controller="MainCtrl" class="no-js {{containerClass}}">
<head>
<meta charset="utf-8">
<title>Cargobees - Admin Dashboard</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="icon" type="image/ico" href="favicon.ico" />
<link rel="manifest" href="manifest.json">
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-bootstrap-colorpicker/css/colorpicker.css" />
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="bower_components/angular-bootstrap-nav-tree/dist/abn_tree.css" />
<link rel="stylesheet" href="bower_components/chosen/chosen.min.css" />
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="bower_components/intro.js/introjs.css" />
<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="bower_components/rickshaw/rickshaw.min.css" />
<link rel="stylesheet" href="bower_components/angular-toastr/dist/angular-toastr.css" />
<link rel="stylesheet" href="bower_components/fullcalendar/fullcalendar.css" />
<link rel="stylesheet" href="bower_components/angular-ui-grid/ui-grid.css" />
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/angular-ui-tree/dist/angular-ui-tree.min.css" />
<link rel="stylesheet" href="bower_components/animate.css/animate.css" />
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css" />
<link rel="stylesheet" href="bower_components/leaflet-draw/dist/leaflet.draw.css" />
<link rel="stylesheet" href="bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.css" />
<link rel="stylesheet" href="bower_components/morrisjs/morris.css" />
<link rel="stylesheet" href="bower_components/ng-table/dist/ng-table.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.min.css" />
<link rel="stylesheet" href="bower_components/ngImgCrop/compile/minified/ng-img-crop.css" />
<link rel="stylesheet" href="bower_components/simple-line-icons/css/simple-line-icons.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.min.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons-wind.css" />
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons-wind.min.css" />
<link rel="stylesheet" href="bower_components/dragular/dist/dragular.min.css" />
<link rel="stylesheet" href="bower_components/magnific-popup/dist/magnific-popup.css" />
<link rel="stylesheet" href="bower_components/angucomplete-alt/angucomplete-alt.css" />
<link rel="stylesheet" href="bower_components/json-formatter/dist/json-formatter.css" />
<link rel="stylesheet" href="bower_components/bootstrap-social/bootstrap-social.css" />
<link rel="stylesheet" href="bower_components/c3/c3.css" />
<link rel="stylesheet" href="bower_components/angular-bootstrap-datetimepicker/src/css/datetimepicker.css" />
<link rel="stylesheet" href="bower_components/angular-hovercard/dist/angular-hovercard.css" />
<link rel="stylesheet" href="bower_components/owl.carousel/dist/assets/owl.carousel.css" />
<link rel="stylesheet" href="bower_components/owl.carousel/dist/assets/owl.theme.default.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/layout.css">
<!-- endbuild -->
</head>
<body id="minovate" class="{{main.settings.navbarHeaderColor}} {{main.settings.activeColor}} {{containerClass}} header-fixed aside-fixed rightbar-hidden appWrapper" ng-class="{'header-fixed': main.settings.headerFixed, 'header-static': !main.settings.headerFixed, 'aside-fixed': main.settings.asideFixed, 'aside-static': !main.settings.asideFixed, 'rightbar-show': main.settings.rightbarShow, 'rightbar-hidden': !main.settings.rightbarShow}">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Application content -->
<div id="wrap" ui-view autoscroll="false"></div>
<!-- Page Loader -->
<div id="pageloader" page-loader></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="https://www.gstatic.com/firebasejs/3.6.9/firebase.js"></script>
<script>
var config = {
apiKey: "AIzaSyD3ElSyvFYfVVXQlNimsfi_d7edi_VN_V8",
authDomain: "cargo-ee422.firebaseapp.com",
databaseURL: "https://cargo-ee422.firebaseio.com",
storageBucket: "cargo-ee422.appspot.com",
messagingSenderId: "100271283421"
};
firebase.initializeApp(config);
</script>
<script src="googlescripts/service-worker.js"></script>
<script src='//maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places,drawing&sensor=false&language=en&v=3.17'></script>
<!-- build:js(.) scripts/oldieshim.js -->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- endbuild -->
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-bootstrap-colorpicker/js/bootstrap-colorpicker-module.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap-nav-tree/dist/abn_tree_directive.js"></script>
<script src="bower_components/chosen/chosen.jquery.min.js"></script>
<script src="bower_components/angular-chosen-localytics/chosen.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.js"></script>
<script src="bower_components/angular-datatables/dist/angular-datatables.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/bootstrap/angular-datatables.bootstrap.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/colreorder/angular-datatables.colreorder.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/columnfilter/angular-datatables.columnfilter.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/colvis/angular-datatables.colvis.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedcolumns/angular-datatables.fixedcolumns.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/scroller/angular-datatables.scroller.min.js"></script>
<script src="bower_components/angular-datatables/dist/plugins/tabletools/angular-datatables.tabletools.min.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/angular-file-upload/dist/angular-file-upload.min.js"></script>
<script src="bower_components/angular-flot/angular-flot.js"></script>
<script src="bower_components/angular-fontawesome/dist/angular-fontawesome.js"></script>
<script src="bower_components/angular-fullscreen/src/angular-fullscreen.js"></script>
<script src="bower_components/angular-simple-logger/dist/angular-simple-logger.js"></script>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
<script src="bower_components/intro.js/intro.js"></script>
<script src="bower_components/angular-intro.js/src/angular-intro.js"></script>
<script src="bower_components/angular-ipsum/dist/ipsum.min.js"></script>
<script src="bower_components/leaflet/dist/leaflet-src.js"></script>
<script src="bower_components/angular-leaflet-directive/dist/angular-leaflet-directive.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>
<script src="bower_components/ev-emitter/ev-emitter.js"></script>
<script src="bower_components/imagesloaded/imagesloaded.js"></script>
<script src="bower_components/jquery-bridget/jquery-bridget.js"></script>
<script src="bower_components/angular-masonry/angular-masonry.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-momentjs/angular-momentjs.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/rickshaw/rickshaw.js"></script>
<script src="bower_components/angular-rickshaw/rickshaw.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-smart-table/dist/smart-table.js"></script>
<script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/angular-translate-storage-cookie/angular-translate-storage-cookie.js"></script>
<script src="bower_components/angular-translate-storage-local/angular-translate-storage-local.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/fullcalendar/fullcalendar.js"></script>
<script src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script src="bower_components/angular-ui-grid/ui-grid.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-ui-select/dist/select.js"></script>
<script src="bower_components/angular-ui-tree/dist/angular-ui-tree.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.js"></script>
<script src="bower_components/angular-base64/angular-base64.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="bower_components/flot/jquery.flot.js"></script>
<script src="bower_components/flot/jquery.flot.resize.js"></script>
<script src="bower_components/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="bower_components/flot.tooltip/js/jquery.flot.tooltip.js"></script>
<script src="bower_components/html.sortable/dist/html.sortable.js"></script>
<script src="bower_components/jquery.easy-pie-chart/dist/angular.easypiechart.min.js"></script>
<script src="bower_components/jquery.inputmask/dist/jquery.inputmask.bundle.js"></script>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.js"></script>
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/jquery.sparkline/index.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/leaflet-draw/dist/leaflet.draw.js"></script>
<script src="bower_components/leaflet-heat/dist/leaflet-heat.js"></script>
<script src="bower_components/leaflet-plugins/control/Distance.js"></script>
<script src="bower_components/leaflet-plugins/control/Layers.Load.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.Layer.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.Line.js"></script>
<script src="bower_components/leaflet-plugins/control/Permalink.Marker.js"></script>
<script src="bower_components/leaflet-plugins/layer/Icon.Canvas.js"></script>
<script src="bower_components/leaflet-plugins/layer/Layer.Deferred.js"></script>
<script src="bower_components/leaflet-plugins/layer/Marker.Rotate.js"></script>
<script src="bower_components/leaflet-plugins/layer/Marker.Text.js"></script>
<script src="bower_components/leaflet-plugins/layer/OpenStreetBugs.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/GPX.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/GPX.Speed.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/KML.js"></script>
<script src="bower_components/leaflet-plugins/layer/vector/OSM.js"></script>
<script src="bower_components/leaflet-plugins/layer/tile/Bing.js"></script>
<script src="bower_components/leaflet-plugins/layer/tile/Google.js"></script>
<script src="bower_components/leaflet-plugins/layer/tile/Yandex.js"></script>
<script src="bower_components/eve-raphael/eve.js"></script>
<script src="bower_components/raphael/raphael.js"></script>
<script src="bower_components/mocha/mocha.js"></script>
<script src="bower_components/morrisjs/morris.js"></script>
<script src="bower_components/ng-bs-daterangepicker/src/ng-bs-daterangepicker.js"></script>
<script src="bower_components/ng-table/dist/ng-table.js"></script>
<script src="bower_components/ng-tags-input/ng-tags-input.min.js"></script>
<script src="bower_components/ngImgCrop/compile/minified/ng-img-crop.js"></script>
<script src="bower_components/oclazyload/dist/ocLazyLoad.js"></script>
<script src="bower_components/textAngular/dist/textAngular-rangy.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular-sanitize.min.js"></script>
<script src="bower_components/textAngular/dist/textAngular.min.js"></script>
<script src="bower_components/dragular/dist/dragular.min.js"></script>
<script src="bower_components/magnific-popup/dist/jquery.magnific-popup.js"></script>
<script src="bower_components/flow.js/dist/flow.js"></script>
<script src="bower_components/ng-flow/dist/ng-flow.js"></script>
<script src="bower_components/angular-base64-upload/src/angular-base64-upload.js"></script>
<script src="bower_components/angucomplete-alt/angucomplete-alt.js"></script>
<script src="bower_components/json-formatter/dist/json-formatter.js"></script>
<script src="bower_components/myforce-angularjs-dropdown-multiselect/dist/angularjs-dropdown-multiselect.min.js"></script>
<script src="bower_components/c3/c3.js"></script>
<script src="bower_components/angular-chart/angular-chart.js"></script>
<script src="bower_components/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
<script src="bower_components/angular-bootstrap-datetimepicker/src/js/datetimepicker.templates.js"></script>
<script src="bower_components/angular-date-time-input/src/dateTimeInput.js"></script>
<script src="bower_components/angular-hovercard/dist/angular-hovercard.js"></script>
<script src="bower_components/angular-daterangepicker/js/angular-daterangepicker.js"></script>
<script src="bower_components/angular-websocket/dist/angular-websocket.js"></script>
<script src="bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- endbower -->
<!-- endbuild -->
</body>
</html>
This is my app.js
var app = angular
.module('minovateApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngSanitize',
'ngTouch',
'ngMessages',
'picardy.fontawesome',
'ui.bootstrap',
'ui.router',
'ui.utils',
'angular-loading-bar',
'angular-momentjs',
'FBAngular',
'lazyModel',
'toastr',
'angularBootstrapNavTree',
'oc.lazyLoad',
'ui.select',
'ui.tree',
'textAngular',
'colorpicker.module',
'angularFileUpload',
'ngImgCrop',
'datatables',
'datatables.bootstrap',
'datatables.colreorder',
'datatables.colvis',
'datatables.tabletools',
'datatables.scroller',
'datatables.columnfilter',
'ui.grid',
'ui.grid.resizeColumns',
'ui.grid.edit',
'ui.grid.moveColumns',
'ngTable',
'smart-table',
'angular-flot',
'angular-rickshaw',
'easypiechart',
'uiGmapgoogle-maps',
'ui.calendar',
'ngTagsInput',
'pascalprecht.translate',
'ngMaterial',
'localytics.directives',
'leaflet-directive',
'wu.masonry',
'ipsum',
'angular-intro',
'dragularModule',
'base64',
'flow',
'naif.base64',
'rorymadden.date-dropdowns',
'angucomplete-alt',
'jsonFormatter',
'angularjs-dropdown-multiselect',
'ui.grid',
'ui.grid.selection',
'angularChart',
'ui.bootstrap.datetimepicker',
'ui.dateTimeInput',
'yaru22.hovercard',
'daterangepicker',
'ngWebSocket'
]);
I am new to Angular. I am trying to run the app on the server and I am getting this as an error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
TypeError: $stateProvider.state is not a function
My app.js is
angular.module('starter', ['ngRoute','ui.router', 'ngAnimate','controllers', 'services'])
.config(['$urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('college', {
url: '/college',
templateUrl: 'html/colleges.html',
controller: 'collegeCtrl'
})
$urlRouterProvider.otherwise('/college');
}]);
My index.html page goes like the following
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js">
</script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!--controllers -->
<script type="text/javascript" src="controllers/collegeCtrl.js"></script>
<!--Services -->
<script type="text/javascript" src="services/httprequestService.js">
</script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body ng-app="starter">
<div class="content">
<div ui-view ng-class="transition">
default content
</div>
</div>
</body>
</html>
colleges.js
angular.
module('controllers',[]).
controller('collegeCtrl', function ($scope,$state) {
});
I really don't understand what is going wrong. I have googled the error for the solution but it didn't work out.
You can try this
<html lang="en" ng-app="starter">
Try this:
.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
...
}
Whatever you inject should be in the same order or else it can be a dependency injection mismatch sort of problem
I'm new to angular and i'm trying to convert a responsive template into angularJS, I created 2 directives for (header, footer) and view to display content of each template.
the problem exists in the home template where the slide show is in as the page loads completely but without the camera slide show.
Updated
that's the last working simplest version of my code
Here is my main page:
<head>
<!--CSS-->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<!--JS-->
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/camera.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="js/jquery.mobile.customized.min.js"> </script>
</head>
<body ng-controller="MainController">
<!--header-->
<header-dir></header-dir>
<!-- content -->
<div ng-view></div>
<!-- footer -->
<footer-dir></footer-dir>
<!-- scripts -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- SPELLS -->
<script src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="app.config.js"></script>
<script src="Controllers/MainController.controller.js"></script>
</body>
app.config.js file
var app = angular.module("levariApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Views/home.template.html',
controller: 'MainController'
});
});
and MainController.controller.js file
angular.module("levariApp")
.controller('MainController', function($scope){
})
.directive("headerDir", function(){
return {
templateUrl: 'Views/header.template.html'
};
}).directive("footerDir", function(){
return {
templateUrl: 'Views/footer.template.html'
};
});
I really don't know what i'm missing, hope you guys can help
I'm trying to load agGrid in my angular project but i can't figure what i'm doing wrong in implementation.. The error i got is
Error: [$injector:nomod] Module 'ag.grid' is not available!
below is the scripts and dependencies i use to get agGrid in my project.
<link rel="stylesheet" type="text/css" href="bower_components/toastr/toastr.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-select/dist/select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-loading-bar/build/loading-bar.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/nvd3/build/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-prettyjson/dist/ng-prettyjson.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ag-grid/dist/styles/ag-grid.css">
define([
'pages/transfer/grid/transfer-grid',
'pages/reports/reports/reports-config'
], function () {
var module = angular.module('app.pages.ePayment', [
'app.pages.transfer.grid',
'app.pages.reports.config',
'ngTable',
'agGrid'
]);
module.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('ePayment', {
url: '/ePayment',
views: {
contentView: {
templateUrl: 'app/pages/ePayment/ePayment.html'
}
}
});
}]);
module.run(['navigationMenuService', function (navigationMenuService) {
navigationMenuService.addMenuItem({
name: "ePayment",
link: "ePayment",
iconClass: "fa fa-money"
})
}]);
<script>window.name = "NG_DEFER_BOOTSTRAP!";</script>
<!-- build:remove:production -->
<script src="bower_components/angular/angular.js" type="text/javascript"></script>
<script src="bower_components/angular-animate/angular-animate.min.js" type="text/javascript"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<!-- <script angular-cache ojt preku require.js -->
<script src="bower_components/angular-filter/dist/angular-filter.min.js" type="text/javascript"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js" type="text/javascript"></script>
<script src="bower_components/angular-translate/angular-translate.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-ui-select/dist/select.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.min.js" type="text/javascript"></script>
<script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js" type="text/javascript"></script>
<script src="bower_components/quick-ngrepeat/quick-ng-repeat.js" type="text/javascript"></script>
<script src="bower_components/angular-nvd3/dist/angular-nvd3.min.js" type="text/javascript"></script>
<script src="bower_components/ng-prettyjson/dist/ng-prettyjson.min.js" type="text/javascript"></script>
<script src="bower_components/file-saver.js/FileSaver.js" type="text/javascript"></script>
<script src="bower_components/js-xlsx/dist/xlsx.core.min.js" type="text/javascript"></script>
<script src="bower_components/alasql/dist/alasql.min.js" type="text/javascript"></script>
<script src="bower_components/ng-table/dist/ng-table.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-grid/ui-grid.min.js" type="text/javascript"></script>
<script src="bower_components/ag-grid/dist/ag-grid.js" type="text/javascript"></script>
Did i call it wrong or what? i installed using bower ( bower install ag-grid ) .
One thing that I faced with ag-grid is that you have to mention it in index.html even before angularjs and the other thing is in your main module you have to call the function:
agGrid.initialiseAgGridWithAngular1(angular);
Even before your module declaration. Refer https://www.ag-grid.com/best-angularjs-data-grid/index.php
Try these things and see if it works for you.
I'm trying to separate my existing code to different files. I declared ng-app in a js file same as below:
define(['routes-admin', 'services/dependencyResolverFor'], function (routes, dependencyResolverFor) {
var app = angular.module('app', ['ngRoute', 'formly', 'xeditable', 'toaster', 'ngAnimate', 'ui.bootstrap']);
app.config([
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
'$httpProvider',
function ($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
$httpProvider.interceptors.push('middleware');
])
return app;
});
and html code is like this:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8"/>
<title>title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<link href="css/style-blue1.css" rel="stylesheet" id="style_color"/>
<link href="css/jstree-themes/default/style.min.css" rel="stylesheet">
<link href="lib/toaster/toaster.css" rel="stylesheet">
<script type="text/javascript" src="lib/intro.js"></script>
</head>
<body ng-app="app">
<div id="navbar">
</div>
<div id="container">
<button class="btn" ng-click="functions()">funvtions</button>
</div>
<script type="text/javascript" src="lib/require.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.min.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="app/factories/MainViewFactory.js"></script>
<script type="text/javascript" src="app/controllers/MainViewController.js"></script>
<script type="text/javascript" src="lib/jstree.min.js"></script>
</body>
</html>
in the scripts segment I included app.js which is the js file above. but after running the code , it makes error : failed to instantiate app.
help me in this
That's classic issue when dependencies aren't fulfilled
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.min.js"></script>
you load angular route after app so the dependency injection fails
although you should load jQuery before angular, then angular.element will use jQuery selectors