I'm trying to use Datepicker Popup (angularjs 1.6.6), from angular ui
I've use the example Plunker. All works perfectly but in my project the result is this:
I've had checked the follogin things:
The files that reference to the .js.
Example:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
My proyect:
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
The style css, maybe here is the problem, but I'm not sure:
Example:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
My project:
#import "bootstrap-sass-official/assets/stylesheets/_bootstrap.scss";
How can I resolve this? I need to fix the pattern of the date and
I have the module : "angular-bootstrap": "^2.5.0".
Installing bower install bootstrap, not works
Thanks in advance for your help
P.S: I hope this time the question is in the good format and way of the directives of stackoverflow.
Related
I am working on an application that uses AngularJS and Angular (2+). In the new version, I am using system.js to import the Angular app. Without the system.js import the calendar works fine, but with system.js there is a problem to initialize.
I have tried the trick below with calendar = $(elm); with no luck.
https://github.com/angular-ui/ui-calendar/issues/267
Even trying var calendar = $('#calendar’).
The problem does not seem to be in recognizing that there exists a calendar element. From what I can infer logging the framework’s source code, when working correctly, the calendar element has these classes when initializing.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope.fc.fc-cursor.fc-ltr.fc-unthemed
Currently the initialize is trying to use this as the calendar element which throws the angular.min.js:117 TypeError: calendar.fullCalendar is not a function error, it still finds the correct element but does not append the classes to it.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope
script.ejs
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<—-! All the AngularJS -—>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-sanitize.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg=" crossorigin="anonymous"></script>
<!-- ui calendar -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js" integrity="sha256-DBa6dvjY39GU4NQ2Ia2CIPVFszxgZ4N3JccyPvJNPLI=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script>
AngularJS only app, index.ejs :
<body>
<div id="shell" data-ng-app="app" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
</body>
Hybrid app index.ejs :
<body class="full-width">
<div id="shell" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.error('ERR from import: ’,err); });
</script>
</body>
I am using v 2.7.1 of fullcalendar, and v 1.0.0 of angular-ui-calendar. Any help to what might be the cause of this problem would be extremely appreciated, I’ve been looking at this for days!
I found the answer with this post.
How to import fullcalendar v.3.0.1 with systemjs?
Turns out the problem lay in the moment.js file not being within the meta property within the system.js config.
I'm going through some starter React.js courses to become more familiar with React, and the ES6 format. Unfortunately, the courses were created during 0.13 when the JSX Transformer was available, and I do not want to setup a node.js environment with each and every exercise file. It also seems that babel-browser was discontinued, and babel-standalone needs much more than a type in the script properties to compile, so neither seems to be a solution (Unless I misunderstood standalone).
Is there anything out there that handle transforms as simply as the JSX Transformer once did?
Thanks in advance!
The react site tutorial (http://facebook.github.io/react/docs/tutorial.html) seems to use babel dynamically.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
</html>
I'm having this error using the passy masonry. Any idea what does it mean?Cause basically right now the masonry doesn't work for me at all.
Thanks in advance
I'm not sure what the cause of your issue is, but I was just dealing with the same thing, and I was able to resolve it by messing around with dependencies. After some trial and error, I noticed that I was missing a dependency for one of angular-masonry's dependecies, called jquery-bridget. I am not sure why this isn't being installed with bower-install, perhaps there is an issue with the bower.json, but anyways, if you do
bower uninstall --save angular-masonry
and then
bower install --save jquery-bridget
bower install --save angular-masonry
it MAY fix your problem. Once again, not entirely sure if this is the same issue or whether there was something wonky with my set up that I had messed up. Hope this helps!
I had exactly same problem before and solved by just changed "jquery.bridget.js" loading position.
<!-- bower:js -->
<script src="bower_components/jquery/dist/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-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="bower_components/get-style-property/get-style-property.js"></script>
<script src="bower_components/get-size/get-size.js"></script>
<script src="bower_components/eventie/eventie.js"></script>
<script src="bower_components/doc-ready/doc-ready.js"></script>
<script src="bower_components/eventEmitter/EventEmitter.js"></script>
<script src="bower_components/matches-selector/matches-selector.js"></script>
<script src="bower_components/outlayer/item.js"></script>
<script src="bower_components/outlayer/outlayer.js"></script>
<script src="bower_components/masonry/masonry.js"></script>
<script src="bower_components/imagesloaded/imagesloaded.js"></script>
<script src="bower_components/angular-masonry/angular-masonry.js"></script>
<!-- endbower -->
You need to install jquery bridget plugin:
bower install --save jquery-bridget
If you use grunt-wiredep, than you should get the following order of scripts in your html (second part of scripts list should have exactly the same order: jquery.bridget.js and then other scripts!) :
<!-- bower:js -->
<script src="/vendor/jquery/dist/jquery.js"></script>
<script src="/vendor/angular/angular.js"></script>
<script src="/vendor/angular-resource/angular-resource.js"></script>
<script src="/vendor/angular-route/angular-route.js"></script>
<script src="/vendor/jquery-bridget/jquery.bridget.js"></script>
<script src="/vendor/get-style-property/get-style-property.js"></script>
<script src="/vendor/get-size/get-size.js"></script>
<script src="/vendor/eventie/eventie.js"></script>
<script src="/vendor/doc-ready/doc-ready.js"></script>
<script src="/vendor/eventEmitter/EventEmitter.js"></script>
<script src="/vendor/matches-selector/matches-selector.js"></script>
<script src="/vendor/outlayer/item.js"></script>
<script src="/vendor/outlayer/outlayer.js"></script>
<script src="/vendor/masonry/masonry.js"></script>
<script src="/vendor/imagesloaded/imagesloaded.js"></script>
<script src="/vendor/angular-masonry/angular-masonry.js"></script>
<!-- endbower -->
And here is a part of my bower.json file:
{
...
"dependencies": {
"jquery": "~2.1.4",
"angular": "~1.3.15",
"angular-resource": "~1.3.15",
"angular-route": "~1.3.15",
"angular-masonry": "~0.11.0",
"jquery-bridget": "~1.1.0"
}
}
With all this configuration angurlar-masonry is working as expected.
I am currently working on a Yeoman generated Angular project.
I'd like to force bower.json to only utilize a dependency's *.min.js file rather than the full *.js version. I'm sure this is relatively easy to configure but I can't seem to figure it out.
For example, the following is being automatically injected:
<script src="bower_components/angular-chart/angular-chart.js"></script>
Instead of:
<script src="bower_components/angular-chart/angular-chart.min.js"></script>
Here's the full HTML from the relevant section:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-utils-pagination/dirPagination.js"></script>
<script src="bower_components/spin.js/spin.js"></script>
<script src="bower_components/angular-spinner/angular-spinner.js"></script>
<script src="bower_components/d3/d3.js"></script>
<script src="bower_components/c3/c3.js"></script>
<script src="bower_components/angular-circular-navigation/angular-circular-navigation.js"></script>
<script src="bower_components/angular-chart/angular-chart.js"></script>
<!-- endbower -->
<!-- endbuild -->
Any assistance would be greatly appreciate. Thank you!
The idea is that when you are running it for development you want to use the non minified js so that if there are any issues you can read the source easily. To run for development you would just use:
grunt serve
Then when you are ready to deploy it you can just run:
grunt
This will produce a minified combined scripts/vendor.js. The ful build solution will be in the dist folder.
when i used the directive,the pop-up doesnot show up.
my imports are
<link rel="stylesheet" href="../bower_components/jquery-ui/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="../bower_components/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
<script type="text/javascript" src="../bower_components/angular-ui-date/src/date.js"></script>
html code is
<body ng-app="appStore1">
<label>Select Date:<input type="text" ui-date ng-model="aDate"></label>
<div>{{aDate}}</div>
</body>
and javascript code is
var app=angular.module('appStore1',['ui.date']);
Make sure that you have included required references and able to reach to links.
Also code posted is not very much clear.
Follow syntax as mentioned on the ui-date site and try to start with example quoted there.