I'm building a web app using visual studio 2015 and angular 4.x
I have followed this tutorial
But i keep getting the error
Unexpected token <
my main .ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
wwwroot structure
_Layout.cshtml looks like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<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/systemjs/dist/system.src.js"></script>
<script src="/systemjs.config.js"></script>
<script>
System.import('wwwroot').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
systemjs.config.js
(function (global) {
System.config({
map: {
'rxjs': 'node_modules/rxjs',
'#angular': 'node_modules/#angular',
'app': './app',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api'
},
packages: {
'app': {
main: 'main.js',
defaultExtension: 'js'
},
'#angular/platform-browser': {
main: 'bundles/platform-browser.umd.js'
},
'#angular/core': {
main: 'bundles/core.umd.js'
},
'#angular/http': {
main: 'bundles/http.umd.js'
},
'#angular/compiler': {
main: 'bundles/compiler.umd.js'
},
'#angular/compiler-cli': {
main: 'index.js'
},
'#angular/router': {
main: 'bundles/router.umd.js'
},
'#angular/upgrade': {
main: 'bundles/upgrade.umd.js'
},
'#angular/forms': {
main: 'bundles/forms.umd.js'
},
'#angular/common': {
main: 'bundles/common.umd.js',
defaultExtension: 'js'
},
'#angular/platform-browser-dynamic': {
main: 'bundles/platform-browser-dynamic.umd.js'
},
'#angular/platform-server': {
main: 'bundles/platform-server.umd.js'
},
'rxjs': {
defaultExtension: 'js'
},
'angular2-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
index.html
<app-root></app-root>
I'm not able to go any further.
Can anybody guide me?
Thanks!
Related
Sorry for this question, but I really cant't understand.
Svg and styles not loaded in projects. Svg in Network console loaded on this adress: http://localhost:9000/%7B'./images/Browser.svg'%7D
I see extra character..
My webpack conf:
{
mode: 'development',
entry: __dirname + '/IE/index.js',
output: {
filename: '[name].js',
path: path.resolve(__dirname, './dist'),
},
target: ['web', 'es5'],
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './IE/ieMock.html'),
}),
],
module: {
rules: [
{ test: /\.html$/i, loader: 'html-loader' },
{
test: /\.s?css$/i,
use: ['style-loader', 'css-loader'],
},
{ test: /\.svg$/, loader: 'svg-inline-loader' },
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'#babel/preset-env',
{
// targets: {
// ie: '11',
// },
},
],
],
},
},
},
],
},
};
ieMock.html:
<!doctype html>
<html xmlns="http://www.w3.org/1999/html" lang="en">
<head>
<title>Предупреждение</title>
<meta charset="utf-8">
<link rel="stylesheet" href="IE/index.css">
<link href="./src/assets/styles/normalize.css" rel="stylesheet">
<link href="./src/assets/styles/font-awesome.css" rel="stylesheet">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<main>
<div className="ie-support-container">
<div className="ie-support-container__el">
<p>
Переходите на ЯндексБраузер.
</p>
</div>
<div className="ie-support-container__el">
<div className="browser_label">
<img src={'./images/Browser.svg'} />
<span>Браузер</span>
</div>
<div className="browser_label">
<img src={'./images/YandexBrowser.svg'} />
<span>Яндекс Браузер</span>
</div>
</div>
</div>
</main>
</body>
</html>
index.js
import './ieMock.html';
import './index.css';
What am I doing wrong? Why svg loaded with extra character?
I have tried different settings, but nothing seems to work, I need to repeat events on calendar, like all Sundays, Tuesdays. Here is my code:
$('#appointment_calendar').fullCalendar({
header: {
left: 'prev',
center: 'today',
right: 'next'
},
events: [{
title:"My repeating event",
start: '10:00',
end: '14:00',
dow: [ 1, 4 ]
}],
});
Have tried removing/adding tittle, start, end, ranges, nothing seems to works.
In version 4 and above you have to use "daysOfWeek" instead of "dow".
Also you should use "startTime" and "endTime" instead of "start" and "end".
So your code should be change to :
$('#appointment_calendar').fullCalendar({
header: {
left: 'prev',
center: 'today',
right: 'next'
},
events: [{
title:"My repeating event",
startTime: '10:00',
endTime: '14:00',
daysOfWeek: [ 1, 4 ]
}],
});
I have done some testing and it appears that FullCalendar fails with dow above version 3.4.0.
The following code is identical but for the FullCalendar version.
FullCalendar 3.4.0 (OK)
<!doctype html>
<html class="no-js" lang="en">
<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js'></script>
</head>
<body>
<main>
<div class="inner">
<div class="full">
<h1>Events Calendar</h1>
<div id="calendar">
</div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
timezone: 'local',
firstDay: 1,
timeFormat: 'H:mm',
events: [{
title: 'All Day Event',
start: "2018-04-25T09:00:00",
dow: [3,4,5]
}]
});
});
</script>
</div>
</div>
</main>
</body>
</html>
FullCalendar 3.5.0 (FAIL)
<!doctype html>
<html class="no-js" lang="en">
<head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.5.0/fullcalendar.min.js'></script>
</head>
<body>
<main>
<h1>Events Calendar</h1>
<div id="calendar">
</div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
timezone: 'local',
firstDay: 1,
timeFormat: 'H:mm',
events: [{
title: 'All Day Event',
start: "2018-04-04T09:00:00",
dow: [3,4,5]
}]
});
});
</script>
</main>
</body>
</html>
jsFiddle with FullCalendar v3.4 (working)
jsFiddle with FullCalendar v3.5 (failing)
I have a Kendo UI scheduler widget with a custom event template. In the template I add a css class to the event template if a certain condition is met. What I want to do is to change the border of the event. I have already tried by using the css selector .k-event:has(div.custom-event.high) but with no success. In the below fiddle there is an example of what I'm trying to achieve. The task are colored using the lightgray color, the tasks on which I need to change the border color are highlighted in yellow. As you can see I can correctly select div.k-event and div.custom-event.high but not .k-event:has(div.custom-event.high). Can someone help me?
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
eventTemplate: $('#template').html(),
height: 600,
views: [{
type: "week",
selected: true
}],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "http://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: {
from: "MeetingID",
type: "number"
},
title: {
from: "Title",
defaultValue: "No title",
validation: {
required: true
}
},
start: {
type: "date",
from: "Start"
},
end: {
type: "date",
from: "End"
},
startTimezone: {
from: "StartTimezone"
},
endTimezone: {
from: "EndTimezone"
},
description: {
from: "Description"
},
recurrenceId: {
from: "RecurrenceID"
},
recurrenceRule: {
from: "RecurrenceRule"
},
recurrenceException: {
from: "RecurrenceException"
},
roomId: {
from: "RoomID",
nullable: true
},
attendees: {
from: "Attendees",
nullable: true
},
isAllDay: {
type: "boolean",
from: "IsAllDay"
}
}
}
}
},
group: {
resources: ["Attendees"],
orientation: "horizontal"
},
resources: [{
field: "attendees",
name: "Attendees",
dataSource: [{
text: "Alex",
value: 1,
color: "#f8a398"
}, {
text: "Bob",
value: 2,
color: "#51a0ed"
}, {
text: "Charlie",
value: 3,
color: "#56ca85"
}],
multiple: true,
title: "Attendees"
}]
});
});
div.k-event {
background-color: lightgray !important;
}
.k-event:has(div.custom-event.high) {
background-color: red !important;
}
div.custom-event.high {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.mobile.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script id="template" type="text/x-kendo-template">
<div class="custom-event #if(title.indexOf('Eval') > -1) {# high #}#">
<p>
#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
</p>
<h3>#: title #</h3>
</div>
</script>
</body>
</html>
In general, the eventTemplate controls only the content of the event element. If you would like to change the background of the whole event, then you will need to:
expand the width and height of the inner element custom-event
set the custom class directly to the .k-event element in the dataBound event of the widget
For the former approach check the following how-to demo:
http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/event-custom-background-color
For the latter implementation check this one:
http://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/modify-event-styling-on-databound
Question
In the below example, how do I bind the obj.name variable of the <input> field in <test-element2> to <test-element> ?
Background:
Below is my code. I have two polymer elements. test-element has the data binded to obj.name. test-element2 has an input field which is observed by the function objChanged. Whatever value I change in the input field it changes and prints in test-element2 but the change isn't reflected in test-element. Can any body help get the value reflected to test-element1? I have a solution using this.fire("object-change") for when the text changes but I am looking for a solution without using event listeners.
One more thing is that I need to create an element from the script and it cannot be hardcoded in the HTML DOM.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../bower_components/polymer/polymer.html"/>
</head>
<body>
<dom-module id="test-element">
<template>
<div>Hello <span>{{obj.name}}</span></div>
</template>
<script>
TestElement = Polymer({
is: "test-element",
properties: {
"obj": {
type: Object,
notify: true
}
},
observers: [
"objChanged(obj.name)"
],
"objChanged": function() {
var that = this;
console.log("First element in 1",that.obj);
}
});
</script>
</dom-module>
<dom-module id="test-element2">
<template>
<input value="{{obj.name::input}}"/>
</template>
<script>
Polymer({
is: "test-element2",
properties: {
"obj": {
type: Object,
notify: true,
value: {
"name": "Charlie"
}
}
},
observers: [
"objChanged(obj.name)"
],
ready: function() {
var element = new TestElement();
element.set("obj", this.obj);
this.appendChild(element);
},
"objChanged": function() {
console.log("changed in test-element2:", this.obj);
}
});
</script>
</dom-module>
<test-element2></test-element2>
</body>
</html>
If you include <test-element> in the <template> of test-element2 you can avoid using event listeners or observers. In this way test-element2 handles the data binding between the input and <test-element> for you.
Below is a live working example that maintains the obj property as you have set it up in your elements.
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="test-element">
<template>
<div>Hello <span>[[obj.name]]</span>
</div>
</template>
<script>
TestElement = Polymer({
is: "test-element",
properties: {
"obj": {
type: Object,
notify: true
}
}
});
</script>
</dom-module>
<dom-module id="test-element2">
<template>
<input value="{{obj.name::input}}" />
<test-element obj="[[obj]]"></test-element>
</template>
<script>
Polymer({
is: "test-element2",
properties: {
"obj": {
type: Object,
notify: true,
value: {
"name": "Charlie"
}
}
}
});
</script>
</dom-module>
<test-element2></test-element2>
Currently, imperative data-binding is not supported in Polymer 1.0 outside of <template is="dom-bind">.
Polymer 1.0 Node.bind() - Can I create a binding via javascript instead of double braces?
Binding imperatively
[1.0] Data-binding: Is there any way to do this imperatively?
I would recommend setting up observers like the example below or adjusting your requirements to include <test-element> in test-element2.
button {
display: block;
}
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="test-element">
<template>
<div>Hello <span>[[obj.name]]</span>
</div>
</template>
<script>
TestElement = Polymer({
is: "test-element",
properties: {
obj: {
type: Object,
notify: true
}
}
});
</script>
</dom-module>
<dom-module id="test-element2">
<template>
<input value="{{obj.name::input}}" />
</template>
<script>
Polymer({
is: "test-element2",
properties: {
obj: {
type: Object,
notify: true,
value: {
"name": "Charlie"
}
}
},
observers: ["objNameChanged(obj.name)"],
objNameChanged: function(newValue) {
Polymer.dom(document).querySelectorAll("test-element").forEach(function(element) {
element.notifyPath("obj.name", newValue);
});
Polymer.dom(this.root).querySelectorAll("test-element").forEach(function(element) {
element.notifyPath("obj.name", newValue);
});
}
});
</script>
</dom-module>
<test-element2></test-element2>
<button>Add test-element to <em>test-element2</em>
</button>
<button>Add test-element to <em>body</em>
</button>
<script>
var testElement2 = document.querySelector("test-element2");
var createTestElement = function(insertPoint) {
var testElement = new TestElement();
testElement.notifyPath("obj.name", testElement2.obj.name);
insertPoint.appendChild(testElement);
};
document.querySelector("button:nth-of-type(2)").addEventListener("click", function() {
createTestElement(Polymer.dom(document).querySelector("body"));
});
document.querySelector("button").addEventListener("click", function() {
createTestElement(Polymer.dom(testElement2.root));
});
</script>
If you choose to break out your elements into their own files, you could follow this Plunker example (by nazerke) demonstrating two-way data binding by having one component observing another's property.
Code
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="parent-element.html">
<link rel="import" href="first-child.html">
<link rel="import" href="second-child.html"> </head>
<body>
<parent-element></parent-element>
</body>
</html>
parent-element.html
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="parent-element">
<template>
<first-child prop={{value}}></first-child>
<second-child feat1={{prop}}></second-child> In parent-element
<h1>{{value}}</h1> </template>
<script>
Polymer({
is: "parent-element",
properties: {
value: {
type: String
}
},
valueChanged: function() {
console.log("value changed");
}
});
</script>
</dom-module>
first-child.html
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="first-child">
<template>
<p>first element.</p>
<h2>{{prop}}</h2> </template>
<script>
Polymer({
is: "first-child",
properties: {
prop: {
type: String,
notify: true
}
},
ready: function() {
this.prop = "property";
}
});
</script>
</dom-module>
second-child.html
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<dom-module id="second-child">
<template>
<p>Second element.</p>
<h2>{{feat1}}</h2> </template>
<script>
Polymer({
is: "second-child",
properties: {
feat1: {
type: String,
notify: true,
value: "initial value"
}
},
ready: function() {
this.addEventListener("feat1-changed", this.myAct);
},
myAct: function() {
console.log("feat1-changed ", this.feat1);
}
});
</script>
</dom-module>
If you choose to break out your elements into their own files, you could use <iron-meta> to two-way data bind as described here:
Example Code:
<iron-meta key="info" value="foo/bar"></iron-meta>
...
meta.byKey('info').getAttribute('value').
or
document.createElement('iron-meta').byKey('info').getAttribute('value');
or
<template>
...
<iron-meta id="meta"></iron-meta>
...
this.$.meta.byKey('info').getAttribute('value');
....
</template>
If you choose to break out your elements into their own files, you could use <iron-localstorage> to two-way data bind as described here.
Example Code:
<dom-module id="ls-sample">
<iron-localstorage name="my-app-storage"
value="{{cartoon}}"
on-iron-localstorage-load-empty="initializeDefaultCartoon"
></iron-localstorage>
</dom-module>
<script>
Polymer({
is: 'ls-sample',
properties: {
cartoon: {
type: Object
}
},
// initializes default if nothing has been stored
initializeDefaultCartoon: function() {
this.cartoon = {
name: "Mickey",
hasEars: true
}
},
// use path set api to propagate changes to localstorage
makeModifications: function() {
this.set('cartoon.name', "Minions");
this.set('cartoon.hasEars', false);
}
});
</script>
<dom-module id="test-element">
<template>
<div>Hello <span>{{name}}</span></div>
</template>
<script>
Polymer({
is: "test-element",
properties: {
name: String
}
});
</script>
</dom-module>
<dom-module id="test-element2">
<template>
<input value="{{name::input}}"/>
<test-element name="[[name]]"></test-element>
</template>
<script>
Polymer({
is: "test-element2",
properties: {
name: String
}
});
</script>
</dom-module>
Is it possible to use dojo (grid in particular) with MVC-2? Any example/ideas on how we can use it?
I did not see difference between MVC2 and other types of applications...
You should read about dojo grid
First of all you need to load dojo script (it would be better if you do it on master page).
Also you can add some css styles that dojo grid using:
Site.Master:
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djconfig="parseOnLoad: true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table
{
margin: 0;
}
</style>
...
</head>
....
</html>
After that you should add some code in view for initialize dojo grid, E.g.:
Index.aspx:
...
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
var layoutCountries = [
[{
field: "abbr",
name: "Abbeviation",
width: 10
},
{
field: "name",
name: "Name",
width: 10
},
{
field: "capital",
name: "Capital",
width: 'auto'
}]];
var storeData = {
identifier: 'abbr',
label: 'name',
items: [{
abbr: 'ec',
name: 'Ecuador',
capital: 'Quito'
},
{
abbr: 'eg',
name: 'Egypt',
capital: 'Cairo'
},
{
abbr: 'sv',
name: 'El Salvador',
capital: 'San Salvador'
},
{
abbr: 'gq',
name: 'Equatorial Guinea',
capital: 'Malabo'
},
{
abbr: 'er',
name: 'Eritrea',
capital: 'Asmara'
},
{
abbr: 'ee',
name: 'Estonia',
capital: 'Tallinn'
},
{
abbr: 'et',
name: 'Ethiopia',
capital: 'Addis Ababa'
}]
}
</script>
<div style="width: 400px; height: 300px;">
<div dojotype="dojo.data.ItemFileReadStore" jsid="countryStoreForGrid" data="storeData">
</div>
<div id="grid" dojotype="dojox.grid.DataGrid" store="countryStoreForGrid" structure="layoutCountries"
queryoptions="{deep:true}" query="{}" rowsperpage="40">
</div>
</div>
...
And the result of this code is: