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>
Related
I am trying to add more than one ng-app in a application ,how to register the both ng-app and let me know what is the use of using more than one ng-app?
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead. AngularJS applications cannot be nested within each other.
var app1 = angular.module('app1', []);
app1.controller('Ctrl1', function ($scope)
{
$scope.name = "Angular";
});
var app2 = angular.module('app2', []);
app2.controller('Ctrl2', function ($scope)
{
$scope.name = "Developer";
});
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById('app2'), ['app2']);
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="app1">
<div ng-controller="Ctrl1">
<span>{{name}}</span>
</div>
</div>
<div id="app2">
<div ng-controller="Ctrl2">
<span>{{name}}</span>
</div>
</div>
</body>
</html>
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>
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
I am displaying a string that has HTML code in it:
<div style="font-size: 14px" ng-bind="currentBook.description"></div>
put it displays the HTML code instead of interpreting the elements:
When I use ng-bind and ng-bind-unsafe, it shows nothing.
How can I get the HTML to be parsed?
Addendum
I added a reference to sanitize but ng-bind and ng-bind-unsafe still show nothing:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
Ok, I added the ngSanitize var app = angular.module('app', ['ngSanitize']); and now it works.
It looks like you missed ngSanitize please see demo below
You can find more here
https://docs.angularjs.org/api/ngSanitize/service/$sanitize
var app = angular.module('app', ['ngSanitize']);
app.controller('firstCtrl', function($scope, $sce) {
$scope.currentBook = {
description: "<p>some description</p>"
};
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
<div style="font-size: 14px" ng-bind-html="currentBook.description"></div>
</div>
</body>
call apply
$scope.$apply(function () {
$scope.currentBook.description = $sce.trustAsHtml(html);
});
I am trying to follow along on the eggheads angularJS tutorials. I have the same code however mine is not working...
Here is the code I am using:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<link rel="stylesheet" href="../foundation/css/foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me with a foundation component.
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</body>
</html>
main.js:
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
The problem is angular version.
Your version is 1.3.4 instead of 1.2.3.
App with angular 1.2.3 (egghead) : plunkr
App with angular 1.3.4 :plunker
Hi you've missed couple thing
Declaration of you app :
var app = angular.module('app', []);
Declaration of your controller
app.controller('FirstCtrl', FirstCtrl);
In your html
ng-app="app"
var app = angular.module('app', []);
app.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="FirstCtrl">
<h1>{{data.message + " world"}}</h1>
<div class="{{data.message}}">
Wrap me with a foundation component.
</div>
</div>
</body>