I have simple scenario but still, doesn't work..:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="utf-8">
<title>app</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Custom-->
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript" src="/js/lodash.js"></script>
<script type="text/javascript" src="/js/angular.js"></script>
<script type="text/javascript" src="/js/angular-simple-logger.js"></script>
<script type="text/javascript" src="/js/angular-google-maps.js"></script>
<script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>
<script type="text/javascript" src="/js/app/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="/js/app/controllers/MainController.js"></script>
</head>
<body ng-controller="MainController">
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</body>
</html>
app.js
var myapp = angular.module('myapp', ['uiGmapgoogle-maps']);
myapp.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'MY_API_KEY',
// v: '3.28',
libraries: 'weather,geometry,visualization'
});
});
MainController.js
myapp.controller("MainController",function ($scope,uiGmapGoogleMapApi) {
uiGmapGoogleMapApi.then(function (maps) {
$scope.maps = maps;
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 10 };
});
});
style.css
ui-gmap-google-map{
border: 1px dashed darkred;
width: 500px;
height: 300px;
display: inline-block;
}
.angular-google-map-container {
width: 400px;
height: 400px;
}
No errors in the console. The css is applying ok, the promise in the controller is working ok but no map is displayed.
The fact that the DOM is staying like that is bothering me :
<ui-gmap-google-map center="map.center" zoom="map.zoom"></ui-gmap-google-map>
because on the example site I saw that angular is changing it like that :
<ui-gmap-google-map center="map.center" zoom="map.zoom" class="ng-isolate-scope"><div class="angular-google-map"><div class="angular-google-map-container">
</div><div ng-transclude="" style="display: none"></div></div></ui-gmap-google-map>
(or something like that)
Any idea what am I doing wrong ?
Since your map is loading inside a promise, try using ng-if to render it conditionally (as specified here):
<ui-gmap-google-map ng-if='map.center'
center='map.center'
zoom='map.zoom'>
</ui-gmap-google-map>
Working demo here.
I found what is the problem, its because I have also included
<script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>
After removing it, everything starts working normal.
Related
I am working on an Angularjs project and looking to generate dates according to user selected timezone. After lot of research, I found angular-moment.
I tried to add moment.js, moment-timezone.js, angular-moment.js
I added:
angular.module('main', [..., 'moment-picker', 'angularMoment']);
Then I injected moment in my service like this:
angular.module('main').service('UtilityServ', ['moment', 'CONSTANTS', function (moment, CONSTANTS) {
But none of the following lines works:
moment().tz()
moment.tz()
In both cases, it says moment.tz is not a function whereas :
moment().format('YYYY-MM-DD HH:MM')
works fine
Looks like angularMoment is using moment and not moment-timezone
You can just refer the moment-timezone.js as follows,
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone.min.js"></script>
DEMO
angular.module('ExampleApp', []).
controller('MainCtrl', function ($scope) {
console.log(moment.tz().format('YYYY-MM-DD HH:MM'));
});
body {
box-sizing: border-box;
width: 500px;
height: 100vh;
min-height: 100vh;
margin: 0;
padding: 15px;
}
input {
width: 100%;
}
<!DOCTYPE html>
<html ng-app="ExampleApp">
<head>
<title>Datetime range input UI element for AngularJS</title>
<link rel="stylesheet" type="text/css" href="dist/datetime-range.css">
<meta name="viewport" content="width=500,user-scalable=0">
</head>
<body ng-controller="MainCtrl">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone.min.js"></script>
</body>
</html>
I tried adding angular-carousel in my application and I am getting this error
Failed to instantiate module ngMaterial due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=n...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:40:222
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:488
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:488
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355
I got this error only after adding ngMaterial in my application with carousel. I am using latest stable version 1.5.8 of angularjs. This is my code I tried until now,
<!DOCTYPE html>
<html ng-app="DemoApp">
<head>
<meta charset="UTF-8">
<title>angular-carousel demo</title>
<meta name="viewport" content="width=620, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/angular-material.min.css">
<link href='css/angular-carousel.min.css' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="DemoCtrl">
<style type="text/css">
.selected
{
background-color: red;
}
.demo
{
height: 500px;
width: 100%;
}
.carousel5
{
height: 500px !important;
width: 100% !important;
}
</style>
<div class="demo" >
<ul rn-carousel rn-carousel-index="carouselIndex6" rn-carousel-deep-watch rn-carousel-buffered class="carousel5">
<li><div style="height:500px;width:100%;background-color:blue;"></div></li>
<li><div style="height:500px;width:100%;background-color:cyan;"></div></li>
<li><div style="height:500px;width:100%;background-color:grey;"></div></li>
<li><div style="height:500px;width:100%;background-color:yellow;"></div></li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-touch.js"></script>
<script src="js/angular-carousel.min.js"></script>
<script src="js/angular-material.min.js"></script>
<script>
angular.module('DemoApp', [
'ngMaterial','angular-carousel'
]).controller('DemoCtrl', function($scope) {});
</script>
</html>
Am I wrong by someway?. Can someone please help me?
First Include All Dependencies
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
Than include Angular Material JS file
<script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>
Looks like to don't include the ngMaterial js files
The Hope:
I would like to use the Bootstrap Notify addon on my Angular page!
BootStrap Notify: here, and the github location
The Problem:
I can't for the life of me figure out how to get it working! I've tried about 12 (ok, maybe 6) ways of injecting the script, but not a one of them results in anything except errors!
The Code:
index.aspx:
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Bootstrap.Base.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="tc" ContentPlaceHolderID="TitleContent" runat="server">
My awesome page!
</asp:Content>
<asp:Content ID="pc" ContentPlaceHolderID="PageContent" runat="server">
<div id="ng-app" ng-app="myAwesomePage" ng-view growl autoscroll></div>
</asp:Content>
<asp:Content ID="as" ContentPlaceHolderID="AdditionalScripts" runat="server">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-cookies.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-addons/ui-bootstrap-tpls-0.8.0.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-addons/jquery.bootstrap-growl.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-addons/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/scripts/underscore-min.js"></script>
<script type="text/javascript" src="/scripts/moment.min.js"></script>
<script type="text/javascript" src="/scripts/ng-v4/ng-v4.js"></script>
<script type="text/javascript" src="/scripts/myAwesomePage/app.js"></script>
<script type="text/javascript" src="/scripts/myAwesomePage/controllers.js"></script>
<script type="text/javascript" src="/scripts/myAwesomePage/services.js"></script>
</asp:Content>
<asp:Content ID="ac" ContentPlaceHolderID="AdditionalContent" runat="server">
<style type="text/css">
.nav, .pagination, .carousel a {
cursor: pointer;
}
.pagination {
margin: 0 0 0 0 !important;
font-family: Helvetica, FontAwesome;
}
[ng-cloak] {
display: none;
}
label, form {
font-size: 10pt;
font-family: Verdana, Arial, Helvetica, Sans-serif;
}
</style>
</asp:Content>
app.js
"use strict";
angular.module("myAwesomePage", [
"ngRoute",
"ngResource",
"ui.bootstrap",
"v4",
"bootstrapNotify",
"myAwesomePage.controllers",
"myAwesomePage.services"]).
config(function ($routeProvider) {
//Main List
$routeProvider.when("/", {
templateUrl: "/content/myAwesomePage/index.html",
controller: "myAwesomePageCtrl",
controllerAs: "vm"
});
$routeProvider.otherwise({ redirectTo: "/" });
});
The problem I'm running into is with this line:
"bootstrapNotify",
I can't figure out how to inject the directive, and every version of the name that I've tried results in this error:
which leads to this awesome and intimately descriptive page on the AngularJS website.
I've tried "bootstrap-notify", "bootstrapnotify", "bootstrapNotify", "notify", "Notify": all of them have failed and given the same error.
Help me, StackOverflow! You're my only hope!
Per #Claies answer above, it turns out that BootstrapNotify isn't an angular module, and thus would require a massive amount of effort to actually get working with an angular page. Turns out it's more of something for JQuery-driven pages.
I have started an ionic app for work, and one of the features of the cross platform arm is integrating a a Google map api. Currently I choose angular-google-maps
Now I try config it with ionic like this:
seems eveything is ok but why it dosen't work?
<html ng-app="appMaps">
<head>
<meta charset="utf-8">
<title>Map</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="https://raw.github.com/lodash/lodash/3.10.1/lodash.min.js"></script>
<script src="https://raw.github.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
</head>
<body>
<ion-header-bar class="bar-dark" >
<h1 class="title">Google Maps Example</h1>
</ion-header-bar>
<ion-content>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="options"></ui-gmap-google-map>
</div>
</ion-content>
<SCRIPT>
angular.module('appMaps', ['uiGmapgoogle-maps','ionic'])
.controller('mainCtrl', function($scope) {
$scope.map = {center: {latitude: 51.219053, longitude: 4.404418 }, zoom: 14 };
$scope.options = {scrollwheel: false};
});
</SCRIPT>
</body>
</html>
You missed some stuff:
the link to angular-simple-logger.js (angular-google-maps has a dependency)
the CSS height for angular-google-map-container (see http://angular-ui.github.io/angular-google-maps/#!/use bullet number 7)
to convert raw.github.com to rawgit.com when linking directly to JS libraries on GitHub.
Here is the working snippet:
<html ng-app="appMaps">
<head>
<meta charset="utf-8">
<title>Map</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="//rawgit.com/lodash/lodash/3.10.1/lodash.min.js"></script>
<script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
<script src="//rawgit.com/nmccready/angular-simple-logger/master/dist/angular-simple-logger.js"></script>
<script src="//rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script>
<style>
#map_canvas {
width: 100%;
height: 100%;
}
.angular-google-map-container { height: 400px; }
</style>
</head>
<body>
<ion-header-bar class="bar-dark">
<h1 class="title">Google Maps Example</h1>
</ion-header-bar>
<ion-content>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"></ui-gmap-google-map>
</div>
</ion-content>
<SCRIPT>
angular.module('appMaps', ['uiGmapgoogle-maps', 'ionic'])
.controller('mainCtrl', function($scope) {
$scope.map = {
center: {
latitude: 51.219053,
longitude: 4.404418
},
zoom: 14,
options: {
scrollwheel: false
}
};
});
</SCRIPT>
</body>
</html>
I would like to add some animations to my angularjs applications, and surfing on dribble I found this example:
Can someone point me to the right direction for achieving this effect ? Are there some libs doing the work or is it entirely artisanal ?
Notice the 2 animations, the one from the front yellow button expanding to the full area, and the back area sliding/fading away
I am giving you an example, you can change the effects to meet your needs!
var app = angular.module('myApp', ['ngAnimate', 'fmp-card']);
app.controller('MainCtrl', function($scope) {
$scope.leftBackText = 'Here you can insert anything you want, may be a page!';
$scope.rightBackText = "http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69";
});
.my-card{
display: inline-block;
}
.back-text{
padding-top: 60px;
padding-left: 10px;
padding-right: 10px;
}
#container{
width: 100%;
}
#card-1{
float: left;
}
#card-2{
float: left;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Flip Card</title>
<link href="style.css" rel="stylesheet" />
<link href="https://rawgit.com/souly1/angular-flip-card/master/css/fmpCardDirective.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.6/angular.min.js" data-semver="1.3.6"></script>
<script data-require="angular-animate#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular-animate.min.js"></script>
<script src="https://rawgit.com/souly1/angular-flip-card/master/fmpCardDirective.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="container">
<fmp-card class="my-card" id="card-1" suffix="left" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Left Card" small-card-width="200px" small-card-height="200px">
<div class="back-text"><img src={{rightBackText}} /></div>
</fmp-card>
<fmp-card class="my-card" id="card-2" suffix="right" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Right Card" small-card-width="200px" small-card-height="200px">
<div class="back-text">{{leftBackText}}</div>
</fmp-card>
</div>
</body>
</html>