var myApp = angular.module('myApp',['ui.router'])
myApp.config(function($stateProvider, $urlRouterProvider){
// $urlRouterProvider.otherwise('/home');
$stateprovider
//Home states and nested views
.state('home',{
url: '/home',
templateUrl: 'index.html'
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Modern Business - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="myApp">
<div ng-include='"templates/header.html"'></div>
<div ui-view></div>
<div ng-include='"templates/footer.html"'></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="js/app.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Contact Form JavaScript -->
<!-- Do not edit these files! In order to set the email address and subject line for the contact form go to the bin/contact_me.php file. -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
</body>
</html>
Here is my HTML and app.js I am working with UIRouter. I am getting an error of injector module, but unable to figure it out. I am new to AngularJS, so please help me out. And yes, my ng-include too is not working. No results are displayed when I run my index.html file.
There is a working plunker
The casing is essential. It is $stateProvider not $stateprovider. This must be the state def:
var myApp = angular.module('myApp', ['ui.router'])
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
//$stateprovider
$stateProvider
//Home states and nested views
.state('home', {
url: '/home',
//templateUrl: 'index.html'
template: "<h1>hello from home</h1>",
})
});
Check it here
NOTE: when you develop... do NOT use min versions. Only full can give you nice and easy to understand exceptions...
$stateprovider should be $stateProvider
Related
I made a Pwa with Flutter Web and I set as color on the whole project: # 8C3144. On Index.html I have black-translucent so also the status-bar in ios became # 8C3144, but it continues to remain black. I don't understand what I need to change, I don't think the problem is in the Flutter project
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta name="theme-color" content="#8C3144">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="follow crash">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="crash">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Crash</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-core.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxx",
databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
SOLVED
In the in index.html add this in the head:
<style>
body {
background-color: #79d279;
}
</style>
I used a Loopback/Polymer starter kit I found as a starting base for an application, but it does not seem to work on browsers other than Chrome (i.e. Firefox/IE/Safari). The demo for the starter kit code works in other browsers, so I know it must be possible, but I am having trouble converting my code into the structure that works. I am wondering if anyone would have any insight as to why it does not work with the structure I have in place from my index.html. It doesn't read my <application-polymer> element or native HTML elements (if I add them in) on the other browsers.
I have the webcomponents.js file imported in, and my elements are all inside client/element directory and linked to client/elements/elements.html. It works perfectly in Chrome, but no other browser. Please help!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="Application">
<title>Site</title>
<link rel="shortcut icon" sizes="32x32" href="/images/site-thumbnail.png">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- Place favicon.ico in the `app/` directory -->
<!-- Chrome for Android theme color -->
<meta name="theme-color" content="#fff">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Tile color for Win8 -->
<meta name="msapplication-TileColor" content="#3372DF">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="PSK">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild-->
<!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"</script>
<!-- endbuild -->
<!-- build:js scripts/bundle.js -->
<script src="scripts/bundle.js"></script>
<!-- endbuild -->
<!-- Because this project uses vulcanize this should be your only html import
in this file. All other imports should go in elements.html -->
<link rel="import" href="elements/elements.html">
<!-- <link rel="import" href="elements/application-polymer.html"> -->
<!-- For shared styles, shared-styles.html import in elements.html -->
<style is="custom-style" include="shared-styles"></style>
<style>
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
min-height: 100vh;
background-color: #eee;
}
</style>
</head>
<body unresolved>
<!-- build:remove -->
<span id="browser-sync-binding"></span>
<!-- endbuild -->
<template is="dom-bind" id="app">
<!-- <h1>HELLO</h1> -->
<application-polymer></application-polymer>
</template>
<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<!-- endbuild-->
</body>
</html>
The link to the full starterkit that this application is based off of is here:
https://github.com/klarkc/polymer-loopback-starter-kit
The index.html structure is different (trying to import custom web components from elements/elements.html instead of creating them all inside the index.html which is unrealistic for a sophisticated app), which is why I am having issues.
I'm not sure what you have there, but it doesn't appear to be the latest starter kit, which I believe now follows the PRPL pattern and loads the stuff much later in the startup cycle.
If you look at it, it tries to dynamically decide to load the web components polyfill dependant whether the browser supports web components or not.
<script>
// Setup Polymer options
window.Polymer = {
dom: 'shadow',
lazyRegister: true
};
// Load webcomponentsjs polyfill if browser does not support native Web Components
(function() {
'use strict';
var onload = function() {
// For native Imports, manually fire WebComponentsReady so user code
// can use the same code path for native and polyfill'd imports.
if (!window.HTMLImports) {
document.dispatchEvent(
new CustomEvent('WebComponentsReady', {bubbles: true})
);
}
};
var webComponentsSupported = (
'registerElement' in document
&& 'import' in document.createElement('link')
&& 'content' in document.createElement('template')
);
if (!webComponentsSupported) {
var script = document.createElement('script');
script.async = true;
script.src = 'bower_components/webcomponentsjs/webcomponents-lite.min.js';
script.onload = onload;
document.head.appendChild(script);
} else {
onload();
}
})();
// Load pre-caching Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js');
});
}
</script>
I suspect you are not correctly initializing the polyfills for non chrome browsers
I recommend actually using the polymer-cli from creating a framework as described here
https://www.polymer-project.org/1.0/toolbox/
Can anyone help me to identify the problems I might have?
It seems that I cannot use angular even though I have imported the library. When I refresh HTML this is what shows in the browser. It seems that the controller is not working at all. Also even when I try to do {{1+1}}. It won't do any calculations for me instead just showing "{{1+1}}". This has been bugging me for three days. Really appreciate someone can give me a tip.
This is my HTML file:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<meta charset ="utf-8">
<meta http-equiv="X-UA-Compatible" content= "IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container" ng-Controller="AppCtrl">
<h1>UE Call Home</h1>
<table class ="table">
<thead>
<tr>
<th>HostIP</th>
<th>IMSI</th>
<th>IMEI</th>
<th>Model</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "device in ue">
<td>{{device.hostid}}</td>
<td>{{device.imsi}}</td>
<td>{{device.imei}}</td>
<td>{{device.model}}</td>
</tr>
</tbody>
</table>
</div>
<script type="javascript" src="Controller/controller.js"></script>
<script type="javascript" src="angular.min.js"></script>
</body>
This is my controller:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("Hello World!");
ue1 ={
hostip:"andrew",
imsi:909090,
imei:898989,
model:8994
};
ue2 ={
hostip:"nick",
imsi:787878,
imei:565656,
model:8996
};
ue3 ={
hostip:"dick",
imsi:1212121,
imei:2323232,
model:9650
};
var ue =[person1,person2,person3];
$scope.ue = ue;
}]);
First declare the angular link before your JavaScript link
And also the variables person1, person2, person3 needs to be changed to ue1, ue2, ue3
You have to change the order of <script> declaration as below,
<script type="javascript" src="angular.min.js"></script>
<script type="javascript" src="Controller/controller.js"></script>
Also replace the ng-Controller with ng-controller
In addition to that verify the angular.min.js path, better to put the controller.js and angular.min.js in same folder to avoid path conflict.
I am using angular2 google map.I want to open a Info window on mouseenter and need to close on mouseleave of marker.
http://embed.plnkr.co/YX7W20/
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/es6-shim#0.35.0/es6-shim.min.js"></script>
<script src="https://npmcdn.com/zone.js#0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata#0.1.3"></script>
<script src="https://npmcdn.com/systemjs#0.19.27/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
I guess it should work for you:
const baseAddEventListeners = (<any>SebmGoogleMapMarker.prototype)._addEventListeners;
(<any>SebmGoogleMapMarker.prototype)._addEventListeners = function() {
this._markerManager.createEventObservable('mouseover', this)
.subscribe(() => { this._infoWindow.open(); });
this._markerManager.createEventObservable('mouseout', this)
.subscribe(() => { this._infoWindow.close(); });
baseAddEventListeners.call(this);
}
See also Plunkr
I am attempting to dynamically incorporate an external source of html into a jQuery mobile page. I am able to successfully incorporate the external html but it looks like regular HTML (i.e. not jQuery mobile affected Html). Can any one suggest what I might be doing wrong?
Main Html:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script>
$(document).ready(function () {
$("#main").load('externalHtml.html');
//$("#main").append('externalHtml.html');
//$("#main").load('externalHtml.html #contain');
//$("#main").page();
});
</script>
</head>
<body>
<div data-role="content">
<div id="main"></div>Main Page</div>
</body>
externalHtml.html:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jqueryui.com/ui/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
external html
<div data-role="content" id="contain">
<input type="search" name="name" id="name" value="" />
</div>
</body>
</html>
If you .trigger('create') on the container element, jQuery Mobile will automatically initialize any widget within the container. For example:
$("#main").load('externalHtml.html').trigger('create');
They really should document this better, but if you look at the API events for each type of widget, you will see the documentation regarding the create event.
Also, read the top of this page of the documentation: http://jquerymobile.com/demos/1.1.1/docs/api/events.html
You should not be using document.ready and instead should be binding to the pageinit event for pseudo-pages. Using document.ready will most likely create headaches for you in the future.
-- UPDATE --
You will probably want to call .trigger('create') in a callback so the external HTML has loaded before you attempt to initialize it:
$("#main").load('externalHtml.html', function () {
$(this).trigger('create');
});