I'm having a hard time getting Angular to work inside a Windows Universal App. I'm using Visual Studio 2015.
I'm trying to follow the instructions here: https://github.com/winjs/angular-winjs
In the html head section I have:
<!-- WinJS references -->
<link href="WinJS/css/ui-dark.css" rel="stylesheet" />
<script src="WinJS/js/base.js"></script>
<script src="WinJS/js/ui.js"></script>
<!-- angular -->
<script src="angular-winjs.js"></script>
When I run the app I get an error in the angular-winjs.js file:
var module = angular.module("winjs", []);
The error is that angular isn't defined.
So this could be something simple, but I'm having a hard time figuring out what the problem is.
The instructions say:
You must also add this module to your list of angular module
dependencies:
angular.module('your-module', ['winjs', 'other-module-you-depend-on', 'etc']);
I have no idea what my "list of angular module dependencies" is.. but since I can't even access angular I don't think that's the (main) problem.
You need WinJS libraries (ui.js, base.js and the style ui-light.css / ui-dark.css), AngularJS libraries (angular.js) and finally angular-winjs library (angular-win.js). In your code you are missing Angular library. That's why angularjs is still undefined.
Needed files to get started with angular-winjs:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>
Working sample for you to get started:
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Working sample</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/base.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/js/ui.js"></script>
<script src="https://cdn.rawgit.com/winjs/angular-winjs/master/js/angular-winjs.js"></script></script>
<style>
<!-- You need define yourself the styles for templates -->
.win-listview {
width: 600px;
height: 300px;
border: solid 2px rgba(0, 0, 0, 0.13);
}
.miniTemp {
width: 282px;
height: 70px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}
</style>
</head>
<body>
<div ng-app="workingsample" ng-controller="ratingCtrl">
<!-- listview -->
<div>Selected count: {{selection.length}}, indexes: {{selection.toString()}}</div>
<win-list-view id="mylistview" item-data-source="ratings" selection="selection" items-reorderable="true">
<win-list-view-header>This is a ListView header</win-list-view-header>
<win-item-template>
<div class="miniTemp">
This list view item's rating is: {{item.data.rating}}
</div>
</win-item-template>
<win-list-layout></win-list-layout>
<win-list-view-footer>This is a ListView footer</win-list-view-footer>
</win-list-view>
</div>
<script>
angular.module("workingsample", ['winjs'])
.controller("ratingCtrl", ['$scope', function ($scope) {
$scope.ratings = [
{ "rating": "Too much" },
{ "rating": "Bigger than yours" },
{ "rating": "Too small yep" },
{ "rating": "Why me" },
{ "rating": "Rekt m9" }
];
$scope.selection = [];
}])
</script>
</body>
</html>
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 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.
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.
Im sorry for posting so much about angular tonight but im running into a lot of trouble creating my practice app and it is important I have it running and test created by tomorrow.
I had everything working a few hours ago but now only {{title}} appears on the page and I get the error TypeError: Cannot read property 'labels' of undefined. I am hoping it is just something small that I am missing but I cannot see it at all one thing I might mention is I renamed my service dataSrv from dataRepository other then that I have mostly just been writing tests (or trying too) but I dont think that has anything to do with it.
If anyone can help im getting panicky.
Thanks!
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="ChartApp">
<head>
<title>Chart.js Trial</title>
<script type="text/javascript" src="/Scripts/angular/angular.js"></script>
<script type="text/javascript" src="/Scripts/chartjs/Chart.js"></script>
<script type="text/javascript" src="/Scripts/angular-chart.js-master/dist/angular-chart.js"></script>
<script type="text/javascript" src="/Scripts/controller/main-controller.js"></script>
<script type="text/javascript" src="/Scripts/service/data-service.js"></script>
<script type="text/javascript" src="/Scripts/directive/color-directive.js"></script>
<link href="/Scripts/angular-chart.js-master/examples/bootstrap.css" rel="stylesheet" />
<link href="/Scripts/angular-chart.js-master/dist/angular-chart.css" rel="stylesheet" />
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<div ng-controller="MainCtrl">
<h1 add-color-header>{{title}}</h1>
<canvas id="base" class="chart-base" chart-type="type" data="data" labels="labels" legend="true"></canvas>
</div>
</body>
</html>
data-srv.js
angular.module("ChartApp")
.factory("dataSrv", function () {
return {
labels: ["Reading", "Coding", "Thinking About Coding", "Reddit", "StackOverflow"],
data: [500, 300, 300, 40, 220],
type: "PolarArea",
title: "Angular Chart Expriment"
};
});
main-controller.js
var app = angular.module("ChartApp", ["chart.js"]);
app.controller("MainCtrl", ["$scope",
function ($scope, dataSrv) {
$scope.labels = dataSrv.labels;
$scope.data = dataSrv.data;
$scope.type = dataSrv.type;
$scope.title = dataSrv.title;
}
]);