Would pure angular and css/html work in a local machine?
In my case, I'm not getting any errors, but at the same time the messages won't show any output. Any idea why?
Some of the code:
<head>
<link rel="stylesheet" type="text/css" href="/C:somethinghere\style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="/C:somethinghere\app.js"></script>
</head>
<body class="parent" ng-app="myApp">
{{ messages }}
</div>
app:
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.messages = "hello";
$scope.ratings = [{test: 22},{test: 99}];
}]);
NOTE: the links are correct, i just changed the links to now show my username.
The answer is: Yes, angular works on a local machine.
The problem in your code is that you are not assigning the controller to the view, you are missing the ng-controller="GreetingController" inside your view.
So to fix that, just enclose {{ messages }} inside a div tag with ng-controller attribute.
A solution might look like that:
<body class="parent" ng-app="myApp">
<div ng-controller="GreetingController">
{{ messages }}
</div>
</body>
Also, please notice that in your HTML, you opened a <body> tag but you closed it with </div> tag. You missed the </body> enclosing tag and you missed a <div> opening tag.
Another small tip:
Try to use relative paths instead of absolute paths when you load CSS/JS files.
Just write <link href='styles/style.css'> instead of <link href='c:/.../styles/style.css'>. This path assumes that you have a styles folder in the same folder that your HTML file exists.
Related
I am trying to understand how to remove #! from the url in angularjs using ng-route .
Can please someone help me with the exact steps I need to follow in order to remove #!.
Here is the code
index.html
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="a02.js"></script>
</head>
<body ng-app="testApp">
Hello there
<hr>
Click Me
<div ng-view></div>
</body>
</html>
a02.js
var app = angular.module("testApp", ['ngRoute']);
app.config(["$routeProvider",function($routeProvider){
$routeProvider.when('/test',{
template:"<strong>It's routing template</strong>"
})
}]);
My requirement is when click on click me link it should display
It's routing template.
But when browser loads index.html the url is coming as
http://localhost:3000/index.html#!/
and when I click on Click Me link the url is coming as
http://localhost:3000/index.html#!/#test
I want this url and link to be work without #!.
in your js router file you need to add:
$locationProvider.hashPrefix('');
$locationProvider.html5Mode(true);
and in your index html file (head tag) you need to add:
<base href="/">
I'm new to polymer. Below code is not displaying anything. Just a blank page. I'm running this on the default python server. Any idea why this is happening?
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"/>
<link rel="import" href="bower_components/polymer/polymer.html"/>
</head>
<body>
<hello-element></hello-element>
<dom-module id="hello-element">
<template>Hello World</template>
</dom-module>
<script>
HTMLImports.whenReady( function () {
Polymer({
is: "hello-element"
})
})
</script>
</body>
</html
First of all, your closing html tag is malformed. It should be </html> instead of <html. Perhaps you made a mistake while copying, but you should check just in case.
In addition, your script element should have a closing tag, like so:
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
Furthermore, the link tag should not have this slash / before closing it, like so:
<link rel="import" href="bower_components/polymer/polymer.html">
Try to use HTML tags Properly. In HTML5, so-called void elements (elements that can't have content -> link,meta) don't need the closing, but when comes to tag it must be closing tag. It takes content between takes as javascript code.
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
Try to use above format to get correct output. But avoid creating componments in Main document. Create in other file and import it
I need to create an html file that contains only content within a form tag of another html file, and nothing else. Is there any way to do this?
You can dynamically load html snippets after your main page loads using javascript. Something like this:
main.html
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Form</h1>
<div id="container"></div>
</body>
</html>
form.html
<form>
<input value="testing" />
</form>
script.js
var formUrl = 'form.html';
$(window).on('load', function(){
$.get(formUrl, function(res){
$('#container').append($(res));
})
})
Here is a working plunk
Using webcomponents, it possible to import HTML from other files.
But this isn't widespread nor supported by all major browsers and maybe not what you're looking for.
You should really start by using a programming language like PHP, Ruby, Python or similar.
I'm trying to use an HTML file with CSS throught this code:
<link rel="stylesheet" type="text/css" href="myfile.html" />
I cannot access to the server and make new files so the server provides the option to create HTML files and I wanna use them as CSS hosts. Is this possible?
you can try to include the html containing css in the other html so myCssfile.html is :
<style>
//enter CSS code here
</style>
and then your main html file:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("myCssFile.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
I'm using here the JQuery function .load but it probably can be done with pure JS
If the file contents are valid CSS and the type attribute is set correctly, then the browser will believe you that it's a CSS file and will parse/use it as such.
<html>
<head>
</head>
<body>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.ajax') .click(function(e){
e.preventDefault()
$('#content').load( 'abc.html' );
});
});
</script>
<div id="content">
<p>Here comes some content</p>
</div>
<div>Link</div>
</body>
</html>
In the code, i want to load abc.html content inside with id="content" when link inside is clicked.
This code does not work. Can anyone please help me..
I think your syntax is fine... This is probably a path issue. Remember that using "abc.html" as the path means that you are looking for a file called "abc.html" in the current directory.
For confirmations sake, check that abc.html is not empty, then make sure it is in the same folder as the calling file (or specify the correct path to the file). If that then works, then I suggest reading up on Absolute vs. Relative paths/URLs.