I'm using Angular 2 with materialize-CSS. The issue I'm having is when I shrink the page to where the hamburger appears for the side-nav, after I click the hamburger, the side-nav never pops up and the screen darkens significantly. It never slides out like it should.
My Component is below
import { Component, OnInit, ElementRef } from '#angular/core';
declare var jQuery: any;
#Component({
selector: 'core-app',
template: `
<div class="navbar">
<nav class="indigo">
<div class="nav-wrapper">
{{title}}
<a href="#" data-activates="nav-mobile" class="button-collapse" materialize="sideNav"
[materializeParams]="[{menuWidth: 300,edge: 'left', closeOnClick: true, draggable: true}]"><i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li><a routerLink="/dashboard">Dashboard</a></li>
<li><a routerLink="/fast">Fast Words</a></li>
<li>extra link</li>
<li>Logout</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a routerLink="/dashboard">Dashboard</a></li>
<li><a routerLink="/fast">Fast Words</a></li>
<li><a routerLink="/dashboard">Dashboard</a></li>
<li><a routerLink="/fast">Fast Words</a></li>
</ul>
</div>
</nav>
</div>
<router-outlet></router-outlet>
`
})
export class AppComponent implements OnInit {
title = 'Rapid Words';
constructor(private el:ElementRef){}
ngOnInit() {
jQuery(this.el.nativeElement).find('.button-collapse').sideNav();
}
}
This is my index.html page. I commented out materialize CSS/jQuery, but then I lost all my styles.
<html>
<head>
<title>Language Forge | Review & Rapid Words</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Import Materialize CSS -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- Polyfill(s) for older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<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>
<base href="/">
<core-app>Loading...</core-app>
</body>
</html>
Here is my packageJS file. I believe I have all the correct dependencies:
"dependencies": {
"#angular/common": "~2.1.1",
"#angular/compiler": "~2.1.1",
"#angular/core": "~2.1.1",
"#angular/forms": "~2.1.1",
"#angular/http": "~2.1.1",
"#angular/platform-browser": "~2.1.1",
"#angular/platform-browser-dynamic": "~2.1.1",
"#angular/router": "~3.1.1",
"#angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"angular2-materialize": "^6.1.1",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"jquery": "^2.2.4",
"materialize-css": "^0.97.8",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
},
How can I resolve this so that side-nav slides out like it should?
Related stack overflow question, but does not solve my problem because I'm using angular 2. After adding this style tag to my component, the side-nav shows, but doesn't let me click off of it, and the screen stays dark.
materialize css: Always show side-nav even on mobile?
Code Pen - works okay in Code Pen so it must be related to Angular 2
https://codepen.io/abramjstamper/pen/BQLaQY
Figured out the problem, it was a combination of import issues. Hope this helps someone else experiencing the same issues with Angular2-Materialize.
index.html
<!-- Compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.css"/>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import jQuery before materialize.js -->
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/materialize-css/dist/js/materialize.min.just sayin"></script>
main.ts
import 'angular2-materialize';
system config
map = {
'materialize-css': 'npm:materialize-css',
'angular2-materialize': 'npm:angular2-materialize',
'jquery': 'npm:jquery'
},
packages: {
'materialize-css': {
"format": "global",
"main": "dist/js/materialize",
"defaultExtension": "js"
},
'angular2-materialize': {
"main": "dist/index",
"defaultExtension": "js",
}
}
Related
I'm running a local environment (Live Server) running React.
I've installed the following packages to make sure the correct operation:
react 17.0.2
react-dom 17.0.2
I want to run a custom navbar made by me, but it returns the following error from the browser side.
Uncaught SyntaxError: Unexpected token '<' main.js 18
These are the files I am working with:
main.js
import React from 'react';
import ReactDOM from 'react-dom';
const navbar = () =>
{
<div>
<h1>Computers</h1>
<div>
<ul>
<li>Pricing</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
}
ReactDOM.render(navbar, document.querySelector(".nav"));
package.json
{
"name": "project1_staticpage",
"version": "1.0.0",
"description": "",
"main": "main.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<meta http-equiv='X-UA-Compatible' content='IE=edge'/>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"/>
<meta name='viewport' content='width=device-width, initial-scale=1'/>
</head>
<body>
<div class="nav">
</div>
<script type="module" src='main.js'>
</script>
</body>
</html>
I've search the possible issues about this and I found out the interpreter was expecting json, but it received < or HTML.
And it seems that the solution to this is to make sure that the whole javascript script path is correct, although from my point of view it is.
If it helps this is my directory structure
enter image description here
First of all, the browser doesn't understand JSX syntax, so you need first to transpile main.js to a file that can be understood by the browser. Take a look to this tutorial
Hello I use nodeJS and I want to create an application in which I want to make a post request with a Json object from Postman or curl, my app will fetch Json Object and it will appear the object in broswer.
So, I tried to do that , but I have the problem that the json Object don't appear on broswer
(I use npm hbs, but also I tried it without that).
my nodeJS code is:
app.use(express.json())
app.use(express.urlencoded({extended:true}))
app.use('/notify',(req,res)=>{
const json = req.body
console.log(json)
res.render('index' , {
title: 'Weather App',
name:'ApLaz',
expect: JSON.stringify(json) // I tried and without JSON.stringify
})
})
With Postman request I send for example that
{
"test": "ok",
"var": 12
}
The result from console.log is :
{ ok: 'ok', var: 12 }
But on the broswer I just take this:
{}
This is my website
Why I can't appear my Json Object on broswer?
This is my index file
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{{title}}</title>
</head>
<body>
<!-- Header -->
{{>header}}
<!-- End Header -->
<div>
<p>Use this site for the Weather</p>
<form id="formSearch">
<input placeholder='Location' id="inputSearchValue">
<button>Search</button>
</form>
</div>
<br>
<p id="location">{{expect}}</p>
<p id="forecast"></p>
<!-- Footer -->
{{>footer}}
<!-- End Footer -->
<script src="js/app.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I don't have the info I need to exactly match your setup but here is a close approach. Keep in mind this is not how you would do it in a actually site but will work for learning.
You can think of dataStore as a temporary database that only exist while the app is running. In the index.html I commented out/disabled the following: header, footer, and as you didn't provided and I don't want to create them :D
I suggest you continue along the FreeCodeCamp path as it will cover data storage down the road.
package.json
{
"scripts": {
"start": "node src"
},
"dependencies": {
"express": "^4.17.1",
"mustache": "^4.1.0",
"mustache-express": "^1.3.0"
}
}
src/index.js
const mustacheExpress = require('mustache-express')
const express = require('express')
const app = express()
app.use(express.json())
app.use(express.urlencoded({extended:true}))
app.engine('html', mustacheExpress());
app.set('view engine', 'html');
app.set('views', __dirname + '/views')
let dataStore = {
expect: {user: 'jdoe', age: 30},
}
app.use('/',(req,res)=>{
res.render('index' , {
title: 'Weather App',
name:'ApLaz',
expect: JSON.stringify(dataStore.expect) // I tried and without JSON.stringify
})
})
app.use('/notify',(req,res)=>{
const json = req.body
console.log(json)
dataStore.expect = json
res.render('index' , {
title: 'Weather App',
name:'ApLaz',
expect: JSON.stringify(dataStore.expect)
})
})
app.listen(3000, (err) => {
if (err) return console.log(err)
console.log('server listening on port: %s', 3000);
})
src/view/index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{{title}}</title>
</head>
<body>
<!-- Header -->
<!-- >header}}-->
<!-- End Header -->
<div>
<p>Use this site for the Weather</p>
<form id="formSearch">
<input placeholder='Location' id="inputSearchValue">
<button>Search</button>
</form>
</div>
<br>
<p id="location">{{expect}}</p>
<p id="forecast"></p>
<!-- Footer -->
<!-- >footer}}-->
<!-- End Footer -->
<!--<script src="js/app.js"></script>-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
To start the app open a terminal and run yarn start or npm start
I would like the URL in the address bar to change as I go through my site. Right now, the app folder is in the root folder with { components, controllers, models, public, routes, services, views } folders in the app folder. When I click a link on the app, the URL does not update. I am using a Node backend with non-conflicting API routes. Any help?
package.json dependencies:
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "^3.0.0-alpha.7",
"#angular/router-deprecated": "2.0.0-rc.1",
"#angular/upgrade": "2.0.0-rc.1",
"angular2": "^2.0.0-beta.17",
"angular2-in-memory-web-api": "0.0.11",
"bcrypt-nodejs": "latest",
"body-parser": "~1.0.0",
"bootstrap": "^3.3.6",
"connect-flash": "~0.1.1",
"cookie-parser": "~1.0.0",
"core-js": "^2.4.0",
"ejs": "~0.8.5",
"express": "~4.0.0",
"express-session": "~1.0.0",
"method-override": "~1.0.0",
"mongoose": "~3.8.1",
"morgan": "~1.0.0",
"passport": "~0.1.17",
"passport-facebook": "~1.0.2",
"passport-google-oauth": "~0.1.5",
"passport-local": "~0.1.6",
"passport-twitter": "~1.0.2",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"zone.js": "^0.6.12"
}
index.html:
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Todo List</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<style>
body { padding-top:80px; }
</style>
<!-- 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>
Routes:
import { provideRouter, RouterConfig } from '#angular/router/index';
import { IndexComponent } from "../components/index.component";
import { ProfileComponent } from "../components/profile.component";
import { SignupComponent } from "../components/signup.component";
export const appRoutes: RouterConfig = [
{ path: '', component: IndexComponent },
{ path: 'profile', component: ProfileComponent },
{ path: 'signup', component: SignupComponent }
];
export const APP_ROUTER_PROVIDER = [provideRouter(appRoutes)];
Fixed. I changed everything from 2.0.0-rc.1 to 2.0.0-rc.3 and all is well.
I'm working on a NodeJS project with Express in Webstorm. I'm making a reference to a Javascript file from an EJS(HTML) file.
<script src = "public/javascripts/DivManipulations.js">
</script>
But the file that Chrome retrieves is the same EJS file instead of Javascript. I'm not sure why this is happaning.
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src = "public/javascripts/DivManipulations.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h1").toggle(); //This toggle part works
remoteScriptTest("Hi"); //This remoteSrciptTest does not.
});
});
function testCall(){
window.alert("Hi");
}
</script>
</head>
<body style="padding: 0px; margin: 0px;">
<div id="root"></div>
<div style="background-color: red; width: 100px; height: 60px; overflow: auto;">
<span>Some text comes here</span>
</div>
<h1><%= title %> </h1>
</p> Welcome to <%= title %> </p>
<button>Click here</button>
</body>
</html>
Here's the js file:
/**
* Created by ---- on 11/21/13.
*/
function remoteScriptTest(message){
window.alert(message);
}
Here's the package.json
{
"name": "application-name",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"express": "3.4.4",
"ejs": "*"
}
}
I'm currently developing an overlay for Google Chrome (A toolbar if you prefer), and i have some issues with and i can't understand the reason why.
So, basically i've created an extension with this manifest.json :
{
"background_page" : "background.html",
"browser_action" :
{
"default_icon" : "images/Extension.png"
},
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/overlay.js"],
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
"permissions" : ["tabs", "unlimitedStorage", "http://*/*"],
"name" : "MyOverlay",
"version" : "1.1",
"description" : "Sindar Overlay"
}
The concept is that my background.html page will call the jquery.js and overlay.js. Then on the initialization of overlay.js it will call the html page (overlay.html) by using
<iframe id="YourToolbarFrame" src="'+toolbarURL+'">
The problem is that when i'm trying to start the extension everything seem to be good, no compilation problem but i don't see my overlay. And when i'm just opening the html page all is ok, i see it. So i'm asking myself if the problem dont come from the contentscript or from the permissions but i dont know where it could come from...
Thanks in advance.
Edit 23/02/2011 - 18:46
background.html
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="js/overlay.js"></script>
</head>
</html>
overlay.js
var overlay= {
init: function() {
this.injectoverlay();
//alert('Initialisation reussie');
},
injectoverlay: function() {
var body = $('body'),
overlayURL = chrome.extension.getURL("overlay.html"),
iframe = $('<iframe id="YouroverlayFrame" src="'+overlayURL+'">');
body.append(iframe);
iframe.show();
//alert('Injection reussie');
}
}
var length = {}, maxLength = 0, currentLength;
$(function(){
$('#menu li.title')
.each(function(){
// Save the Menu Length
length[$(this).attr('id')] = currentLength = $(this).height();
// Fix the height
$(this).height(20);
if(currentLength > maxLength)
{
maxLength = currentLength;
}
// To don't overflow on the content
$('#menu').height(maxLength);
})
.mouseenter(function(){
$(this).stop().animate({
height: length[$(this).attr('id')]
}, 500);
})
.mouseleave(function(){
$(this).stop().animate({
height: '20px'
}, 500);
});
});
$(document).ready(function() {
overlay.init();
});
overlay.html
<html>
<head>
<title>overlay</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/overlay.css" type="text/css"></link>
<base target="_blank" />
</head>
<body>
<div class="default">
<form id="searchForm">
<img id="logo" src="images/Extension.png"></img>
<input type="search" value="Enter you research" name="search">
<input type="submit" value="Go !" /> |
</form>
<ul id="menu">
<!--
<li class="title" id="accueil">
<a class="" href="#">Accueil</a>
</li>
-->
<li class="title" id="contact">
<a class="" href="#">Contact</a>
<ul class="dropMenu">
<li>google</li>
<li>yahoo</li>
</ul>
</li>
</ul>
</div>
<!-- Include the library of Google, more centralized.
Optimized the browser cache.
Compressed version. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>
</html>
Currently you include overlay.js as a content script to all pages plus include it into a background page for some reason. You don't need a background page for this task. If you are doing this just to inject jquery the solution would be to download jquery.js and put it into your extension folder, then automatically inject it in the manifest.json:
//"background_page" : "background.html", - this is not needed
"content_scripts":
[ {
"all_frames": true,
"css": ["css/overlay.css"],
"js": ["js/jquery.js", "js/overlay.js"], //jquery included as well
"matches": ["http://*/*"],
"run_at": "document_start"
} ],
(besides a background page doesn't have visible body, so you inject your frame to an invisible page right now)