The following are my HTML, AngularJS, JSON codes
index.html
<! DOCTYPE HTML>
<html>
<head>
<link type='text/css' rel='stylesheet' href='styles/photostyle.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="app/app.js"></script>
<title>My Photography</title>
</head>
<body ng-app="photoPage">
<div class="container">
<div id="header">
<p id="title">My Photography</p>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div class="photoNo" ng-repeat="photo in photos">
<photo-infos info="photo"></photo-infos>
</div>
</div>
</div>
</div>
</body>
</html>
app.js
var app = angular.module("photoPage", []);
app.controller("MainController", ['$scope', 'photos', function($scope, photos) {
photos.success(function(data) {
$scope.photos=data;
});
}])
.directive('photoInfos', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'photoInfos.html'
};
})
.factory("photos", ["$http", function($http) {
return $http.get('addonFiles/photoInfo.json')
.success( function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
photoInfo.json
[
{
"name": "shot 01",
"date": 20150321075416,
"photoUrl": "photos/01.jpg"
},
{
"name": "shot 02",
"date": 20150527111604,
"photoUrl": "photos/02.jpg"
},
{
"name": "shot 03",
"date": 20150626113654,
"photoUrl": "photos/03.jpg"
}
]
photoInfos.html
<div class="photo-container">
<img class="photo-responsive" ng-src="{{ info.photoUrl }}"/>
<h3>{{ info.name }}</h3>
<p class="photoDate">{{ info.date }}</p>
The files are kept in the correct places as they should be. But my output comes out with just the div in id="header" and not the photos whose information is in JSON file.
why is the data in JSON not showing in the output??
Here is a plunker with a solution:
http://plnkr.co/edit/pJBMtDkSx8gcGqPY4AyS?p=preview
Basically, I added the following template
<li>{{info.name}}</li>
And changed the directive:
.directive('photoInfos', function() {
return {
restrict: 'E',
scope: {
info: '=info'
},
templateUrl: 'photoInfos.html'
};
})
Related
Lately, I've been trying to use images in my webpack project by the HTML file. When I call the image with its actual path it just displays a broken image icon. I have tried using <img src="<%= require() %>"/> as I saw on the internet and also importing them on javascript using import './assets/C.png' but nothing seems to work and just displays that annoying icon. When you go to inspect and look at sources you see the images but you can't actually see the photo:
But actually, the png files called on the CSS stylesheet are bundled correctly:
Can anyone explain to me why this happens or how to fix it? Thanks, if you need more files let me know, here is my code;
webpack.config.js:
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')
const path = require('path')
module.exports = {
entry: path.resolve(__dirname, '../src/script.js'),
output:
{
path: path.resolve(__dirname, "../dist"),
filename: "bundle.[contenthash].js"
},
devtool: 'source-map',
plugins:
[
new CopyWebpackPlugin({
patterns: [
{ from: path.resolve(__dirname, '../static') }
]
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../src/index.html'),
minify: true
}),
new MiniCSSExtractPlugin()
],
module:
{
rules:
[
// HTML
{
test: /\.(html)$/,
use: ['html-loader']
},
// JS
{
test: /\.js$/,
exclude: /node_modules/,
use:
[
'babel-loader'
]
},
// CSS
{
test: /\.css$/,
use:
[
MiniCSSExtractPlugin.loader,
'css-loader'
]
},
// Images
{
test: /\.(jpe?g|png|gif)$/i,
loader: "file-loader"
},
// Fonts
{
test: /\.(ttf|eot|woff|woff2)$/,
use:
[
{
loader: 'file-loader',
options:
{
outputPath: 'assets/fonts/'
}
}
]
}
]
}
}
index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My page</title>
<script defer src="script1.js"></script>
<script src="script2.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./assets/C.png" type="image/x-icon">
</head>
<body>
<div class="headerdiv">
<a class="logo" href="/"><img class="logoimg" src="./assets/CREAT_extended_blue.png"></a>
<nav>
<ul class="nav__links">
<li>Página principal</li>
<li>Vender un producto</li>
<li>Carrito de la compra</li>
<li>Mi cuenta</li>
<li>Información</li>
</a></li>
</ul>
</nav>
<a class="cta" href="#">Contact</a>
<p class="menu cta">Buscar</p>
</div>
<div id="mobile__menu" class="overlay">
<a class="close">×</a>
<div class="overlay__content">
Página principal
Vender un producto
Carrito de la compra
Mi cuenta
Información
</div>
</div>
<script type="text/javascript" src="mobile.js"></script>
</script>
<header data-aos="fade-up" class="cabecera-inicio" id="hero-image">
<canvas class="webgl"></canvas>
<script src="script.js"></script>
</header>
<div class="page-content">
</div>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
<footer>
<div class="textos-destacado" >
</br>
<h1 data-aos='fade-up'>
<b> This is a title </b>
</h1>
</div>
<div class="sponsor">
<img data-aos='fade-left' src="./assets/hoja2.png"/>
<div class="sponsor-producto">
</div>
<img data-aos='fade-right' src="./assets/hoja2.png"/>
</div>
</footer>
</html>
My project distribution:
Well, the files provided with the course had a bug that wasn't fixed yet so with asset-modules I got to fix that bug.
I am trying to combine 2 html file together. Both working fine when using separately. But when i am trying to combine them they are losing formatting.
w3 containers are not showing correctly. It only shows the graph and above graph is non formatted text.
I try to place the scripts at different places but not much with success.
<!DOCTYPE HTML>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<head>
<title>ESXI AD Authentication Report</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
animationEnabled: true,
title: {
text: "Shares of Electricity Generation by Fuel"
},
subtitles: [{
text: "United Kingdom, 2016",
fontSize: 16
}],
data: [{
type: "pie",
indexLabelFontSize: 18,
radius: 80,
indexLabel: "{label} - {y}",
yValueFormatString: "###0.0\"%\"",
click: explodePie,
dataPoints: [
{ y: 42, label: "Gas" },
{ y: 21, label: "Nuclear"},
{ y: 24.5, label: "Renewable" },
{ y: 9, label: "Coal" },
{ y: 3.1, label: "Other Fuels" }
]
}]
});
chart.render();
function explodePie(e) {
for(var i = 0; i < e.dataSeries.dataPoints.length; i++) {
if(i !== e.dataPointIndex)
e.dataSeries.dataPoints[i].exploded = false;
}
}
}
</script>
</head>
<body>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div class="w3-container w3-light-blue">
<h1>ESXI AD Authentication Report</h1>
</div>
<div class="w3-bar w3-light-grey">
<div class="w3-dropdown-hover">
<button class="w3-button">Vcenter Configured</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
b1
b2
</div>
</div>
<div class="w3-bar-item"></div>
<div class="w3-bar-item">Last Updated: #date#</div>
</div>
<div id="chartContainer" style="height: 370px; width: 100%;">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</div>
</body>
</html>
It seems you forgot to use w3's CSS into your HTML, ie you should put this line in <head> tag
<link rel="StyleSheet" href="https://www.w3schools.com/lib/w3.css" type="text/css" />
so your code became below:
<!DOCTYPE HTML>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<head>
<title>ESXI AD Authentication Report</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link rel="StyleSheet" href="https://www.w3schools.com/lib/w3.css" type="text/css" />
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
animationEnabled: true,
title: {
text: "Shares of Electricity Generation by Fuel"
},
subtitles: [{
text: "United Kingdom, 2016",
fontSize: 16
}],
data: [{
type: "pie",
indexLabelFontSize: 18,
radius: 80,
indexLabel: "{label} - {y}",
yValueFormatString: "###0.0\"%\"",
click: explodePie,
dataPoints: [
{ y: 42, label: "Gas" },
{ y: 21, label: "Nuclear" },
{ y: 24.5, label: "Renewable" },
{ y: 9, label: "Coal" },
{ y: 3.1, label: "Other Fuels" }
]
}]
});
chart.render();
function explodePie(e) {
for (var i = 0; i < e.dataSeries.dataPoints.length; i++) {
if (i !== e.dataPointIndex)
e.dataSeries.dataPoints[i].exploded = false;
}
}
}
</script>
</head>
<body>
<div class="w3-container w3-light-blue">
<h1>ESXI AD Authentication Report</h1>
</div>
<div class="w3-bar w3-light-grey">
<div class="w3-dropdown-hover">
<button class="w3-button">Vcenter Configured</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
b1
b2
</div>
</div>
<div class="w3-bar-item"></div>
<div class="w3-bar-item">Last Updated: #date#</div>
</div>
<div id="chartContainer" style="height: 370px; width: 100%;">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</div>
</body>
</html>
Below is a HTML page, Couldn't get content when click on page 1
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider){
$routeProvider.when("/page1", {
template : <h1>Page 1</h1>
})
.when("/page2", {
template: <h1>Page 2</h1>
})
.otherwise({
template: <h1>note found</h1>
})
});
</script>
</body>
</html>
Is there any mistake in above code. Is issue with reference.
Can someone please correct it?
Page 3 will not show anything.
The first mistake you missed around quotes for templates in javascript code:
$routeProvider.when('/page1', {
template : '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1>note found</h1>'
});
And no need to use a exclamation mark in links:
Page 1
Page 2
Page 3
You can use redirectTo() method with otherwise() method. Also, have to put href="#" under <a> tag.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Oranger
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.otherwise({redirectTo:'/'});
});
</script>
<p>Click on the links to navigate to "red.htm", "green.htm", "blue.htm", or back to "main.htm"</p>
</body>
</html>
There are a couple of mistakes: First, in the href, you have used capital P whereas in route definition it's small letter i.e p, 2nd you do not need to use ! in the href i.e it should be like href=#page1 and the 3rd one is template should be as string i.e under single/double quote.
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="JavaScript.js"></script>
</head>
<body ng-app="myapp">
<div class="Container">
<nav class="navbar navbar-default">
<ul class="navbar navbar-nav">
<li>
Page 1
Page 2
Page 3
</li>
</ul>
</nav>
</div>
<div ng-view></div>
<script>
var app = angular.module("myapp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider.when("/page1", {
template: '<h1>Page 1</h1>'
})
.when("/page2", {
template: '<h1>Page 2</h1>'
})
.otherwise({
template: '<h1> note found </h1>'
})
});
</script>
</body>
</html>
I want to make input like that: I am Programer, but if i will type wrong letter it will automatically erase it, or will not allow me to type that letter.
I have tried this kinda code: index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>I AM Programmer</title>
</head>
<body ng-app="myApp">
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>
<!-- <h1>{{myForm.myInput.$valid}}</h1>
-->
</html>
script.js
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
function myValidation(value) {
if (value.indexOf("I am Programmer") > -1) {
mCtrl.$setValidity('charE', true);
} else {
mCtrl.$setValidity('charE', false);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
};
});
style.css
body{
background-color: #fbfbfb;
}
input.ng-invalid {
border:2px solid #EA4335;
}
input.ng-valid {
background-color:lightgreen;
}
input{
width:800px;
height:60px;
text-align: center;
font-size: 30px
}
I think this is what you want
html
<input name="myInput" valid-ng-model="myInput" data-ng-trim="false" required my-directive>
script.js
var app = angular.module('myApp', []);
app.directive('myDirective', function ($parse) {
"use strict";
return {
require: 'ngModel',
restrict: "A",
link: function (scope, element, attr, mCtrl) {
function myValidation(value) {
if ("I am Programmer".toLowerCase().indexOf(value.toLowerCase()) === 0) {
mCtrl.$setValidity('charE', true);
return value;
} else {
mCtrl.$setViewValue(scope.myInput);
mCtrl.$render();
mCtrl.$setValidity('charE', false);
}
}
mCtrl.$parsers.push(myValidation);
}
};
});
app.directive('validNgModel', function ($compile, $parse) {
return {
terminal: true,
priority: 1000,
scope: true,
link: function link(scope, element, attrs) {
var parsedNgModel = $parse(attrs.validNgModel);
scope.$$customNgModel = angular.copy(parsedNgModel(scope));
element.attr('ng-model', '$$customNgModel');
element.removeAttr('valid-ng-model');
var compiledElement = $compile(element)(scope);
var ngModelCtrl = compiledElement.controller('ngModel');
scope.$watch('$$customNgModel', function (newModelValue) {
if (ngModelCtrl.$valid || ngModelCtrl.$error.required) {
parsedNgModel.assign(scope.$parent, newModelValue);
}
});
}
};
});
JSFiddle
You can use $validators. Below is the sample, inline with your example.
angular.module("myApp", [])
.controller('ctrl', function($scope) {})
.directive('myDirective', function() {
return {
require: 'ngModel',
link: function(scope, element, attr, mCtrl) {
mCtrl.$validators.strictCheck = function(modelVal) {
var regex = /^I am Programmer$/;
if (regex.test(modelVal)) {
return true;
} else {
return false;
}
}
}
};
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctrl">
<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
<span ng-if="myForm.myInput.$error.required">
Required!
</span>
<span ng-if="myForm.myInput.$error.strictCheck">
Please input 'I am Programmer'
</span>
</form>
</body>
</html>
You can modify RegExp accordingly, to match your need. You can also set the input value using $setViewValue(modelValue) and $render()
mCtrl.$setViewValue("");
mCtrl.$render();
When I have cellTemplate as the following,
{ field: 'Trial', cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">{{grid.appScope.getAnchorLink(row)}}</div>' }
what I get is <a data-ng-href="localhost:50849/PatientCategory/Edit/1">Edit</a> in the column. But what I want is simply an anchor link with Edit text.
The getAnchorLink function is as follows
$scope.getAnchorLink = function (rowObj) {
var tempId = rowObj.entity.Id.toString();
return '<a data-ng-href="localhost:50849/PatientCategory/Edit/' + tempId + '">Edit</a>'
};
Can someone please correct me where I am wrong?
If you want to show anchor tag in ui-grid below is an example code,
app.js
var app = angular.module('app', ['ui.grid', 'ui.grid.cellNav','ui.grid.pinning']);
app.controller('MainCtrl', ['$scope', '$http', '$log',
function($scope, $http, $log) {
$scope.gridOptions = {
columnDefs: [{
'field': 'code'
}, {
'field': 'name'
}, {
'field': 'status'
},{
'field':'link',
'cellTemplate':'celltemplate.html'
}]
};
$scope.gridOptions.data = [{
"code": "Cox",
"name": "Carney",
"status": 0
}, {
"code": "Lorraine",
"name": "Wise",
"status": 1
}, {
"code": "Nancy",
"name": "Waters",
"status": 2
}];
}
]);
celltempalte.html
<div>
<a href="test.html?code={{row.entity.code}}&name={{row.entity.name}}&status={{row.entity.status}}">
Click me
</a>
</div>
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div ui-grid="gridOptions" ui-grid-cellNav></div>
</div>
<script src="app.js"></script>
</body>
</html>
main.css
.grid {
width: 500px;
height: 400px;
}