I am begining with Angular and with unit testing, this is my first code, and it isn't working. I searched for a solution but I dont know what I am doing wrong. If anyone can explain to me what is the mistake, I would thank you.
This is all my code.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-mocks.js"></script>
<script src="jasmine.js"></script>
<script src="jasmine-html.js"></script>
<script src="boot.js"></script>
<link rel="shortcut icon" type="image/png" href="jasmine_favicon.png">
<link rel="stylesheet" href="jasmine.css">
</head>
<body ng-app = "myApp">
<div ng-controller = "MyCtrl">
{{greeting}}
</div>
<br><br><br>
<script>
<!-- CODE -->
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.greeting = 'Hello World!';
}]);
<!-- JASMINE -->
describe('myApp', function () {
var scope,
controller;
beforeEach(function () {
module('myApp');
});
describe('MyCtrl', function () {
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller('MyCtrl', {
'$scope': scope
});
}));
it('sets the greeting', function () {
expect(scope.greeting).toBe('Hello World!');
});
});
});
describe('JavaScript addition operator', function () {
it('adds two numbers together', function () {
expect(1 + 2).toEqual(3);
});
});
</script>
</body>
</html>
Thanks in advance
The sequence of your scripts is wrong. You should first include the scripts related to Jasmine, and then the scripts for angular and angular-mocks.
<!DOCTYPE html>
<html lang="en">
<head>
<!--Scripts for Jasmine-->
<script src="jasmine.js"></script>
<script src="jasmine-html.js"></script>
<script src="boot.js"></script>
<!--Script for Angular-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<!--Scripts for Angular-Mocks-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-mocks.js"></script>
<link rel="shortcut icon" type="image/png" href="jasmine_favicon.png">
<link rel="stylesheet" href="jasmine.css">
</head>
<body ng-app = "myApp">
<div ng-controller = "MyCtrl">
{{greeting}}
</div>
<br><br><br>
<script>
<!-- CODE -->
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', ['$scope', function($scope) {
$scope.greeting = 'Hello World!';
}]);
<!-- JASMINE -->
describe('myApp', function () {
var scope,
controller;
beforeEach(function () {
module('myApp');
});
describe('MyCtrl', function () {
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller('MyCtrl', {
'$scope': scope
});
}));
it('sets the greeting', function () {
expect(scope.greeting).toBe('Hello World!');
});
});
});
describe('JavaScript addition operator', function () {
it('adds two numbers together', function () {
expect(1 + 2).toEqual(3);
});
});
Related
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider.when('/', {
template: '',
controller: 'DefaultController as dc'
}).when('/rent', {
templateUrl: 'views/partials/rent.html',
controller: 'rentController as rc'
}).when('/buy', {
templateUrl: 'views/partials/buy.html',
controller: 'buyController as bc'
});
}); //end config
myApp.controller('DefaultController', DefaultController);
myApp.controller("rentController", rentController);
myApp.controller("buyController", buyController);
function DefaultController() {
console.log('inside of DefaultController');
var vm = this;
vm.checkPost = function() {
console.log('checkpost clicked');
};
} //end controller
function rentController(RealStateService) {
console.log('inside of rent controller');
var vm = this;
vm.rentArray = [];
vm.info = false;
vm.getProperties = function() {
console.log('port');
RealStateService.serverPractice().then(function(res) {
RealStateService.data.forEach(function(data) {
if (data.rent) {
vm.rentArray.push(data);
}
}); //end for each
}); //end then
}; //end getProperties
vm.showInfo = function(index) {
vm.info = true;
console.log('in get Info');
vm.info = vm.rentArray[index];
console.log(vm.info);
}; //end get info
}
function buyController(RealStateService) {
console.log('inside of buy controller');
var vm = this;
vm.rentArray = [];
vm.info = false;
vm.getProperties = function() {
RealStateService.serverPractice().then(function(res) {
RealStateService.data.forEach(function(data) {
if (data.cost) {
vm.rentArray.push(data);
}
}); //end for each
}); //end then
}; //end getProperties
vm.showInfo = function(index) {
vm.info = true;
console.log('in get Info');
vm.info = vm.rentArray[index];
console.log(vm.info);
}; //end get info
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Weekend Challenge #5</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/style.css">
<script src="vendors/angular.min.js" charset="utf-8"></script>
<script src="vendors/angular-route.min.js" charset="utf-8"></script>
<script src="scripts/client.js" charset="utf-8"></script>
<script src="scripts/services/realState.js" charset="utf-8"></script>
</head>
<body ng-app='myApp'>
<div class="container-fluid">
<div class="navBar">
<h1>Weekend Challenge #5</h1>
<button type="button" name="button">See for rent</button>
<button type="button" name="button">See for sale</button>
<button type="button" name="button">post rent/sale</button>
</div>
<ng-view></ng-view>
<h1>Post</h1>
<div class="post">
<label for="type">Type: </label>
<select name='type' ng-model='dc.type'>
<option value="">Rent</option>
<option value="">Sell</option>
</select>
<button type="button" name="button" ng-click='dc.checkPost()'>Begin</button>
</div>
</div>
</body>
</html>
The app is not running here on SO, but basically I am not getting the log at the default controller when I click the begin button. I am not sure what the problem is. I should see in the console 'checkpost cliked'
I think you forgot to give angular-route.js. Try again by adding the below script link
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
I had created a factory in angular but i am getting the following error
Unknown provider:
Here is the factory:
app.factory("getFoo", function($scope){
return {
getCommi: function(val,id){
var array = ["hello","world"];
return array;
}
}
});
The controller is:
app.controller('myCtrl', ['$scope','getFoo',function($scope,getFoo){
$scope.myArr = getFoo.getCommi(4,1);
}])
What can I have to do for fix this? I just don't see any problem.
no need of scope and your factory injection should be like below
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, getFoo) {
$scope.myArr = getFoo.getCommi(4,1);
});
app.factory('getFoo', function () {
return {
getCommi: function(val,id){
var array = ["hello","world"];
return array;
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>{{myArr}}!</p>
</body>
</html>
you just need to remove $scope from factory.
working fiddle link
Please remove $scope from the factory.
var app = angular.module('myApp',[]);
app.factory("getFoo", function(){
return {
getCommi: function(val,id){
var array = ["hello","world"];
return array;
}
}
});
app.controller('myCtrl', ['$scope','getFoo',function($scope,getFoo){
$scope.myArr = getFoo.getCommi(4,1);
}])
Remove $scope from your factory and add factory "getFoo" as a dependency in your app's run module like this:
app.run(['$rootScope', '$location', 'getFoo', function($rootScope, $location, getFoo) {
}]);
I'm trying to get my head around learning $compile but just looking for a couple of pointers as to where I'm going wrong...
var app = angular.module("App", []);
app.controller("Ctrl", function ($scope, $http, $compile) {
}).directive('myDir', function ($compile) {
$(document).on("click", "#button", function ($compile) {
var newDirective = angular.element('<li>{{app data}}</li>');
$(".grid ul").append(newDirective);
$compile(newDirective)($scope);
});
});
I suppose firstly, nothing seems to work when I put it into my directory but it does when I put it in the controller. And secondly it doesn't seem to compile as the Angular tags/elements don't render correctly. I just can't figure out where I'm going wrong...
As per the Docs $compille
Compiles an HTML string or DOM into a template and produces a template function, which can then be used to link scope and the template together.
You are on the right track to use it , just need some modification in your directive code like this.
var app = angular.module("App", []);
app.controller("Ctrl", function ($scope, $http, $compile) {
}).directive('myDir', function ($compile) {
return{
restrict: 'A',
scope: {
data:"=appdata"
},
link: function(scope,element){
var newDirective = angular.element('<li>'+ scope.data +'</li>');
var content = $compile(newDirective)(scope);
element.append(content);
}
}
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="Ctrl">
<div class="grid" >
Hello
<ul my-dir appdata="'whatever'">
</ul>
</div>
</body>
</html>
Plunker : https://plnkr.co/edit/xqgnhXnVoYOsXFhPMbOY?p=preview
Your directive is not formatted (created) correct. No need to use JQUERY... you are compiling the html and the data ($scope) but you are not applying the compiled template to your html.
Check this plunkr: https://plnkr.co/edit/eKdIEhyLBViWAOzfWhhV?p=preview
angular.module('plunker', [])
.directive('compileDir', ['$rootScope', '$compile', compileDir])
.controller('HomeController', [HomeController]);
function compileDir($rootScope, $compile) {
var self = {};
self.restrict = 'A';
self.scope = {
compileDirOptions: '='
};
self.link = linkFn;
return self;
function linkFn($scope, $element, $attributes) {
// I am making a new scope because I do not want to mess the directive's one, you do not have to
var newScope = angular.merge($rootScope.$new(), $scope.compileDirOptions.data);
var el = $compile($scope.compileDirOptions.html)(newScope);
$element.append(el);
}
}
function HomeController() {
var self = this;
self.message = "Hello World!";
self.data = {
html: '<li>{{name}}</li><li>{{color}}</li>',
data: {
name: 'app data',
color: 'red'
}
}
}
Your html is like this:
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="HomeController as home">
<ul compile-dir compile-dir-options="home.data"></ul>
</body>
</html>
When i try to run the below example mentioned in the Angular JS timer site, I am getting error:
ng:areq
Bad Argument
Argument 'MyAppController' is not a function, got undefined
http://errors.angularjs.org/1.3.14/ng/areq?p0=MyAppController&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at file:///C:/ICDP/Angular/angular/angular.min.js:6:417
at Sb (file:///C:/ICDP/Angular/angular/angular.min.js:19:510)
at tb (file:///C:/ICDP/Angular/angular/angular.min.js:20:78)
at file:///C:/ICDP/Angular/angular/angular.min.js:75:331
at file:///C:/ICDP/Angular/angular/angular.min.js:57:65
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example - Multiple Timers Example</title>
<script src="../angular/angular.min.js"></script>
<script src="../app/js/timer.js"></script>
<script>
angular.module('MyApp', ['timer']);
function MyAppController($scope) {
$scope.timerRunning = true;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
}
MyAppController.$inject = ['$scope'];
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyAppController">
<h2>AngularJS - Multiple Timers Example</h2>
<h3>Timer 1: <timer/></h3>
<h3>Timer 2: <timer interval="2000"/></h3>
<h3>Timer 3: <timer> minutes, seconds.</timer></h3>
<button ng-click="startTimer()" ng-disabled="timerRunning">Start Timers</button>
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timers</button>
</div>
</body>
</html>
I have the below two files included
<script src="../angular/angular.min.js"></script>
<script src="../app/js/timer.js"></script>
http://siddii.github.io/angular-timer/examples.html#/plain-javascript-source
Open Chrome developer tools(F12), then open folder with file: angular-timer -> examples -> angularjs-single-timer.html and you will see that (it is just little mistake):
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example - Single Timer Example</title>
<!-- compiled JavaScript -->
<script type="text/javascript" src="../dist/assets/js/angular-timer-bower.js"></script>
<script type="text/javascript" src="../dist/assets/js/angular-timer-all.min.js"></script>
<script>
angular.module('MyApp', ['timer'])
.controller('MyAppController', ['$scope', function ($scope) {
$scope.timerRunning = true;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.$on('timer-stopped', function (event, data){
console.log('Timer Stopped - data = ', data);
});
}]);
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyAppController">
<h1>AngularJS - Single Timer Example</h1>
<h3><timer/></h3>
<button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
</div>
<br/>
</body>
</html>
You have not MyAppController Controller. You must tell angular that there is controller named MyAppController. Try this to fix your problem.
angular.module('MyApp', ['timer']).controller('MyAppController', MyAppController);
And link that can be useful https://docs.angularjs.org/guide/controller
I am trying to implement a simple timer in angularJS. But timeout function is not working though it is suggested by everyone.
<!doctype html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>
</head>
<body>
<div ng-app="ss" ng-controller="mainCtrl">
{{timeInMs}}
</div>
<script>
var myApp = angular.module("ss", ['ngSanitize']);
myApp.controller('mainCtrl', function ($sce, $scope) {
$scope.timeInMs = 10;
var countUp = function() {
$scope.timeInMs+= 500;
$timeout(countUp, 500);
}
$timeout(countUp, 500);
});
</script>
</body>
</html>
When I comment out the " $timeout(countUp, 500);" line, the code works without error but timer doesn't work. Do i need to include any more javascript file?
Thanks in advance.
You have to inject the $timeout service to the controller
var myApp = angular.module("ss", []);
myApp.controller('mainCtrl', function ($sce, $scope, $timeout) {
$scope.timeInMs = 10;
var countUp = function () {
$scope.timeInMs += 500;
$timeout(countUp, 500);
}
$timeout(countUp, 500);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ss" ng-controller="mainCtrl">
{{timeInMs}}
</div>