I tried to get ngMeteor (v0.1.7) working. The JS code runs without errors, however the data binding in the HTML code does not work. This is the code:
JS
if(Meteor.isClient) {
ngMeteor.controller('MainCtrl', ['$scope', function($scope) {
$scope.foo = 'bar';
}]);
}
HTML
<head>
<title>My Title</title>
</head>
<body>
<div ng-controller='MainCtrl'>
[[foo]]
</div>
</body>
This is what i get: [[foo]]
However, I should get: bar
Thoughts?
Related
I created an empty MVC5 web application and trying to display a message in the view which is returned from the external javascript file.
#{
ViewBag.Title = "Index";
Layout = null;
}
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script src="~/Scripts/myscript.js"></script>
<title>My AngularJS Page</title>
</head>
<body>
<div ng-controller="myController">
{{ message }}
</div>
<div></div>
</body>
</html>
I have created my angularjs code in external js file and referenced it in my view.
var myApp = angular.module('myModule', []);
var myController = function($scope)
{
$scope.message = "Hello from AngularJS";
}
myApp.controller("myController", myController);
Instead of displaying "Hello from AngularJS" its just displaying {{ message }} , any clue on what i am missing here ?
ng-app="myApp" is wrong. your module name is myModule. then you should replace it to ng-app="myModule".
I know this question has been asked a bunch of times before, I read through the answers, tried the offered solutions, but I'm still getting the error and I'm not sure why. I stripped my application down to a simple hello world to try and figure out why its happening.
<!--index.html -->
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script type="text/javascript"
src="./controller/MainController.ctrl.js"></script>
</head>
<body >
<div ng-controller="HelloController">
<test-dir/>
</div>
</body>
</html>
//controller/MainController.ctrl.js
var app = angular.module('app',[]);
app.controller("HelloController", function($scope) {
});
app.directive('testDir', function (){
return {
restrict:'E',
replace:true,
template:`template/helloWorld.template.html`
};
});
<!--template/helloWorld.template.html -->
<div>
<h1>hello, is it me you're looking for</h1>
</div>
if you are providing the link to the template file you should use templateUrl not template.
If you want to use template you have to write
"template":"<div>...</div>"
Change from template to templateUrl
`template:`template/helloWorld.template.html`
to
templateUrl :template/helloWorld.template.html
I am new to angularjs and have written a small program but facing the error "scope.detailsForm" as undefined. Could someone help me what is the issue with the below code.
b.js file:
var app = angular.module('my-app', []);
app.controller("my-cont", function($scope) {
$scope.detailsForm.clickme.$setValidity("error1",true);
});
b.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="b.js"></script>
</head>
<body ng-app="my-app" ng-controller="my-cont">
<form method="get" name="detailsForm" ng-model="detailsForm">
<button name='clickme' ng-disabled="detailsForm.clickme.$error.error1">Click Me!</button>
</form>
</body>
</html>
Your problem is that you can not get it when the controller is not built, you need to wait for the html to be processed by Angular. Here's an example.
As you'll see in the console, the first log will echo undefined, and the second will echo the form.
var app = angular.module('MyApp', []);
app.controller("MyCont", ['$scope', function($scope) {
console.log($scope.detailsForm);
$scope.onClicked = function()
{
console.log($scope.detailsForm);
}
}]);
I downloaded the seed project from git. Basically, changed the code in following three files -
app.js
angular.module('app', []);
index.html
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-controller="MessageController">
<div class="container">
<h1>{{title}}</h1>
</div>
</body>
</html>
MessageController.js
angular.module('app').controller("MessageController",function(){
alert("inside message controller");
var vm = this;
vm.title = 'AngularJS Tutorial Example';
});
When I run http://localhost:8000/app/index.html, it displays {{title}} and not the value inside controller.
I am new bie in angular and trying to learn but unable to figure out whats wrong here.
You appear to have two different things happening.
First you appear to have missed adding your javascript dependencies to your html file.
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="MessageController.js"></script>
</head>
An additional note
Because you are using multiple files (which is fine), make sure you include the app.js file before the MyController.js file.
You also need to correctly access the scope. Even if you add the javascript dependencies you will get a blank page if not bound correctly.
Because you are using var vm = this; format you need to be sure to use the control as annotation
<body ng-controller="MessageController as myctrl">
<div class="container">
<h1>{{myctrl.title}}</h1>
</div>
</body>
Working Plunker Example
Another options is to directly extend $scope in your controller. You could then just have {{title}} on your page and it should bind correctly.
angular.module('app').controller("MessageController",['$scope',function($scope){
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
}]);
var yourapp = angular.module('app', []);
yourapp .controller('MessageController', function ($scope) {
alert("inside message controller");
$scope.title = 'AngularJS Tutorial Example';
});
I'm beginning to work with AngularJS and am having trouble working with a local copy of the angular.js file. Below is the sample I am trying to get to work. When I reference the CDN script, the page correctly displays 'Hello, World'. When I reference the local script, the binding does not occur. The browser is able to locate the local angular.js file, it just doesn't seem to perform the binding.
<html ng-app>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<!--<script src="Scripts/angular.js"></script>-->
<script>
function HelloController($scope) {
$scope.greeting = { text: "Hello" };
}
</script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
If I was starting out with 1.3.15 would do something like this:
<html ng-app="main.app">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script>
angular.module('main.app', [])
.controller('HelloController', function () {
var self = this;
this.greeting = { text: "Hello" };
})
</script>
</head>
<body ng-controller="HelloController as HelloCtrl">
<p>{{HelloCtrl.greeting.text}}, World</p>
</body>
</html>
This follows the latest styles of angular coding