I'm brand new at AngularJS, watching a Lynda.com video series on it, "Up and Running with AngularJS with Ray Villalobos." I can't get past this error notice. I'm using WAMP to display an external Ajax file data.json with an $http service.
I don't understand why my content is not displaying on the screen. All that shows onscreen is the CSS border for the div and the "Photo of" alt text. Nothing in the {{}}'s display. ONce I started using the WAMP server, the content stopped appearing - the server is started, though. Here is the error:
"http://localhost/AngularJS/lib/angular/angular.min.js is being assigned a //# sourceMappingURL, but already has one"
GET http://localhost/AngularJS/images/.jpg
Also, there should be a list of only 4 items, but I'm getting a much longer list than that.
My controllers.js:
var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.cars = data;
});
}]);
My html:
<div ng-controller = "MyController">
<ul>
<li ng-repeat="item in cars track by $index">
<div class="section">
<h2>{{item.model}}</h2>
<img ng-src="images/{{item.shortname}}.jpg" width="200px" alt="Photo of {{item.model}}" title="Photo of {{item.model}}">
<h3>{{item.description}}</h3>
<p>{{item.edition + ', ' + item.bodytype}}</p>
</div>
</li>
</ul>
</div>
</div>
My problem was in the data.json file. It began with var myApp =. Once I removed that, it worked.
Related
I'm trying some initial stuff to get used to AngularJS. My current source is SoloLearn. I tried to recreate their app, which adds +1 to a counter when a button is clicked.
I have tried checking the code from their app, and I've also copied and pasted their work onto my HTML file and it still doesn't work, I tried an online tool for ascii diffs and my code should be identical, yet my inspector yields this:
http://errors.angularjs.org/1.6.4/$controller/ctrlreg?p0=clickCounter
at angular.js:38
at angular.js:10839
at ba (angular.js:9931)
at n (angular.js:9701)
at g (angular.js:9055)
at g (angular.js:9058)
at g (angular.js:9058)
at angular.js:8920
at angular.js:1919
at m.$eval (angular.js:18161)
I checked the site and as I understand, my code should still be working, yet it's not.
My code:
<div ng-app="MyApp" ng-controller="myCtrl">
<button ng-click="count=count+1">Click me!</button>
<p> {{count}} </p>
</div>
<script>
var app = angular.module('MyApp',[])
app.controller('myCtrl', function($scope) {
$scope.count=0;
});
</script>
Their code:
<div ng-app="myApp" ng-controller="clickCounter">
<button ng-click="count=count+1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('clickCounter', function($scope) {
$scope.count = 0;
});
</script>
Thanks for the help!
I have added both in different plunker, both are working
http://plnkr.co/edit/Pk8bY3jMiRqwiyWhxEkn?p=preview
http://plnkr.co/edit/aJZTXMQ1dATZI4XUSCmc?p=preview
<div ng-app="myApp" ng-controller="clickCounter">
<button ng-click="count=count+1">Click me!</button>
<p>{{ count }}</p>
var app = angular.module('myApp', []);
app.controller('clickCounter', function($scope) {
$scope.count = 0;
});
As #Lex mentioned, I needed to define the Angular app specifically for the app I was running and not have it all generically crammed in the same place.
The code on the first URL I posted is working now. Basically changing the body tag to this: <body ng-app=""> and naming each div app made everything work as should.
Thank you all for your help.
I have a solution that suddenly stopped showing data
It’s a simple but effective script which does the job without any problems,
My local version in my pc works as expected but in the live version the same code it’s not showing
The $scope.links, which I have the data and use ng-repeat to doesn’t show the code contained in it,
I have even used {{links | json}} to visualize if data is passing through, everything I do works in my local version but in the live version, it doesn’t(it doesn't show error either, just show empty HTML spaces), checking in the network to verify if data is flowing, it does !.
Only the $scope for some reason it’s not showing.
I have tried many things like even upgrade the angular version but the same problems persist,
Any help will be greatly appreciated
var app = angular.module('app', ["angucomplete"]).
controller("navbarController", function($scope, $http) {
$scope.breadcrumbs = [];
$scope.links = [];
$http.get('/api/source').success(function(data) {
$scope.nav = data;
$scope.links = data.sub;
});
});
<body data-ng-app="app">
<section>
<div data-ng-controller="navbarController">
<ul>
<li data-ng-repeat="item in links" class="{{item.link.className}} {{item.link.imageUrl === '' ? 'no-image' : ''}}">
<a href="{{item.link.url}}" ng-click="clickNavigation(item); $event.preventDefault();">
<span>{{item.link.name}}</span>
</a>
</li>
</ul>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
Using:
angularjs 1.5.3
ui-bootstrap 1.3.2
This is my template:
<div id="content" class="center">
<div id="title">
<uib-carousel active="true" interval="5000" ng-if="slides && slides.length">
<uib-slide ng-repeat="slide in slides track by slide.name">
<img ng-src="{{ slide.image }}" />
<div class="carousel-caption">
<p>{{ slide.description }}</p>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
Somewhere in my code I perform a call (with a working service I used many times) like this:
Index.controller('Index.Main', ['$scope', '$sce', 'MyService', function($scope, $sce, myService) {
$scope.slides = [];
myService.loadStuff($scope, ..., function(){
console.log($scope.slides);
}, function(data, status) {
console.log('Could not retrieve stuff');
}).update();
}]);
Which can be detailed as follows:
MyServices calls $http.get behind the scenes.
An array of slides will be shown by console when there is an http success. Right now this is the case.
An error message will be shown by console when there is an http error. Right not it is NOT the case.
Finally, the images are attached correctly to the dom. I can be sure about this because I can inspect it in my browser. however the carousel height (and contents height) is 0.
What am I missing? How can I fix it?
I actually forgot to correctly specify the index property. If there is no index to match against, then there is no way to tell which image is active. When no image is active, the container has height 0
From uibootstrap doc:
As you can see, you need to declare the height of the carousel in the container div
Please see relevant jsFiddle
Within this file even though I included angular.sanitize.js I am not able to bind the html elements.
HTML Code:
<div ng-app="HelloApp">
<div ng-controller="MyCtrl">
<ul ng-repeat="snippet in myHTML" ng-bind-html="snippet"></ul>
</div>
</div>
JS Code:
var app = angular.module('HelloApp', ['ngSanitize'])
app.controller('MyCtrl', function($scope) {
$scope.myHTML = [];
$scope.myHTML.push('<li>Test1</li>');
$scope.myHTML.push('<li>Test2</li>');
});
Nothing is being displayed when running the jsFiddle. When debugging I am getting an injector error.
Please let me know if you need any more relevant information
Make sure ngSanitize is loaded after Angular. Updated working fiddle: http://jsfiddle.net/36qp9ekL/444/
I want a live search: the results are queried from web api and updated as the user types.
The problem is that the list flickers and the "No results" text appears for a fraction of second, even if the list of results stays the same. I guess I need to remove and add items with special code to avoid this, calculating differences between arrays, etc.
Is there a simpler way to avoid this flicker at least, and probably to have possibility to animate the changes?
It looks like this now:
The html part is:
<div class="list-group">
<a ng-repeat="test in tests track by test.id | orderBy: '-id'" ng-href="#/test/{{test.id}}" class="list-group-item">
<h4 class="list-group-item-heading">{{test.name}}</h4>
{{test.description}}
</a>
</div>
<div ng-show="!tests.length" class="panel panel-danger">
<div class="panel-body">
No tests found.
</div>
<div class="panel-footer">Try a different search or clear the text to view new tests.</div>
</div>
And the controller:
testerControllers.controller('TestSearchListCtrl', ['$scope', 'TestSearch',
function($scope, TestSearch) {
$scope.tests = TestSearch.query();
$scope.$watch('search', function() {
$scope.tests = TestSearch.query({'q':$scope.search});
});
}]);
You should use ng-animate module to get the classes you need for smooth animation. For each ng-repeat item that's moved, added, or removed - angular will add specific classes. Then you can style those classes via CSS or JS so they don’t flicker.
An alternative way of doing what you require is to use the angular-ui bootstrap Typeahead component (check at the bottom of the post). It has a type-ahead-wait property in milliseconds and also a template url for customising it.
<div ng-app>
<div ng-controller="MyController">
<input type="search" ng-model="search" placeholder="Search...">
<button ng-click="fun()">search</button>
<ul>
<li ng-repeat="name in names">{{ name }}</li>
</ul>
<p>Tips: Try searching for <code>ann</code> or <code>lol</code>
</p>
</div>
</div>
function MyController($scope, $filter) {
$scope.names = [
'Lolita Dipietro',
'Annice Guernsey',
'Gerri Rall',
'Ginette Pinales',
'Lon Rondon',
'Jennine Marcos',
'Roxann Hooser',
'Brendon Loth',
'Ilda Bogdan',
'Jani Fan',
'Grace Soller',
'Everette Costantino',
'Andy Hume',
'Omar Davie',
'Jerrica Hillery',
'Charline Cogar',
'Melda Diorio',
'Rita Abbott',
'Setsuko Minger',
'Aretha Paige'];
$scope.fun = function () {
console.log($scope.search);
$scope.names = $filter('filter')($scope.names, $scope.search);
};
}