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".
Related
I created a basic AngularJS app and it's not displaying the values on the live site declared on the controller.
The live site displays the expressions written on the controller file instead.
ie. - It displays:
{{ title }}
{{ paragraph }}
Instead of:
First Angular Title
First Angular Paragraph
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular Application</title>
<script src="js/shared/angular.min.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="MainController">
<h1> {{ title }} </h1>
<p> {{ paragraph }}<p>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
MainController.js
app.controller("MainController", ['$scope', function($scope) {
$scope.title = "First Angular Title";
$scope.paragraph = "First Angular Paragraph";
}]);
app.js
var app = angular.module("mainApp", []);
I don't know what I'm doing wrong. I'm completely new to this. I appreciate any help. Thanks for your time.
I have included the angular from cdn and updated the inline script the same working. please verify included files are loading properly.
<!DOCTYPE html>
<html>
<head>
<title>Angular Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="MainController">
<h1> {{ title }} </h1>
<p> {{ paragraph }}<p>
</div>
<!-- Modules -->
<script type="text/javascript">
var app = angular.module("mainApp", []);
app.controller("MainController", ['$scope', function($scope) {
$scope.title = "First Angular Title";
$scope.paragraph = "First Angular Paragraph";
}]);
</script>
</body>
</html>
</body>
</html>
<html>
<head>
<title>
</title>
<script src="../../angular.min.js"></script>
<script type="text/javascript">
myApp = angular.module('myApp', []);
myApp.controller("empController", function($scope){
$scope.ename = {nm : "Harry"};
$scope.changeName = function(){$scope.ename.nm = "Ron";};
});
myApp.directive("empDirective", function(){
return {
scope : {employeeName : "=myEmpName", nameChange : "&click"},
template : 'Employee Name is {{employeeName.nm}}. <button ng-click="nameChange()">Change Name</button>'
};
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="empController">
<div emp-directive myEmpName="ename" click="changeName()" > </div>
{{ename.nm}}
</div>
</body>
When I am running the above code I am not getting the employeeName.nm value inside directive. Not sure what I am missing. I am new in AngularJS
In your template, change
myEmpName
to
my-emp-name
Angular requires hyphen separated attributes in templates and converts them to camel case itself via a process called normalisation.
For some reason when I use ng-repeat the $scope variable does not bind its data to the view. It's been driving me insane because I figure out what i'm doing wrong in this case. In the when I console.log the $scope variable, its there but it just refuses to bind to the view when i'm using ng-repeat. In this case the word "movie" in the paragraph tag is repeated 3x but there's not data to go with it. Here is the code below:
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
After long sleepless nights lol I figured out the answer. Apparently the problem was with my node js express server using mustache as a middleware to template html. It uses the {{ }} symbols as well so angular never got to interpret what was going on. So I used $interpolateProvider to change the angular symbols and now it works beautifully.
var myApp = angular.module('myApp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
To anyone else using a node.js backend and not using jade as a template language, I hope this helps!
It would be better to explicitly define the controller inside the module:
var myApp = angular.module("myApp", []);
myApp.controller('IndexCtrl', function($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
});
But.... I copied the code exactly, replaced angular resource path. And all is working.
<html ng-app="myApp" ng-controller="IndexCtrl">
<head>
<base href="/">
<title>Page Title</title>
</head>
<body>
<div>Hello World!
<div ng-repeat="movie in movies">
<p>movie: {{movie.moviename}}</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
function IndexCtrl($scope) {
$scope.movies = [
{'moviename':'ironman'},
{'moviename':'antman'},
{'moviename':'man'}
];
console.log($scope.movies);
};
</script>
</body>
</html>
In my angular.js project I have the folowing:
{{ myString }}
Now when the value ofmyString is "#", The html output is as follows:
[Object][object]
How can I get round this?
I created the following example and the "#" is being displayed in the view. I can't duplicate the issue that you described. Can you provide more details?
Here's the code I used to display the "#".
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="angular.js"></script>
</head>
<body ng-controller="myCtrl">
Hello
{{myString}}
</body>
</html>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope){
myScope = $scope;
$scope.myString = "#";
});
</script>
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?