In my browser, the value of the angular curly braces is not displayed. There are no errors in the console and the console logs the value, but in my browser its a blank page. However it should say 'hello World' in the top left.
my app.js:
(function() {
'use strict';
angular.module('testModule', []);
}());
my controller:
(function () {
'use strict';
angular
.module('testModule')
.controller('testController', Controller);
Controller.$inject = [];
function Controller() {
var vm = this;
vm.test = "hello World";
activate();
function activate() {
console.log(vm.test);
}
}
})();
my html:
<body ng-controller="testController">
<div>
{{vm.test}}
</div>
</body>
You need to rewrite this line
<body ng-controller="testController">
as
<body ng-controller="testController as vm">
This is because you are using this inside your controller and referencing the scope variable with this cannot be accessed directly by the Angular expression so you need to create a alias of the controller using as you can give it any alias. Then use this alias to access the scope variable. If you use
`<body ng-controller="testController as ctrl">`
then you need to access by {{ctrl.test}}
in template update it like; (As you're using controller as syntax)
ng-controller="testController as vm"
Here's a working plunker
http://plnkr.co/edit/tbENuThIIszfe2D2e4qx?p=preview
Related
I have an element (display-enter-button.html) that I want to test:
<template>
<data-local-storage id="localStorage"></data-local-storage>
<app-location route="{{route}}"></app-location>
<span role="button" tabindex="0" class="btn" on-click="_btnClick" on-KeyPress="_btnKeyPress">enter here</span>
</template>
<script>
class DisplayEnterButton extends Polymer.Element {
_btnClick() {
// Something happens
});
}
</script>
I want to verify that the _btnClick method gets called when I click on the enter button. This is my unit test:
<head>
<title>display-enter-button</title>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../bower_components/web-component-tester/browser.js"></script>
<!--
Load component to test
-->
<link rel="import" href="../../src/displays/display-enter-button.html">
</head>
<body>
<!--
Add component to test fixure and give it an incrementing id
-->
<test-fixture id="fixture-one">
<template>
<display-enter-button></display-enter-button>
</template>
</test-fixture>
<script>
// Name the suite the same as the type of tests
suite('Query Selector Tests', function() {
test('On click function called', function() {
// Select element to trigger event
var circle = fixture('fixture-one').shadowRoot.querySelector('.btn');
// Spy on the method that should run
var clickButton = sinon.spy(DisplayEnterButton.prototype, '_btnClick');
// Trigger the event
circle.click();
// Test it
sinon.assert.called(clickButton);
});
});
</script>
The test runs, but I can't get past this ESLint error:
'DisplayEnterButton' is not defined no-undef
I'd like to avoid ESLint rule exceptions (such as global) if possible because I'm going to be using this pattern a lot in the future. How could I resolve this error?
An alternative to Xavier's solution that doesn't involve creating another instance of the test element is to fetch the actual element under test from the test fixture:
<test-fixture id="BasicView">
<template>
<!-- give the test element an ID to query for it in tests -->
<my-view1 id="testEl"></my-view1>
</template>
</test-fixture>
<script>
suite('my-view1 tests', function() {
test('on click', function() {
var proto = document.getElementById('testEl').constructor.prototype;
var clickButton = sinon.spy(proto, '_btnClick');
// ...
});
});
</script>
EDIT: Tony's accepted answer is the best solution
This worked as well, but creates a new instance instead of using fixture instance.
test('On click function called', function() {
// Create instance of the class we want to test the methods of
var proto = document.createElement('display-enter-button')
.constructor.prototype;
// Replace the method with a spy
var func = sinon.spy(proto, '_btnClick');
// Select the elemen to test
var btn = fixture('fixture-one').shadowRoot.querySelector('.btn');
// Simulate the trigger
btn.click();
// Check if the function was called
sinon.assert.called(func);
});
The Output in the inspect element:
<div ng-bind-html="job.description" class="ng-binding">
"<p><strong>Our Responsibilities</strong></p>"
</div>
This is my HTML code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.20/angular.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.3.20/angular-sanitize.min.js"></script>
var myApp = angular.module('rivigoApp', ['ngSanitize']);
<div ng-bind-html="job.description"></div>
How do I do to make it compile the HTML in the output? I believe the main issue is with the quotes "" but I'm unable to figure out how to proceed. I've tried using various other methods.
inject $sce Service in your controller and use it like below
app.controller('mainCtrl',function($sce , $scope){
$scope.job = {
description : $sce.trustAsHtml("<p><strong>Our Responsibilities</strong></p>")
};
})
$sce Reference
I am trying to build a simple web app that communicates with an external API , for the first step i wish to check if my controller,service-html integration is all in placed , so I'm tying to bind a simple variable from the controller to the view, but i am getting {{msg}} instead of a successful bind.
please ignore the service for now its just my fundumentals for later on.
main.html :
<!DOCTYPE html>
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="controller.js"></script>
<head></head>
<body ng-app="queueApi" ng-controller="MainController">
<div>
<h1>{{msg}}</h1>
</div>
</body>
</html>
queueservice.js
angular.module('queueApi')
.factory('queueService', function ($resource){
return $resource('http://127.0.0.1:8080/queue/:id',{id: '#id'});
});
controller.js
var app = angular.module('queueApi' , ['ngResource']);
app.controller('MainController', function($scope,$http, queueService){
$scope.msg = "Hi tom";
// $scope.items = queueService.query({id:2}); //getting all from id 2
});
If you look at your console you can see the error in module creation. It is because the ngResource module is in external source file rather than angular.min.js. Add also the angular-resource.js.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.min.js"></script>
<script src="controller.js"></script>
In addition to Hamlet Hakobyan's answer, you must ensure that your modules have been included in correct order. With your code structure controller.js should precede queueservice.js.
From the documentation:
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
i am new in angular.js and i am following a tutorial that was made about a year ago
i am trying to create a search function that takes the input and search for it in
Github.com
The HTML code is :
<!DOCTYPE html>
<html ng-app="github">
<head>
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="main">
<h1>{{message}}</h1>
<p> {{username}} </p>
<form name="search">
<input type="search" placeholder="enter name" ng-model="username">
<button type="submit" ng-click="search(username)">search</button>
</form>
<div>
<h1> {{user.login}} </h1>
<img src="http://www.gravatar.com/avatar/{{user.gravatar_id}}">
<p> {{user.type}} </p>
</div>
</body>
</html>
and the JS code :
// Code goes here
(function () {
var app = angular.module("github", []);
var main = function ($scope, $http) {
var onComplete = function (response) {
$scope.user = response.data;
};
var onError = function (reasone) {
$scope.error = "no can";
};
$scope.search = function (username) {
$http.get("http://api.github.com/users/" +username).then(onComplete, onError);
};
$scope.message = "Git hub viewer";
};
app.controller("main", ["$scope", "$http", main]);
}());
this gives me an error >>> TypeError: v2.search is not a function <<<
for help:
i got a problem like that and the solution was not to use "main" function in global type but "search" is not global i guess .. hope this help
here is the codepen link:
http://codepen.io/ToBeM12/pen/vGvwzo
the function has the same name as another variable and is conflicting in $scope
In your case just replace $scope.search to $scope.searchuser since $scope.search is already defined..
I've seen issues where the form name is the same as a scope function or variable name. Try renaming the form to "searchForm" to avoid the conflict with $scope.search.
An easy solution change the form name your form name is interfering with the function name
AngularJS error: TypeError: v2.login is not a function
The above is a similar question which helped me solve the question.
Try this
angular.module('github',[])
.controller('main', ['$scope', '$http', function($scope, $http) {
$scope.message = "Git hub viewer";
$scope.search = function (username) {
$http.get("http://api.github.com/users/" +username).then(function(response){
$scope.user = response.data;
});
};
}])
Dont do it
$scope.example = () => {
$scope.example = 'object';
}
Possible solution: the IIFE is written wrong.
(function(){...}());
instead of
(function(){...})();
For now, this is the only error that I could find.
#Integrator wrote correct answer. Just want to add to access to the form from your angular controller you also need to write $scope.formName. For example:
$scope.search.username.$invalid = true;
In this way you set form element to invalid. So in your case angular confuse form with method. It is a good practice to set form name like: xxxxForm to avoid such a conflicts
I know this has already been answered, but I also had the same error. It ended up being that I had type="submit" on my button with an ng-click. When I removed type="submit," the function worked fine and I no longer got the error.
I would like to render Json to angularJs in my view, so in a file events.scala.html I have this :
#(events: play.api.libs.json.JsValue)
#events
And it works fine, my Json data is displayed on my page.
But I would like to transmit this Json to angularJs, I would like to do something like this :
#(events: play.api.libs.json.JsValue)
#main(title = "title") {
<script>
app.controller ('TestCtrl', function ($scope){
$scope.events = </script> #events <script>
});
</script>
<div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>
}
How should I proceed?
Have you tried not to close the script tag ?
#(events: play.api.libs.json.JsValue)
#main(title = "title") {
<script>
app.controller ('TestCtrl', function ($scope){
$scope.events = #events ;
});
</script>
<div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>
}
the play templates will be rendered before the javascript is interpreted in the browser so the above will be transformed as
<script>
app.controller ('TestCtrl', function ($scope){
$scope.events = [{name:"event1"},{name:"event2"}] ;
});
</script>
<div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>
once the browser receives it, it will interpret it. If the above is a valid angular program there is no reason it shouldn't work.