I've split up my stylesheets into a separate module for each include, I want to dynamically load these but am having some dificulity, when rendered I only get the following for each sheet that should be loaded:
<link ng-repeat="inlude in includes" rel="stylesheet" href="" class="ng-scope">
Here is my HTML:
<!DOCTYPE html>
<html ng-app="forum" ng-controller="masterCtrl">
<head>
<title>Forum</title>
<link rel="stylesheet" href="/stylesheets/reset.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<link ng-repeat="inlude in includes" rel="stylesheet" href="{{include.stylesheet}}">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular-resource.min.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers.js"></script>
<!--[if lt IE 9]>
<script src="/scripts/html5shiv.js"></script>
<![endif]-->
</head>
<body ng-view>
</body>
</html>
And here is my primary controller:
function masterCtrl($scope){
$scope.includes = {
header: {
src: 'views/includes/header.html',
stylesheet: 'stylesheets/header.css',
searchQuery: ''
},
threadList: {
src: 'views/includes/threadList.html',
stylesheet: 'stylesheets/threadList.css'
}
};
}
Everything else works fine, thanks for looking.
On top of changing your href to ng-href, revise your link like below, because you're not setting a source for the stylesheets.
<link ng-repeat="include in includes" rel="stylesheet" ng-href="include.stylesheet" class="ng-scope">
P.S. It wasn't working because you had a typo with include — inlude in includes.
Replace your href attributes with ng-href attributes. That approach won't be great for the speed of your page, though.
You can also check out AngularCSS
This Angular module allows you to reference stylesheets in your components (directives) and pages (routes).
If you are using directives
myApp.directive('miyDirective', function () {
return {
restrict: 'E',
templateUrl: 'my-directive/my-directive.html',
css: 'my-directive/my-directive.css'
}
});
If you are using ngRoute
$routeProvider
.when('/my-page', {
templateUrl: 'my-page/my-page.html',
controller: 'pageCtrl',
css: 'my-page/my-page.css'
});
You can also use it as a service ($css)
myApp.controller('pageCtrl', function ($scope, $css) {
// Binds stylesheet(s) to scope create/destroy events (recommended over add/remove)
$css.bind({
href: 'my-page/my-page.css'
}, $scope);
// Simply add stylesheet(s)
$css.add('my-page/my-page.css');
// Simply remove stylesheet(s)
$css.remove(['my-page/my-page.css','my-page/my-page2.css']);
// Remove all stylesheets
$css.removeAll();
});
Related
i'm new in react.js, i used CDN links to compile some simple react.js code into my html, but i get this error:
"Uncaught SyntaxError: Unexpected token <"
then i searched and i saw somebody said that i should add:
type="text/babel" or type="text/jsx"
to my script tag, i did, but after that, my html didn't know my .js file!
this is my html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="fa">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title> title </title>
</head>
<body>
<div id="app"> </div>
<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>
<script type="text/babel" src="myreact.js"> </script>
</body>
</html>
and this is my react.js file:
'use strict';
class MyComponent extends React.Component{
render()
{
return "hello";
}
}
ReactDOM.render(
<MyComponent/> , document.getElementById('app')
);
please help me to code in react.js.
If you are using CDN, first two you need are to render React into a DOM and the third one (babel) enables JSX and ES6. I have reordered the imports, have included cdn for babel after importing react and react-dom.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script type="text/babel">
'use strict'
class Application extends React.Component {
render() {
return(
<div>React App</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('app'));
</script>
</body>
</html>
Is there any reason why bootstrap slider is not being recognised as a function even though the correct dependencies are there?
The jquery ui files downloaded that are present in the web app folder are customised to not contain slider widget conflict functions.
<!doctype html>
<html lang="en">
<head>
<script src="bootstrap-slider.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap-slider.css">
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery-ui.js"></script>
<title>Bootstrap Slider</title>
<style>
</style>
<script>
$("#ex1").bootstrapSlider({
formatter: function(value) {
return "Current value: " + value;
}
});
</script>
</head>
<body>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14" />
</body>
</html>
Please provide a jsfiddle or a screenshot of your console. If you say that you got all the dependencies (as I think your code is correct), I'm guessing you may have a problem with your paths.
I am trying to test angular v1.6.2 components and ui-router together but can't get it to work. Here is my
html:
<!DOCTYPE html>
<html lang="en" ng-app="rrrwamac">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <test></test> -->
<ui-view></ui-view>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="index.js"></script>
<script src="test.js"></script>
</body>
</html>
component:
angular.module('rrrwamac').component('test', {
template: '<h3>Its the UI-Router<br>testing..!</h3>'
})
and config:
var app = angular.module('rrrwamac', ['ui.router']);
app.config(function($stateProvider) {
$stateProvider
.state('test', {
url: '',
component: 'test'
});
});
NOTE: When I place component tag
<test></test>
everything works, but when I try using ui-router and ui-view it doesn't.
I am also using live-server that places an extra script into my html and connects to http://127.0.0.1:8080/.
Any help greatly appreciated. Thanx.
Here is the code that should render a "raised" paper-button:
All the code is in a script tag and renders a paper-button that is not RAISED (see screen shot). I can click and see the RIPPLE effect, seems perfect except the appearance.
UPDATE :
for the moment the only way to get the correct rendering is by replacing
<paper-button raised>test</paper-button>
BY
<div dangerouslySetInnerHTML={{__html: '<paper-button raised>test</paper-button>'}} />
ANY WORKAROUND avoiding this 'dangerous' way?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<title>Hello React</title>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
</head>
<body>
<div id="content">
</div>
<script type="text/jsx">
var ButtonT = React.createClass({
render: function() {
return (
<div>
<paper-button raised="true">test</paper-button>
</div>
);
}
});
React.render(
<ButtonT />,
document.getElementById('content')
);
</script>
</body>
</html>
Should the "raised" attribute be passed as a this.props...?
It won't work in the current version of React. Custom attribute support is an open issue, though. For now, I've found this patch works well.
In JSX if you want a custom HTML attribute, you should prefix it with data-, it then will be resolved to actual name without prefix. See docs;
Here my code:
<!DOCTYPE html>
<html>
<head>
<script src="/client/polymer-0.5.2/bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link href="/client/polymer-0.5.2/bower_components/polymer/polymer.html" rel="import">
<link href="/client/polymer-0.5.2/bower_components/core-ajax/core-ajax.html" rel="import">
</head>
<body>
<core-ajax id="directorInfoAjax" url="/main.ashx?action=directorInfo" handleAs="text" on-core-response="callback">
<script>
Polymer(
{
callback: function ()
{
var bp = this.response;
}
});
</script>
</core-ajax>
<script>
document.addEventListener('polymer-ready', function()
{
document.querySelector("#directorInfoAjax").go();
});
</script>
</body>
</html>
What wrong? Call back not fire.
111111111111111111111111111111111111
222222222222222222222222222222222222
333333333333333333333333333333333333
As far as I know, you aren't using <core-ajax> as it should be used.
Here you have a working example for <core-ajax>:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>seed-element Demo</title>
<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="https://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="https://www.polymer-project.org/components/core-elements/core-elements.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-elements/paper-elements.html">
</head>
<body>
<core-ajax id="directorInfoAjax" url="http://echo.jsontest.com/key/value" handleAs="text" on-core-response="{{callback}}"></core-ajax>
<script>
document.addEventListener('polymer-ready', function() {
var ajax = document.querySelector("core-ajax");
ajax.addEventListener("core-response", function(e) {
alert("I received a response "+ this.response);
console.log(this.response);
}
);
ajax.go(); // Call its API methods.
});
</script>
</body>
</html>
In your code, the Polyymer declaration inside the component doesn't seem to work, and even if it worked, the callback function need to be wrapped in {{ }}.
A Plunker here: http://plnkr.co/edit/rOuNPu99D7ROX4ewbLnK?p=preview
I hope it helps, but if not, don't hesitate to ask for further information!
[EDIT] I wrote a simpler example
Check the below tutorial it might help you to figure out the issue:-
http://www.tutorialsavvy.com/2014/07/understanding-polymer-core-ajax-element.html