Just started with Angular and trying to make this work.
I would like to display the name in the <p></p>, but it shows {{ name }}.
ASPX:
<html ng-app="myApp">
<head runat="server">
<script src="Assets/Vendor/angularjs-v1.2.28.js"></script>
<script src="App/app.js"></script>
<script src="App/controllers.js"></script>
</head>
<body ng-controller="myCtrl">
<p>{{ name }}</p>
</body>
</html>
app.js:
var app = angular.module('myApp','myCtrl');
controllers.js:
var controller = {};
controller.myCtrl = function ($scope) {
$scope.name = "abcd";
}
EDIT: I have changed the order of loading the script files and updated this query.
This is the error I see in console - Uncaught Error: [$injector:modulerr]
You've not correctly put the order of the scripts. Rather put app.js in front of controller.js. Now you're getting the error: var app is not defined.
[Addition]
Furthermore, you're trying to inject myCtrl which is no object. So changing var controller to var myCtrl would probably work.
Better would be to use something as described here: https://docs.angularjs.org/guide/controller
app.controller('myCtrl', ['$scope', function($scope) {
$scope.name = "abcd";
}]);
Few things here:
1 - myCtrl is not a dependent module. So, you don't need it when defining the myApp module:
angular.module('myApp',[]);
2 - Order of scripts, as described by #Highmastdon.
3 - When defining the controller, you can use the myApp module:
angular.module('myApp').controller('myCtrl', function($scope) {
$scope.name = 'abcd';
});
Related
The Error
Validate Container
The container has the following errors:
Type Location Description
JavaScript compiler error
Keyvendors_whastaap
Error at line 6, character 27: This language feature is only supported
for ECMASCRIPT_2015 mode or better: arrow function.
The Code
<!-- Chat Plugin Code New -->
<script async src='https://d2mpatx37cqexb.cloudfront.net/delightchat-whatsapp-widget/embeds/embed.min.js'></script>
<script>
var wa_btnSetting = {"btnColor":"#2CCD47","ctaText":"Book on Whatsapp","cornerRadius":40,"marginBottom":20,"marginLeft":20,"marginRight":20,"btnPosition":"left","whatsAppNumber":"917678462928","welcomeMessage":"I need to book home service.","zIndex":999999,"btnColorScheme":"light"};
window.onload = () => {
_waEmbed(wa_btnSetting);
};
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7890504903052561"
crossorigin="anonymous"></script>
<!-- Your Chat Plugin code -->
whats the error how I fix it ?
trying to add whatsaao widget throough GTM in all pages except one page. but the tag have an error.
Your mistake is that you use an arrow function in your code. You can't do that in GTM.
Rewrite this:
window.onload = () => {
_waEmbed(wa_btnSetting);
};
into this:
window.onload = function(){
_waEmbed(wa_btnSetting);
};
I am using http://instafeedjs.com/ to display Instagram feed in my WordPress site.
I have included this file:
<script type="text/javascript" src="path/to/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'YOUR_CLIENT_ID'
});
feed.run();
and added into the page <div id="instafeed"></div>. But this displays
ReferenceError: Instafeed is not defined
error in the Firebug, and the feed not displays.
Does anyone know solutions to fix this?
Try to wrapp your code in some delay function, like this:
<script type="text/javascript">
jQuery(document).ready(function(){
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'YOUR_CLIENT_ID'
});
feed.run();
});
</script>
You called your instafeed.min.js after your code, thats why you get Not Defined error.
Another solution will be to call instafeed.min.js file before your code in Dom: in header, in body, up to your code. In this case you can use your code without wrapping in delay functions
I am trying to instantiate a Google Places Autocomplete input within an Angular 2 component. I use this code to do it:
loadGoogle() {
let autocomplete = new google.maps.places.Autocomplete((this.ref.nativeElement), { types: ['geocode'] });
let that = this
//add event listener to google autocomplete and capture address input
google.maps.event.addListener(autocomplete, 'place_changed', function() {
let place = autocomplete.getPlace();
that.place = place;
that.placesearch = jQuery('#pac-input').val();
});
autocomplete.addListener()
}
Normally, I believe, I would use the callback function provided by the Google API to ensure that it is loaded before this function runs, but I do not have access to it within a component's scope. I am able to load the autocomplete input 90% of the time, but on slower connections I sometimes error out with
google is not defined
Has anyone figured out how to ensure the Google API is loaded within a component before instantiating.
Not sure whether this will help, but I just use a simple script tag in my index.html to load Google API and I never get any error. I believe you do the same as well. I post my codes here, hope it helps.
Note: I use Webpack to load other scripts, except for Google Map API.
<html>
<head>
<base href="/">
<title>Let's Go Holiday</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Map -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<your-key>&libraries=places"></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
And then in your component:
...
declare var google: any;
export class SearchBoxComponent implements OnInit {
ngOnInit() {
// Initialize the search box and autocomplete
let searchBox: any = document.getElementById('search-box');
let options = {
types: [
// return only geocoding results, rather than business results.
'geocode',
],
componentRestrictions: { country: 'my' }
};
var autocomplete = new google.maps.places.Autocomplete(searchBox, options);
// Add listener to the place changed event
autocomplete.addListener('place_changed', () => {
let place = autocomplete.getPlace();
let lat = place.geometry.location.lat();
let lng = place.geometry.location.lng();
let address = place.formatted_address;
this.placeChanged(lat, lng, address);
});
}
...
}
I used it the same way as explained above but as per google page speed i was getting this suggestion,
Remove render-blocking JavaScript:
http://maps.googleapis.com/…es=geometry,places®ion=IN&language=en
So i changed my implementation,
<body>
<app-root></app-root>
<script src="http://maps.googleapis.com/maps/api/js?client=xxxxx2&libraries=geometry,places®ion=IN&language=en" async></script>
</body>
/* Now in my component.ts */
triggerGoogleBasedFn(){
let _this = this;
let interval = setInterval(() => {
if(window['google']){
_this.getPlaces();
clearInterval(interval);
}
},300)
}
You can do one more thing, emit events once the value(google) is received,& trigger your google task
inside them.
I'm looking at the Authoring Ractive.js components document on github from Rich-Harris.
It starts with invoking the foo component and including it this way:
<link rel='ractive' href='foo.html' name='foo'>
<p>This is an imported 'foo' component: <foo/></p>
Which I understand as declaring foo.html as a component and calling it on the foo tag, and this would not require doing a ractive.load (although I did not understand yet where the data loading would occur).
As it does not work at all (no loading of the component), I'm wondering if I mis-understood this part.
Has anyone use this and could give me a complete example?
Components themselves are independent of the loading mechanism.
In the simplest form, components can be declared in javascript:
Ractive.components.foo = Ractive.extend({
template: '#foo' // id of script tag, or can be inline string,
// other options
});
var ractive = new Ractive({
template: '<p>This is an main view with a 'foo' component: <foo/></p>'
});
Creating components is covered here in the docs.
There are many ways to package and load components. Using the link tag, as in your example, requires using ractive-load to actually load the components:
<!-- name is optional if same as file name -->
<link rel='ractive' href='foo.html' name='foo'>
<script src='ractive.js'></script>
<script src='ractive-load.js'></script>
<script>
// calling load() with no parameters loads all link tags and
// registers them as global components
Ractive.load().then( function () {
var ractive = new Ractive({
el: 'body',
template: 'I have access to the <foo/> component!',
data: { ... }
});
// or you could instantiate a component via:
var app = new Ractive.components.app({
... /options
});
}).catch( handleError );
</script>
I have an angularjs service which calculates a products price based on discounts, quantity, etc. I'm trying to write a jasmine test to call this service, passing in test data. I get an error that the app is missing it's dependencies. I don't want to have to load Ui router, shouldn't mocks take care of that?
Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
Here is my Jasmine SpecRunner.html. The Web project I am testing is in a different project than my Jasmine test project.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.0.0</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.0/boot.js"></script>
<script src="http://localhost:54411/Scripts/vendor/angular.js"></script>
<script src="http://localhost:54411/Scripts/vendor/angular-mocks.js"></script>
<script src="http://localhost:54411/Scripts/app.js"></script>
<!-- include source files here... -->
<script src="http://localhost:54411/Scripts/services/productPriceCalculatorSvc.js"></script>
<!-- include spec files here... -->
<script src="spec/ProductPriceCalculatorSpec.js"></script>
</head>
<body>
</body>
</html>
The spec file:
describe("Product Price Calculator service test", function () {
describe("when I call product price calculator.calculateCustomerDiscPrice", function () {
var sut;
beforeEach(function() {
module('quoteMasterApp');
inject(function(productPriceCalculatorSvc) {
sut = productPriceCalculatorSvc;
});
});
it('can calculate customer discount price', function() {
productPriceCalculatorSvc.calculateCustomerDiscPrice(null, null);
});
});
});
Here is my service declaration.
myApp.service("productPriceCalculatorSvc", [
function() {
return {
calculateCustomerDiscPrice: function(product, conversionRate) {
// calculations occur here
});
}
}
}
])
You need to tell the framework how to find your service.
Something like:
describe("ProductPriceCalculator", function () {
var productPriceCalculatorSvc;
beforeEach(function() {
module('productPriceCalculatorSvcFactory');
});
beforeEach(inject(function ($injector) {
productPriceCalculatorSvc = $injector.get('productPriceCalculatorSvcFactory');
}));
it('can calculate customer discount price', function () {
productPriceCalculatorSvc.calculateCustomerDiscPrice();
});
});
See more here: https://docs.angularjs.org/api/auto/service/$injector
I have the same case : test a controller that calls a service.
Here is what I have in my decribe
describe('Controller Test', function () {
var scope, ctrl;
// load your controllers including myController
beforeEach(module('mycontrollers'));
// load your services (do not forget to include them in your spec runner !)
// there should be myService defined in this module
beforeEach(module('myservices'));
// It seems a good practice to inject nothing in "it"
// Everything is injected in beforeEach
// here the controller uses theService and set some value in the scope
beforeEach(inject(function($rootScope, $controller, ReportProductService) {
scope = $rootScope.$new();
ctrl = $controller('myController', {
$scope: scope,
theService : myService
});
}));
it('should work', function () {
//verify that the controller is there
expect(ctrl).toBeDefined();
// do test
expect(scope.someExpectedValueSetByController).toBeDefined();
});
I can do a JSFiddle if you want
I can also make a better answer as my service is using $http
Please comment if you don't agree or find a better way to do it