I've been sitting with this problem about an hour, I'm not sure what went wrong. I've been looking this question at stackoverflow, but nothing can help me. I tried to putting Moment js in my project.
Refer to this link (https://github.com/urish/angular-moment)
Already follow the instruction.
Got error: angular is not defined at angular-moment.js:630.
This is my code:
index.html
<!-- moment extension -->
<script src="lib/moment/moment.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
<!-- ionic/angularjs js -->
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
Javascript
angular.module('starter.controller', ['ionic', 'ionic-timepicker', 'angularMoment'])
.controller('checkoutOrderCtrl', function ($scope, moment) {
var NowMoment = moment();
$rootScope.date = NowMoment.format('YYYY-MM-DD');
$rootScope.time = NowMoment.format('h:mm:ss');
}
Thanks for help.
You need to place angular-moment.js after angular.js file:
<script src="angular.min.js"></script>
<!-- moment extension -->
<script src="lib/moment/moment.js"></script>
<script src="lib/angular-moment/angular-moment.js"></script>
Related
<!-- Vendor JS Files -->
<script src="../assets/vendor/jquery/jquery-3.6.0.js"></script>
<script src="../assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../assets/vendor/datatables/datatables.js"></script>
<script src="../assets/vendor/apexcharts/apexcharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.14.0-beta2/js/bootstrap-select.min.js" integrity="sha512-FHZVRMUW9FsXobt+ONiix6Z0tIkxvQfxtCSirkKc5Sb4TKHmqq1dZa8DphF0XqKb3ldLu/wgMa8mT6uXiLlRlw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="../assets/vendor/chart.js/chart.min.js"></script>
<script src="../assets/vendor/echarts/echarts.min.js"></script>
<script src="../assets/vendor/quill/quill.min.js"></script>
<script src="../assets/vendor/simple-datatables/simple-datatables.js"></script>
<script src="../assets/vendor/tinymce/tinymce.min.js"></script>
<script src="../assets/vendor/php-email-form/validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempus-dominus/6.0.0-beta2/js/tempus-dominus.js"></script>
<script src="https://kit.fontawesome.com/a98bc9d553.js" crossorigin="anonymous"></script>
<!-- Template Main JS File -->
<script src="../assets/js/main.js"></script>
What's wrong with my script init? already tried, it always give me Uncaught TypeError: $(...).tempusDominus is not a function eventhough the Jquery already at the top
This page outlines using the picker with jQuery. The jQuery-provider.js file must be included after the main picker code. jQuery is no longer a requirement and is here for backwards compatibility.
Forgot to include the JSProvider.js
When no modules are added, everything works for the page using controller 'articles', when adding modules needed the page needing controller 'flow' everything works in flow, but 'articles' gives me this error.
var AC = angular.module('AC', ['ngRoute','ngMaterial','firebase'])
AC.controller('articles', function($scope){...})
AC.controller('flow', function($scope,$firebaseArray) {...}
My scripts:
<!-- START STYLE AND SCRIPTS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- END STYLE AND SCRIPTS -->
I addded the ngRoute module, it didn't work. Then I tried using the normal angular.js file as it apparently gives a specific error, didn't work as well.
Any help?
Try this order with the mathcing versions of angular-route and angular-fire
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!-- Angular Route -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>
<!-- Angular Material -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<!-- our own app scripts -->
<script src="js/concat/app.js"></script>
Apologies for this question. The libraries were added on the flow.html file but not on the article.html file. The two solutions I provided at the bottom of the question does work as answered in previous questions.
I've developed an AngularJS App and it works on Firefox,Opera,Safari, Edge, and Chrome but it won't work on IE 11.
Here is the specific error message I get in opening the app in IE 11:
[$injector:modulerr] Failed to instantiate module TicketSystemApp due
to: Error: [$injector:modulerr] Failed to instantiate module
TicketSystemControllers due to: Error: [$injector:nomod] Module
'TicketSystemControllers' is not available! You either misspelled the
module name or forgot to load it.
It seems like my module app is not loading.
Here is my entire script load:
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<!-- Angular js -->
<script src= "js/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src = "js/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/md-data-table.min.js"></script>
<script src="js/toArrayFilter.js"></script>
<!-- auto-scroll module -->
<script src="bower_components/angular-scroll-glue/src/scrollglue.js"></script>
<script src = "js/app.js"></script>
<!-- Controllers -->
<script src = "js/controllers.js"></script>
<script src ="js/globalFunctions.js"></script>
<!-- Custom File Upload Angular -->
<script src="js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="js/ng-file-upload.min.js"></script>
<!-- FACTORY -->
<script src = "js/authInterceptor.js"></script>
<!-- Services -->
<script src="js/auth.js"></script>
<script src="js/session.js"></script>
<!-- loading bar -->
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
I have this in as my html tag:
<html lang="en" ng-app="TicketSystemApp" xmlns:ng="http://angularjs.org" class="ng-app:TicketSystemApp" id="ng-app">
And I do have this in my head tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I have tried manually bootstrapping but I just get the same error message twice.
Here is my app.js(Just the initialization):
var TicketSystemApp = angular.module('TicketSystemApp',[
'ngRoute',
'TicketSystemControllers',
'angular-loading-bar',
'ngAnimate',
'ui.router',
'ui.bootstrap',
'ngMaterial',
'md.data.table',
'angular-toArrayFilter'
]);
Here is my controller.js(just the initialization). I use this to module to contain all controllers:
var TicketSystemControllers = angular.module('TicketSystemControllers',[
'ngRoute',
'ui.router',
'ui.bootstrap',
'angular-loading-bar',
'ngAnimate',
'ngMaterial',
'ngMessages',
'ngFileUpload',
'md.data.table',
'bootstrapLightbox',
'luegg.directives'
]);
Kenta, it looks like you are not actually creating a controller at all. What you have done is created two modules, is that your intention? If so that is fine but you need to readjust your scripts and make sure you clear cache. IE 11 has an atrocious caching problem. Your scripts should be ordered this way
<script src = "js/controllers.js"></script>
<script src = "js/app.js"></script>
Also I noticed you have a global functions file. That file should be first if you have anything in the other two files that reference it. I suggest setting your scripts like this.
<script src= "js/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.7/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src = "js/ui-bootstrap-tpls-1.2.1.js"></script>
<script src="bower_components/angular-bootstrap-lightbox/dist/angular-bootstrap-lightbox.js"></script>
<script src="js/angular-ui-router.js"></script>
<script src="js/md-data-table.min.js"></script>
<script src="js/toArrayFilter.js"></script>
<script src="bower_components/angular-scroll-glue/src/scrollglue.js"></script>
<script src="js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="js/ng-file-upload.min.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
<script src = "js/controllers.js"></script>
<script src = "js/app.js"></script>
<script src ="js/globalFunctions.js"></script>
<script src="js/auth.js"></script>
<script src="js/session.js"></script>
<script src = "js/authInterceptor.js"></script>
I don't know if this is the exact order unless I see all of your JS but I assume this is pretty close. Usually you want all files your create in the correct order at the bottom of your and all vendor/3rd party files at the top in the correct order.
You load the controller before you declare the angular module
<script src = "js/controllers.js"></script>
<script src = "js/app.js"></script>
If you change the order to
<script src = "js/app.js"></script>
<script src = "js/controllers.js"></script>
it should works.
Maybe the same with toArrayFilter.js?
You have to be sure, that the module definition is made before you load some controllers, directives or factories!!!
In my case it was using const val = something.
When I changed it to var val = something, the error was gone.
I'm trying to use these c3 angular charts, but nothing seems to be showing up on the page. THere are no console errors I can find and I've followed the tutorial but nothing appears still.
I've pulled the git repo and referencing the files I think I need.
Why can't I see anything?
Charts:
https://github.com/jettro/c3-angular-directive
Tutorial:
http://jettro.github.io/c3-angular-directive/
Code:
<!DOCTYPE html>
<html ng-app="chart_test" xmlns="http://www.w3.org/1999/html">
<head>
</head>
<body ng-controller="ChartController">
<h1>Line Graph</h1>
<div id="chart1"></div>
<c3chart bindto-id="chart1" show-labels="true">
<chart-column column-id="line1"
column-name="Line 1"
column-color="green"
column-values="30,200,100,400,150,250"
column-type="line"/>
<chart-points point-radius="5"
show-point="true"
point-expand-enabled="true"
point-expand-radius="10"/>
</c3chart>
<script src="d3.min.js"></script>
<script data-require="angular.js#1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="c3-angular.min.js"></script>
<script src="app.js"></script>
<script src="ChartController.js"></script>
</body>
</html>
App.js:
var app = angular.module("chart_test", []);
Chart Controller:
var myApp = angular.module("chart_test");
myApp.controller("ChartController", ["$scope", function($scope){
$scope.message = "hi";
}]);
I am no expert on the subject, but in the getting started section of the page you provided, it says
You have to add the following libraries and stylesheet.
And then lists the following code:
<link href="css/c3.min.css" rel="stylesheet" type="text/css"/>
<script src="js/d3.min.js" charset="utf-8"></script>
<script src="js/c3.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/c3-angular.min.js"></script>
<script src="js/app.js"></script>
From what I see, you have included d3.min.js, angular.min.js, c3-angular.min.js, app.js but NOT c3.min.css and c3.min.js.
I would advise you to try including them and if it then still doesn't work, update your question with how that went.
In the beginning of my html I've declare my application:
<html lang="en" ng-app="MyAppModule">
and at the bottom I have include all the necessary files, the Chrome does not complain for any missing file:
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-resource.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/Controllers/EventController.js"></script>
<script src="js/Services/EventService.js"></script>
<script src="js/filters.js"></script>
Here is my application:
'use strict';
// Declare app level module which depends on filters, and services
var MyAppModule = angular.module('MyAppModule', ['ngResource']).config(function($routeProvider){
$routeProvider.when('/mybooks',{
templateUrl:'/templates/mybooks.html',
controller:'EventController'
}
);
});
But when I am trying to see the page there is a Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.14/$injector/modulerr?p0=MyAppModule&p1=Err…js.org%2F1.2.14%2F%24injector%2Funpr%3Fp0%3D%2524routeProvider%0A%20%20%20...<omitted>...2) on the browser. Any help? Am I missing something?
Try replacing this:
['ngResource']
With this:
['ngResource', 'ngRoute']
It looks like you're not injecting the route provider.