This is an ng-animate noob question. I looked at the example at angularjs.org and copied the html and css into my project. I added ngAnimate to the dependencies of my app. But it's not working. Upon (un)checking, the correct div is displayed, but no animation.
I tried adding 'ngAnimate' to the dependencies of my Controller, but then I get this error: http://errors.angularjs.org/1.2.11/$injector/unpr?p0=ngAnimateProvider%20%3C-%20ngAnimate
i notice that the example app has ng-app="ngAnimate" in the body tag, I thought adding ngAnimate to my dependencies would do the same.
Can anyone help?
here is the fiddle : enter link description here (unfortunatley angularjs not working)
var app = angular.module('my', [
'ngAnimate',
'my.controllers'
]);
var controllers = app.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
$scope.checked = true;
});
upgrading from angularjs 1.2.11 to 1.3.0-beta7 did the trick.
Related
I have an angular js sample code, that is working nice on my localhost:
<span ng-bind="formData.name"></span>
but the expressions like this:
{{ 5 + 5 }}
or
The name is: {{ formData.name }}
NOT. What is the probleme here? I just copied this from the W3 site:
https://www.w3schools.com/angular/default.asp
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.formData = {"name":"asd", "mail":"mail", "message":"msg"};
...
Is it a probleme when I using JQUERY vs ANGULAR JS in one html file?
I am using Jekyll
Either Angular is not bootstrapped properly or your html is not contained within a tag that has an angular module or controller associated with it. It may be because it's not loading for a variety of reasons such as a typo or invalid path to angular. You may be missing the ng-app="" on your first div. There are far better resources for angular than w3schools.com.
Guys I think I got the solution:
http://alwayscoding.ca/momentos/2013/10/09/angular-and-liquid-expressions-in-jekyll/
app.config([
'$interpolateProvider', function($interpolateProvider) {
return $interpolateProvider.startSymbol('{(').endSymbol(')}');
}
]);
I have this code :
var app = angular.module("malocFeApp",['leaflet-directive']);
app.controller('MainCtrl',[ "$scope", function($scope) { }]);
It prevent the template to show up.
When I remove the requires the template show up:
var app = angular.module("malocFeApp");
app.controller('MainCtrl',[ "$scope", function($scope) { }]);
Why did the requires prevent the module to work correctly?
Ensure you have the angular leaflet.js script referenced in your HTML
Make sure it is referenced after angular.js?
Check your JavaScript console output (F12 in your browser) for errors regarding dependency injection errors
I am working on angular application that is served by node server, and I am trying to include dependency in core.js file. Everything is working well until I add dependency to module. As soon as I add dependency to module, directives stop working for some reason. To be more specific, dependency I am trying to add is btford.socket-io and is installed with bower.
I have tried adding it through brackets as show below, and with app.requires which can also be seen below in comment. Error shown in console is [$injector:modulerr].
Here is my core.js file:
var app = angular.module('test', ['btford.socket-io']);
// app.requires.push('btford.socket-io');
app.controller('testController', function ($scope, $http) {
$scope.test = "This is test.";
$scope.loadData = function() {
$http.get('/data').success(function(data) {
$scope.data = data;
});
};
$scope.loadData();
});
Here is layout.jade:
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
script(src='http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js')
script(src='/socket.io/socket.io.js')
script(src='javascripts/core.js')
body(ng-app="test")
block content
Here is index.jade:
extends layout
block content
div(ng-controller="testController")
p {{test}} Result should be 15 and is: {{5 + 10}}
br
p {{data[0].name}}
Before adding dependencies directives show expected results:
This is test. Result should be 15 and is: 15
MyName
But after adding dependency, they are just displayed as plain text with error [$injector:modulerr]:
{{test}} Result should be 15 and is: {{5 + 10}}
{{data[0].name}}
Does anyone know why is this happening, and how can I make it work?
As stated in the comments adding <script> tag to HTML solved it.
only thing to note is that I had to add app.use(express.static(path.join(__dirname, 'bower_components'))); to app.js to be able to use wanted route
I am new to Angular JS. What I am doing is to bind ui-sref on JQuery loaded data.
All the JQuery plugins and rest of Angular is working perfectly fine. What I have for now looks like:
app.controller("FeedController", ['$scope', '$http', '$compile', function($scope, $http, $compile) {
var feed = this;
feed.years = [];
feed.getYears = function() {
$http.get('/timeline/years').success(function(data) {
feed.years = data;
});
};
feed.getYears();
$scope.$watch('sliderWrapper', function() {
applyTreemap(); // jquery treemap layout plugin
applyKnob(); // jquery knob plugin
});
// I was trying to compile externally loaded DOM by that plugin here.
// Didn't figure out how to do it.
$scope.refresh = function() {
// #slider is main content wrapper
$compile( $("#slider").html())($scope);
};
}]);
Please don't suggest to use AngularJS instead of JQuery. Actually this is a Treemap Layout plugin and already integrated into existing website.
Okay so $compile works as in my code but there are some problems I faced. Here's one. Consider the following code.
<div id="slider">
<div ng-repeat="slide in slides">
<!-- html loaded by jquery ajax will go here -->
</div>
</div>
In angular I was doing
$compile( $("#slider").html())($scope);
So, I was compiling html of #slider in angular and it already has angular bindings besides ajax loaded content. So angular compiler will re-render them and you will run into problems.
So keep in mind that you never $compile html that already has angular bindings.
So I solved my problem by putting
href="#/path/to/state"
instead of doing
ui-sref="home.child()"
into ajax loaded conent.
Sometimes you know something and its not in your mind when you are stuck. :-D
I was following the angular docs and other links in order to create a "component" with angular inside a rails-based project.
The problem is that I can't correctly initialize the app, and instead I got two identical errors
Uncaught Error: No module: testApp0
Uncaught Error: No module: testApp0
In the following jsfiddle I try to show you my point http://jsfiddle.net/d8Lyu/
I'm pretty new in angular and the official documentation isn't very helpful
You are almost here! Just remember angular is modular and every module need to be declared with an angular.module('my_module_name', ['my_modules_dependency']).
Just refactor your code like that :
angular.module( //this is your app module
'testApp0',
['testApp0.controllers'] //your app need your controller as a dependency to works
);
angular.module( //this is your controller module
'testApp0.controllers',
[]
).controller('sliderCtrl', ['$scope', function($scope) {
$scope.greeting = "hellow" //you pass a gretting variable to your template
}
])
An other thing : you declare a gretting variable in your controller but acces it with user.hellow in your template. Just put {{ gretting }}.
One last thing, in the
frameworks and extensions
of fiddle change 'onLoad' to 'in body', you don't want your angular app to be ready before the DOM.
If you plan to use angular, look at : angular-app. The tutorial app can't be trusted for serious angular developement.
Use this jsfiddle as a reference: http://jsfiddle.net/joshdmiller/HB7LU/
You need to add an external resource, change settings in the 'fiddle options' section and the 'frameworks and extensions' section.
Once everything is setup you can create your angular in the javascript pane likeso:
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
}