I am new to angularJS and trying to get the following simple samples to work. But when I ran it, I got a blank screen instead of "Hello world". Help will be greatly appreciated. Thanks.
angular-comp.js:
angular.module('myApp').component('greetUser', {
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() {
this.user = 'world';
}
});
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="ISO-8859-1">
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>
<script src="js/angularcomp.js"></script>
</head>
<body>
<greet-user></greet-user>
</body>
</html>
Update: I found the problem, the version 1.4.5 doesn't support component. I now use 1.6.1 and it works !!!!
The problem resides here
angular.module('myApp')
where this should be
angular.module('myApp',[])
because you're creating a new module. If you don't pass the second Array argument, AngularJS will try to find your module instead of creating a new one.
try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>AngularJS</title>
</head>
<body ng-app="myApp">
<greet-user></greet-user>
</body>
<script>
angular.module('myApp',[])
.component('greetUser', {
template: 'Hello, {{$ctrl.user}}!',
controller: function GreetUserController() {
this.user = 'world';
}
});
</script>
</html>
Related
When i click on the href the url change but nothing seems to happens.
really i don't know where is the problem.
Here the index html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<meta charset="utf-8">
<title>APP</title>
</head>
<body>
<div>
<p>addRecord</p>
<ng-view></ng-view>
</div>
<script>
var app = angular.module("myApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/show', {
templateUrl: 'views/addRecord.html',
});
});
</script>
</body>
</html>
this is folder structure
enter image description here
You have nowhere mentioned ng-app
<head ng-app="myApp">
DEMO
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 7 years ago.
I am new in angular and can't able to find error in below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Tutorial 2</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script type="text/javascript">
function testController($scope){
$scope.data = {message: "test123"};
}
</script>
</head>
<body>
<div ng-app="">
<div ng-controller="testController">
<!--<input type="text" ng-model="test.sfdc"/>-->
<h1>{{data.message}}</h1>
</div>
</div>
</body>
</html>
The above code print <<data.message>> as output. Please let me know where I go wrong.
You haven't defined your angular module.
For example
var app = angular.module('app', []);
Then in your HTML:
<html ng-app="app">
You need to register the controller in your angular app.
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Tutorial 2</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script type="text/javascript">
var DummyCtrl = function ($scope){
$scope.data = {message: "test123"};
}
angular.module('app', [])
.controller('DummyCtrl', DummyCtrl);
</script>
</head>
<body>
<div ng-app="app">
<div ng-controller="DummyCtrl">
<!--<input type="text" ng-model="test.sfdc"/>-->
<h1>{{data.message}}</h1>
</div>
</div>
</body>
</html>
You need to register your controller with angular.
angluar.module(APP_NAME).controller("testController", testController);
I am trying angularjs for the first time and I am having trouble getting it to actually work..I think.
I am doing the exercises on a website and when I run it on the website it works, but when I try to follow along and write it myself in my own files I can't get it to work.
For example: when I type this "{{store.product.name}}" it prints exactly that including the braces, but on the site it prints out "Azurite"
my code:
index.html
<!DOCTYPE html>
<html ng-app="test">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="app.js"></script>
<script src="angular.min.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
app.js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController', function(){
this.product = gem;
});
})();
Your app name is incorrect.
<html ng-app="gemStore"> </html>
gemStore is the name for your app not test.
when you working with angular app .
You need angularJs script first and others should follow.
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div>
<h3>{{store.product.name}}</h3>
<h3>{{store.product.price}</h3>
</div>
</body>
</html>
let me know if you need any help.
For reference you can see this plunker:
http://plnkr.co/edit/28gANOyhz5mLb7zkhu9W?p=preview
You shuld close the double curly brace
You have
<h3>{{store.product.price}</h3>
Should be
<h3>{{store.product.price}}</h3>
Regards
hello i'm a beginner in angularjs so i try to do a Custom Components project but it's doesn't work please help me.
this is my index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.27/angular-route.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<markdown>
# Hello world
- list item
</markdown>
</body>
</html>
and here is the code of app.js
angular.module('myApp', [])
.directive('markdown', function () {
var converter = new showdown.converter();
return{
restrict: 'E',
link: function (scope,element,attrs){
var htmlText =converter.makeHtml(element.text());
element.html(htmlText)
}
}
})
this is what is displayed in the console
ReferenceError: showdown is not defined
Idon't know why !!!
thank's for your help :)
I got problem with EmberJS I can't understand
The problem could be found in the jsfiddle:
http://jsfiddle.net/wLKKQ/
JS :
var fileUploader = [] || fileUploader;
fileUploader.app = Em.Application.create();
fileUploader.app.userDetailsView = Em.View.create({
clientIP: null
});
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script type="text/x-handlebars">
{{#view fileUploader.app.userDetailsView}}
<h2>Hello Guest, your IP is: {{clientIP}}</h2>
{{/view}}
</script>
<script>
$(function () {
fileUploader.app.userDetailsView.set('clientIP', '::1');
});
</script>
</body>
</html>
I get the following error:
Uncaught Error: assertion failed: Unable to find view at path 'fileUploader.app.userDetailsView'
There are several problems in your code.
Ember.Application should be in an uppercase namespace (see The Emberist blog).
You must pass a view class to the #view helper, not an instance (you consequently have to replace Ember.View.create with Ember.View.extend.
Your script that edit the clientIP does not work, because now FileUploader.app.userDetailsView is a class. You can do the same thing with didInsertElement Ember.View method.
In your template, you have to specify view.clientIP, according to View Context Changes.
Now this JSFiddle work :
FileUploader = [] || fileUploader;
FileUploader.app = Em.Application.create();
FileUploader.app.userDetailsView = Em.View.extend({
clientIP: null,
didInsertElement: function() {
this.set("clientIP", "::1");
}
});
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script type="text/x-handlebars">
{{#view FileUploader.app.userDetailsView}}
<h2>Hello Guest, your IP is: {{view.clientIP}}</h2>
{{/view}}
</script>
</body>
</html>