I'm using angular to make page identification before access to the app main,
in the templateUrl: login.html i cant do anything !
note: when I called the ng-app="myApp" will give this error :
Uncaught Error: [$injector:modulerr]
here my code JS:
angular.module('training')
.config(function($routeProvider){
$routeProvider
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.when('/login',{
templateUrl: 'login.html',
controller: 'loginCrtl'
});
})
.controller('loginCrtl',['$scope','$timeout','apiservice','$routeProvider', function($scope,$timeout,apiservice,$routeProvider){
$scope.ppp= function(){
alert('ok');
}
}])
.controller('mainCtrl'......
here my login.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.min.js"></script> -->
<script src="controllers/app.js"></script>
<script src="services/apiService.js"></script>
<script src="controllers/mainCrtl.js"></script>
</head>
<body ng-controller="loginCrtl">
<div class="center" style="width: 500px; height: 300px; background-color: #e5e5e5;">
Veuillez authentifier:<br><br>
Login: <input type="text" id="login"><br><br>
Password: <input type="text" id="pass">
<br><br>
<button id="ValidAccess" ng-click="ppp()">ok</button>
</div>
</body>
<style >
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</html>
my index.html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Planni</title>
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap.min.css">
<link rel="stylesheet" href="mystyle/bootstrap-datepicker.css">
<link rel="stylesheet" href="mystyle/jquery-ui.css">
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="public/bootstrap-datepicker.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/moment/min/moment-with-locales.min.js"></script>
<script src="public/daypilot/daypilot-all.min.js"></script>
<script src="public/bootstrap-tokenfield.js"></script>
<script src="public/bootstrap.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.js"></script> -->
<script src="controllers/app.js"></script>
<script src="services/apiService.js"></script>
<script src="controllers/mainCrtl.js"></script>
</head>
<body data-ng-app="training" data-ng-controller="mainCtrl">
....
</body>
</html>
Where your ng-app ? module of you is training call ng-app ='training' not ng-app='myApp'
Promblem of you is not setting it use like this
angular.module('training',['ngRoute'])
Here is set a module
angular.module('training',[])
and here is get a module
angular.module('training')
EDIT
You use like this
angular.module('training',['ngRoute'])
.controller('mainCtrl',mainCtrl)
.controller('loginCtrl',loginCtrl)
function mainCtrl(){
//
}
function loginCtrl(){
//
}
or if you have another module contain loginctr use like this
angular.module('anothermodule',[])
.controller('loginCtrl',loginCtrl)
function loginCtrl(){
//
}
And in training app include it
angular.module('training',['ngRoute','anothermodule'])
first of all, you need to add the ng-app directive to your html file. my recommendation is to add it inside html tag
<html ng-app="training">
then in the js, when you are initializing the module, need to add empty square brackets to the module
angular.module('training',[])
I assume for the router you are using ngRoute. in that case, you need to inject the route module to your training module
angular.module('training',['ngRoute'])
Related
i have my react code in plain HTML
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<script>
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
but he not work, after run this index.html in Chrome i have only blank white page,
can someone explain me what i am doing wrong?
i use vscode
To make this work, use the development version, not the production version of the react and react-dom files. Also note that you need to specify the type of your script as "text/babel" or babel won't parse it.
Check out the code below:
<html>
<head>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
</head>
</head>
<body>
<script type="text/babel"> /* notice type="text/babel"*/
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
RESULT:
I did react for the first time and it edited your code like that. I guess the two scripts I added are not needed, but just try it. As I understood you have to set an section to place the text. These two links could help too.
Where to place line of code in html for ReactDOM.render?
https://www.w3schools.com/react/react_render.asp
My Code:
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<link rel="stylesheet" href="lib/style.css" />
</head>
<body>
<section id="entry-point"></section>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script type="text/javascript">
var h = React.createElement('p', null, 'Sherlock Holmes');
ReactDOM.render(h, document.getElementById('entry-point'));
</script>
</body>
</html>
Am binding islamic date as date picker to text box , but when writing that inside of ng repeat its not working
my code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="Scripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<table>
<tr ng-repeat="r in rvm">
<td>
<input type="text" id="txtHijriDate" ng-model="r.Date" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope) {
$scope.rvm = [];
$('#txtHijriDate').calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
});
</script>
if i remove `ng-repeat="r in rvm" it is working but i want that date picker in ng repeat
Your code puts 1 (and only 1) calendar on the element with ID txtHijriDate
When you use ng-repeat, you create multiple elements with the same ID
You need to add
$('#txtHijriDate').calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
Code in your JavaScript at every creation of element. And I’ll suggest to map “id” also to have ID dependent on your elements.
Error: Calendar binding code is executing before controls(input box) load inside ng-repeat.
Solution: Use ng-bind directive to bind calendar on controls.
See the working demo below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<table>
<tr ng-repeat="i in [1, 2,3,4,5] track by $index">
<td>
<input type="text" ng-
ng-bind="bindDate('calendar-control'+$index)" id="calendar-control{{$index}}"
model="rvm[1].Date" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope) {
$scope.rvm = [];
$scope.bindDate=function(id){
$('#'+id).calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
}
});
</script>
I am following a tutorial on angular 2, and at some point i had to use bootstrap classes. In the external libraries folder, bootstrap exists but it didn't seem to work. To solve that i imported it in the index.html file, and although it now works, my other css file doesn't. These are the contents of index.html (css files in lines 6-7):
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/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>
also here is the part where i use the bootstrap classes:
template: `
<h1>Hello</h1>
<i class="glyphicon"
[class.glyphicon-star] = "isFull"
[class.glyphicon-star-empty] = "!isFull"
(click)="onClick()">
</i>
`
and finally styles.css:
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}
You may have heard about ViewEncapsulation metadata property of #Component.
You can use it like this for bootstrap to work with your custom style:
#Component({
selector: 'my-app',
encapsulation: ViewEncapsulation.none,
styleUrls: ['styles.css'],
...
...
})
Check out my working demo,
http://plnkr.co/edit/oQYg5EFgaxoWdYyD8yhl?p=preview
I'm trying to create a map inside a bootbox dialog. Here is the code.
bootBox.dialog({ title:"test", message = "<div><google-map latitude='37.77493' longitude='-122.41942'></google-map></div>" });
It creates the dialog, creates the maps box with Google logo at bottom but do not load the map. It remains gray.
I found that if I open or close Chrome Developer Tools after the dialog has displayed the map is rendered.
Any suggestion?
Edit after comments:
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/global/plugins/bootstrap/css/bootstrap.min.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/global/plugins/bootbox/bootbox.min.js"></script>
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<button onclick="ft()">Open Map</button>
<script>
var ft = function(){
bootbox.dialog({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'});
}
</script>
</body>
Set the height of google-map for it to appear:
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({title:'test', message: '<google-map latitude="37.77493" longitude="-122.41942"></google-map>'})
</script>
<head>
<base href="https://polygit.org/polymer+1.5.0/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="google-map/google-map.html">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
</head>
<body>
<style>
google-map {
height: 600px;
}
</style>
<script>
bootbox.alert({
title: 'test',
message: '<div><google-map latitude="37.77493" longitude="-122.41942"></google-map></div>'
})
</script>
</body>
codepen
I am using Colorbox in my project. I have integrated CKEditor in colorbox. Its working fine in all browsers, but a small issue in Google Chrome - Editor will open properly on first click, After closing the pop up and try the editor on second time without loading the page , I can't type text in the editor, Editor will enable on clicking on the source. I am not using the source toolbar in basic editor.
I spent more than 5 days for for finding a solution for this issue and try help from others - No result yet. Expecting better feedback...
Thanks for help in advance.
I have set up a test code for this...
index1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<script src="../ckeditor/_samples/sample.js" type="text/javascript"></script>
<link rel="stylesheet" href="colorbox.css" />
<link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a>
</body>
</html>
index2.html
<textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea>
<script type="text/javascript">
$(document).ready( function() { // I use jquery
var instance = CKEDITOR.instances['ckeditor_replace'];
if(instance)
{
CKEDITOR.remove(instance);
}
//CKEDITOR.config.startupFocus = true;
//CKEDITOR.config.startupShowBorders = false;
//CKEDITOR.config.startupOutlineBlocks = true;
//CKEDITOR.config.startupMode = 'source';
$( '.ckeditor_replace' ).val('12345');
$( '.ckeditor_replace' ).ckeditor(function() { } );
});
</script>
Regards
Nishad Aliyar
I got the solution for the same , just include the jquery and jquery adapter in index2.html. Please see below for example...
index1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script src="colorbox/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<script src="../ckeditor/_samples/sample.js" type="text/javascript"></script>
<link rel="stylesheet" href="colorbox.css" />
<link href="../ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 });
});
</script>
<style type="text/css">
</style>
</head>
<body>
<a class='gallery' href='index2.html' style="font-size: 30px;">click here for editor</a>
</body>
</html>
index2.html
<script type="text/javascript" src="../ckeditor/_samples/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../ckeditor/adapters/jquery.js"></script>
<textarea name="ckeditor_replace" id="ckeditor_replace" class="ckeditor_replace"></textarea>
<script type="text/javascript">
$(document).ready( function() { // I use jquery
var instance = CKEDITOR.instances['ckeditor_replace'];
if(instance)
{
CKEDITOR.remove(instance);
}
//CKEDITOR.config.startupFocus = true;
//CKEDITOR.config.startupShowBorders = false;
//CKEDITOR.config.startupOutlineBlocks = true;
//CKEDITOR.config.startupMode = 'source';
$( '.ckeditor_replace' ).val('12345');
$( '.ckeditor_replace' ).ckeditor(function() { } );
});
</script>
Regards
Nishad Aliyar