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(')}');
}
]);
Related
I used two controllers in my angular module, but one is not working, I don't know what is wrong, I've browsed online for solution but I can't get what's wrong.
var app = angular.module('myWebsite', [])
app.controller('firstCtrl', function($scope) {
});
app.controller('secondCtrl', function($scope) {
});
<div ng-app="myWebsite">
<div ng-controller="secondCtrl">
</div>
</div>
The secondCtrl is giving me error in my console. This is the error code it's giving me: angular.js:124 Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.6/$controller/ctrlreg?p0=secondCtrl
I think you are new to angular Js, If you are running an angular app then mind the arrangements of cdn links. What is happening here is application don't know what is angular because it is compiling it before angular js library can be included which has its definition stored in it. So, when compiler don't know what the keyword is , it will throw error of undefine.
As you know Laravel has assets functions in template like as:
{{ asset('images/148630374252566.gif')}}
When I try to use Angular JS varibles in template Laravel it calls error:
{{ currentPlaying.title }}
Error:
Use of undefined constant currentPlaying - assumed 'currentPlaying'
(View: \laravel\resources\views\welcome.blade.php)
how i did it was, in your App.js, just define this;
function($interpolateProvider)
{
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
}
say i have a $scope.abcd in my controller, call it in the blade as such, <%abcd%>. hope this helps! :)
Try changing your angular interpolation symbol in config of angular module.
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
And use that in your template.
Please ref : https://docs.angularjs.org/api/ng/provider/$interpolateProvider
Here is the code from Angular doc,
<script>
var customInterpolationApp = angular.module('customInterpolationApp', []);
customInterpolationApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});
customInterpolationApp.controller('DemoController', function() {
this.label = "This binding is brought you by // interpolation symbols.";
});
</script>
<div ng-controller="DemoController as demo">
//demo.label//
</div>
You have to configure this system, otherwise you can't work with angularjs with laravel.
You can see this: https://scotch.io/tutorials/quick-tip-using-laravel-blade-with-angularjs
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.
I have a scenario where I need to dynamically load an Angular JS application. I have based the code on this:-
https://stackoverflow.com/a/15252490/1545858
Now, I have code that works really well with angular js 1.1.5, but in 1.2.1, no such luck.
Here is the JS code:-
$("#startMeUp").click(function() {
// Make module Foo
angular.module('Foo', []);
// Make controller Ctrl in module Foo
angular.module('Foo').controller('Ctrl', function($scope) {
$scope.data = {};
$scope.data.name = 'KDawg';
$scope.destroy = function() {
$scope.$destroy();
$('#Ctrl').remove();
};
$scope.$on("$destroy", function () {
console.log("EXTERMINATE");
});
});
// Load an element that uses controller Ctrl
$('<div ng-controller="Ctrl" id="Ctrl"> ' +
'<input type="text" ng-model="data.name"></input>' +
'{{data.name}}' +
'<button ng-click="destroy()">Destroy Me</button></div>').appendTo('#container');
// Bootstrap with Foo
angular.bootstrap($('#Foo'), ['Foo']);
});
And here is the HTML:-
<button id="startMeUp">Start Me Up!</button>
<div id="Foo">
<div id="container">
</div>
</div>
Now, if you start and destroy and start again with angular js 1.1.5, everything works fine, but in angular js 1.2.1 it does not work in on the second start. Any thought on how to make it work in 1.2.1?
Here is the js fiddle:-
http://jsfiddle.net/Y9wj2/
As charlietfl says, you don't need to bootstrap more than once. In fact, using angular.js 1.2.1, the error generated that breaks everything is telling you exactly that:
[ng:btstrpd] App Already Bootstrapped with this Element ''
You should think carefully about whether you really need this controller to be dynamic. If you can just use something like ng-include to load the extra content then you will have a much easier time and no need to worry about compiling the content.
If you find you really do need to take this HTML and load it from outside of angular context then you can use the $compile service. Bootstrap the app once somewhere first, preferably using ng-app and grab the injector.
var injector = angular.bootstrap($('#Foo'), ['Foo']);
or
<div id="Foo" ng-app="Foo"></div>
var injector = $('#Foo').injector();
Now you can insert the HTML however you like and then compile and link it using
injector.invoke(['$compile', '$rootScope', function($compile, $rootScope) {
$compile(insertedJqLiteNode)($rootScope);
});
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';
}