I suspect it is an incorrectly written expression or the way the controller is fetching data from the service. By the way, the controller has been tested and it works just fine.
Please help.
Here is my view
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<!-- Installing the ngRoute module -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
</head>
<body ng-app="SuggestionBox">
<div class="suggestion" ng-controller="HomeController">
<div class="container" ng-repeat="post in posts">
<h2 class="title">{{ post.title }}</h2>
</div>
</div>
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<!-- Services -->
<script src="js/services/suggestions.js"></script>
</body>
</html>
Here is the service where I am fetching the data from
app.factory('suggestions', [function() {
var demoSuggestions = {
posts: [
{
title: "bla bla bla",
},
{
title: "blo blo blo",
}
]
};
return demoSuggestions;
}]);
This is the controller
app.controller('HomeController', ['$scope', 'suggestions', function($scope, suggestions) {
$scope.posts = suggestions.demoSuggestions;
}]);
In service you should assign posts which has been return in suggestions factory object.
Controller
app.controller('HomeController', ['$scope', 'suggestions',
function($scope, suggestions) {
$scope.posts = suggestions.posts;
}
]);
Demo here
Update
You app.js should define module like below
var app = angular.module('SuggestionBox',[])
Edit
I made last plunkr to demonstrate the issue which were faced by OP. So ideally you should follow angular styleguide made by John Papa
Here you need to wrap each component code to IIFE pattern like
(function(){
//code here
})()
And do define angular module once and used them afterwards, avoid creating global variables.
Related
I'm trying to include google maps in my side-project and i can't seem to know why this doesn't work after watching countless tutorials. One way I was able to do a work around was to include the src script in right below the init function on the html and then on the controller file write the initMap() function outside the
angular.module('breazehomeDesktop').controller(). Can someone please help?
this is my html
!doctype html>
<html>
<head>
<!-- Tab Title -->
<title>Local Scoop</title>
<!-- Javascript Import-->
<script src="../scripts/controllers/localscoop.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY_GOES HERE"></script>
</head>
<body ng-app="breazehomeDesktop" ng-controller="LocalScoopCtrl">
<!-- MAP -->
<div id="map" ng-init="initMap()">
<script>initMap()</script>
</div>
</body>
</html>
and this is my controller
angular.module('breazehomeDesktop').controller('LocalScoopCtrl', function($scope, $rootScope, $location, $localStorage, $routeParams, $anchorScroll, $http, Properties, Amenities, Bilingual,toasts,Users,Crime, Map, BASE_URL, IMAGE_URL, ModalService, History) {
$scope.initMap = function (){
var map = new google.maps.Map(document.getElementById('map'),{
zoom:8,
center: {
latitude:25.7617,
longitude:-80.191790
}
}
)};
});
I do not see anywhere you've mentioned ng-controller and use ng-init to call the method
<body ng-app="breazehomeDesktop" ng-controller="LocalScoopCtrl">
<div id="map" ng-init="initMap()" >
</div>
Why am i getting an injection error?
https://jsfiddle.net/pvaq1ywh/
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Controller">
{{greeting}}
</div>
</div>
JS
var myApp = angular.module('myApp',["firebase"]);
myApp.controller('Controller', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
On the JS pane, click settings, and set the load type to No wrap - in <body>.
It probably wasn't working because the script was executed before your dependencies were loaded.
I'm trying to learn AngularJS and am creating my first page. I am encountering the error:
Error: $injector:nomod Module Unavailable (here)
I have three files:
/index.html
/js/app.js
/js/controllers/MainController.js
And they are as follows:
/index.html
<!doctype html>
<html>
<head>
<tilte>AngularJS Controllers</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<h1>Controllers</h1>
<div ng-controller="MainController">
<p>{{ message }}</p>
<form ng-submit="updateMessage(newMessage)">
<input type="text" ng-model="newMessage">
<button type="submit">Update Message</button>
</form>
</div>
</div>
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/MainController.js"></script>
</body>
</html>
/js/app.js
var app = angular.module("myApp", []);
/js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
Where am I going wrong?
Avoid creating global variables like app for assigning the angular module. Instead angular provides a better syntax to set and get modules across multiple files.
App.js
(function() {
// IIFE (Immediately invoked Function Express) to wrap variables inside the function. it prevents polluting global namespace.
angular.module("myApp", []);
})();
MainController
(function() {
angular.module("myApp") // note [] is missing, it means we're getting a module
.controller('MainController', ['$scope', function($scope){
$scope.message = 'hello';
$scope.updateMessage = function(message){
$scope.message = message;
};
}]);
})();
It is a typo.
When you pull your app.js inside the html, you wrote scr instead of src.
See:
<!-- Modules -->
<script type="text/javascript" scr="js/app.js"></script>
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>
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);
});