I'm currently trying to get the preview functionality from the Eclipse Web Page Editor with AngularJS up and running. Unfortunately nothing happens (see attached image) when I try to run the provided code.
It seems to run here.
The code runs in every web browser - so the question is why is it not working in the "Preview Tab" of the Eclipse Web Page Editor? Any ideas?
My Setup:
Eclipse Mars.1 Release (4.5.1) for Web Developers
AngularJS Eclipse 1.1
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
enter image description here
Related
I have a node.js application running Express and express handlebars as the templating framework. I have recently started learning Angular and integrating it in my node.js app.
The only issue is, the markup for express-handlebars and angular is same. Both framework use {{}}. I did some research and found this Stackoverflow question: Using Express Handlebars and Angular JS
The accepted answer suggests changing the markup symbols using the interpolateProvider. I implemented this and it does not work for me (I have commented under that answer).
My code looks like this:
main.handlebars
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GETTING STARTED WITH Angular</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="/css/style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});
app.controller('DemoController', function() {
this.label = "This binding is brought you by // interpolation symbols.";
});
</script>
</head>
<body>
{{{body}}}
<input ng-model="name">
<h3>Hi, //name// how are you doing</h3>
<div ng-controller="DemoController as demo">
//demo.label//
</div>
</body>
</html>
The above code is from the main.handlebars layout file. I even tried to put that code in the actual view but it did not work. What am I missing?
Thanks.
This issue is occurring because of an incorrect app name reference or a simple typo. Change ng-app="myapp" to ng-app="myApp".
I've been developing a chrome extension and am using AngularJS. I am using angular to create a list that updates every time a user puts in new information and clicks the link.
<!doctype html>
<html ng-app="Ladybug">
<head>
<script type="text/javascript">
var application = angular.module('Ladybug', []);
function URLController($scope){
$scope.newSite=""
$scope.sites=['www.facebook.com'];
$scope.addSite=function(){
$scope.sites.push($scope.newSite);
}
}
</script>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"</script>
<div ng-controller="URLController">
Enter A URL : <input type="text" ng-model="newSite">
<button ng-click="addSite()">Add</button>
<hr/>
List of Blacklisted Sites :
<ul><li ng-repeat="site in sites">{{site}}</li></ul>
</div>
</body>
</html>
When I run the code online on http://www.w3schools.com/angular/tryit.asp?filename=try_ng_default the code works perfectly fine but when I upload the code to the chrome extension developer and run the extension it does not display the list or update. The extension loads just fine and the buttons work it just doesn't update. Does anyone know why it works online but not uploaded? Any help will be greatly appreciated
I am trying to learn angular material and found below link:
http://www.tutorialspoint.com/angular_material/angular_material_environment.htm
I followed CDN based installation and copied the below code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('firstApplication', ['ngMaterial']);
</script>
<meta charset="ISO-8859-1">
<title>Camera streaming area Demo</title>
</head>
<body>
<md-toolbar class="md-warn">
<div class="md-toolbar-tools">
<h2 class="md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content flex layout-padding>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
</md-content>
</body>
</html>
into my eclipse angular project, but there is no css effect found when I ran this app. Eclipse showing warning on every md tag
Unknown tag (md-toolbar).
am I missing something??
That should be fine, md-toolbar and md-content are not part of the HTML element specification. The validation in eclipse does not take into account custom directives defined in Angular.
I assume the example is running as expected?
I have written my first Angular JS but it is not loading in the browser. When I run the file, I get a blank screen. However when I do away with the script tag, the page renders.
<!doctype html>
<html lang="en" ng-app>
enter code here<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="lib/angular/angular.min.js></script>
</head>
<body>
<input type="text" ng-model="name">
<h2>Welcome {{name}}</h2>
</body>
</html>
You need to run it on a server to render angular content in browser. Otherwise, as you have faced, a blank page is displayed. Try using node.js for the same.
I'm trying to do the AngularJS tutorial here for v1.2.12, and what I'm getting on my localhost is much different from the live demo they have on the tutorial itself.
Mainly, just starting with the first couple steps, it is not reading my expressions. They are just there in plain text, like they're cut and paste out of the code.
For instance in step 0, my local host is giving me
Nothing here {{'yet' + '!'}}
while the live demo on the site gives
Nothing here yet!
The same seems to happen for other steps. For some reason step #1 works just like it does on the webpage.
What's up with this? Did I forget to install some part of Angular? Or what? Is the tutorial just messed up?
Here's an example of the code that still does it wrong:
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I used git checkout -f step-5 for this one, and instead of giving me a long list of phones like it does in the demo, I just see {{phone.name}} and {{phone.snippet}} when I run index.html on a local server.
Answered!
The NPM install was not allowing bower to do the proper installs.
This was fixed by installing Bower globally, and executing "bower install" from the command line while in the proper directory that the tutorial is saved in.
Probably You are missing something. All basic angular tutorials works. Unfortunately without code its impossible to give a real reason. We can only guess that:
You are not including properly angularjs.js files, and angular cant bootstrap Your code.
You are trying to run Your html locally straight via browser by opening html file, not by serving it by any server instance (like apache or nodejs).
Such solution will not work whrn including scripts because of some safety restrictions. Use a server, or instead linking script file from disk, try using CDN angular links.
3 . Your angular code is wrong.
this is a demo hope this will help you
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Nothing here {{'yet' + '!'}}
</body>
</html>
i think you forget to add "angular js" or ng-app directive