I want to make a fresh angular project with angular material. Installed everything with bower install, imported all the necessary files in my index.html. But styles aren't applied.
My index file
<!DOCTYPE html>
<html lang="en" ng-app="yathzee" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Yathzee app</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="assets/libs/bower_components/angular-material/angular-material.min.css">
<link type="text/css" rel="stylesheet" href="assets/libs/bower_components/angular-material/layouts/angular-material.layouts.min.css">
</head>
<body>
<script src="assets/libs/bower_components/angular/angular.min.js"></script>
<script src="assets/libs/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="assets/libs/bower_components/angular-aria/angular-aria.min.js"></script>
<script src="assets/libs/bower_components/angular-material/angular-material.min.js"></script>
<script src="dashboard-environment-configuration.js"></script>
<script src="app.js"></script>
<script src="app/shared/menu.Controller.js"></script>
<div ng-controller="menuController" ng-cloak="" class="navBardemoBasicUsage">
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="vm.currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
<main ng-view></main>
</md-content></div>
</body>
</html>
App.js
'use strict';
// Declare app level module which depends on views, and components
var yathzee = angular.module('yathzee', ['ngMaterial','dashboard-environment-configuration', 'ngAnimate','ngAria']);
yathzee.config(['$mdThemingProvider',
function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('red')
.accentPalette('amber');
}
]);
Related
I wan't to use Framework7 without ReactJS or Vue. I wanna use pure JS. But when I try to show a dialog, I get a console error:
Uncaught TypeError: n is undefined
Thats my JavaScript code
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'ios',
domCache: true
});
var mainView = app.views.create('.view-main');
$('.open-alert').on('click', function () {
window.app.dialog.alert('Oops! Testing alert.');
});
and that is the HTML Part:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#2196f3">
<meta name="viewport" content="width=device-width, initial-rotate=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://v5.framework7.io/packages/core/css/framework7.bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="phone">
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
<div data-name="home" class="page">
<button class="col button button-fill open-alert">Alert</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://v5.framework7.io/packages/core/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I searched for some examples, but nothing are work. Maybee I need to add something more?
I start to learn vuejs and I can't explain this bug. The vuejs mustache syntax doesn't work in this exemple :
the html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>test mustache syntax</h1>
</header>
<section id="user-goal">
<h2>titre</h2>
<p>{{ test }}</p>
</section>
</body>
</html>
the js file
const app = Vue.createApp({
data() {
return {
test: 'bonjour'
};
}
});
app.mount('#user-goal');
Can someone tell me why i get this result?
Hi I am trying to add a start button via jquery to appear when the page loads. However, the button is not loading.
Here is my code:
$(window).on('load', function() {
const startPage = $("<button id='start'>Go</button>");
$('main').append(startPage);
});
<!DOCTYPE html>
<html lang="en">
<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>Quiz</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Objective London Quiz</h1>
</header>
<main class="questions"></main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
I have a React app and I'm using a template for this app. This is my react app's folder structure:
|app
|-client
|---assets
|---component
|-node_modules
|-server
|---index.html
|---index.js
In my server/index.html there are many static files such as css, js and img.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="/assets/img/logo-fav.png">
<title>Loyalty Multipolar</title>
<link rel="stylesheet" type="text/css" href="/assets/lib/perfect-scrollbar/css/perfect-scrollbar.min.css"/>
<link rel="stylesheet" type="text/css" href="/assets/lib/material-design-icons/css/material-design-iconic-font.min.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="/assets/css/style.css" type="text/css"/>
</head>
<body>
<div class="be-wrapper" id="root">
</div>
<script src="bundle.js"></script>
<script src="assets/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/perfect-scrollbar/js/perfect-scrollbar.jquery.min.js" type="text/javascript"></script>
<script src="assets/lib/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/main.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
Plugins.init();
});
</script>
</body>
</html>
How to handle those files in a React app? Meanwhile in a Node JS app we use this to handle static files:
app.use('/assets',express.static(__dirname + '/assets'));
the static file isn't loaded and not found if i type eg:
localhost:3000/assets/js/jquery, the file is not available
and this is my server/index.js file:
import express from 'express';
import path from 'path';
import webpack from 'webpack';
import webpackMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config.dev';
let app = express();
const compiler = webpack(webpackConfig);
app.use(webpackMiddleware(compiler, {
hot: true,
publicPath: webpackConfig.output.publicPath,
noInfo: true,
}));
app.use(webpackHotMiddleware(compiler));
app.use('/assets',express.static(__dirname + '/assets'));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname,'../index.html'));
})
app.listen(3000, () => console.log('Running port 3000'));
Thank you.
You can put static files as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Container Components Example</title>
<link rel="stylesheet" href="/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/dist/css/bootstrap.theme.min.css">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div id="root"></div>
<script src="/js/bundle.js"></script>
</body>
</html>
Source: https://github.com/johibkhan2/react-sample-app/blob/master/index.html
Kotlin versions 1.0.x-1.1.0 support out of the box unit testing with QUnit but when I load tests it throws this exception:
ReferenceError: ok is not defined
at QUnitAsserter.assertTrue_4mavae$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:50:5)
at assertTrue (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:93:27)
at QUnitAsserter.assertTrue_o10pc4$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:47:5)
at QUnitAsserter.Asserter.assertEquals_lzc6tz$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:182:10)
at assertEquals (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:108:20)
at AppTest.myFirstTest (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/app_test.js:17:5)
at Object.<anonymous> (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/app_test.js:29:21)
This is my test class:
import org.junit.Test
import kotlin.test.assertEquals
class AppTest {
#Test fun myFirstTest() {
assertEquals(1, 1, "Test in test folder works")
}
}
This is the html code that loads the test:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fibonacci Counter</title>
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.1.1.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<footer id="info">
<p>Placeholder</p>
</footer>
<span id="text"></span>
<script src="external_libs/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.1.1.js"></script>
<script src="lib/kotlin.js"></script>
<script src="lib/kotlin-test-js.js"></script>
<script src="app_main.js"></script>
<script src="app_test.js"></script>
</body>
</html>
The problem is in the version of QUnit 2.1.1, by using version 1.23.1 the problem is solved.
This is the html code that loads the test with the fix:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fibonacci Counter</title>
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.23.1.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<footer id="info">
<p>Placeholder</p>
</footer>
<span id="text"></span>
<script src="external_libs/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-1.23.1.js"></script>
<script src="lib/kotlin.js"></script>
<script src="lib/kotlin-test-js.js"></script>
<script src="app_main.js"></script>
<script src="app_test.js"></script>
</body>
</html>