ng-click function won't work - javascript

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>

Related

Combine HTML and JS from Fiddle

A similar question was asked in this forum post, but I am still unable to convert the code from JSfiddle to HTML.
The JSfiddle example can be found here.
I tried to use the technique suggested in the forum post previously mentioned, that is:
<html>
<head>
<style type="text/css">
// CSS Content
</style>
</head>
<body ng-app="myApp">
<!-- some html elements -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script language="JavaScript" type="text/javascript">
// more js here.
</script>
</body>
As I am a complete noob, I simply copied the HTML and Javascript into the some html elements and // more js here sections. Without changing the API key, the final code looked like this:
<html>
<head>
<style type="text/css">
// CSS Content
</style>
</head>
<body ng-app="myApp">
<div ng-app="myapp" ng-controller="WeatherCtrl">
<h2>Weather in Salzburg, Austria</h2>
<weather-icon cloudiness="{{ weather.clouds }}"></weather-icon>
<h3>Current: {{ weather.temp.current | temp:2 }}</h3>
min: {{ weather.temp.min | temp }}, max: {{ weather.temp.max | temp }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script language="JavaScript" type="text/javascript">
'use strict';
var myapp = angular.module('myapp', []);
myapp.factory('weatherService', function($http) {
return {
getWeather: function() {
var weather = { temp: {}, clouds: null };
$http.jsonp('http://api.openweathermap.org/data/2.5/weather?q=Salzburg,at&units=metric&callback=JSON_CALLBACK&APPID=f9dbd911bc01df1d9ce563b2ba4d3209').success(function(data) {
if (data) {
if (data.main) {
weather.temp.current = data.main.temp;
weather.temp.min = data.main.temp_min;
weather.temp.max = data.main.temp_max;
}
weather.clouds = data.clouds ? data.clouds.all : undefined;
}
});
return weather;
}
};
});
myapp.filter('temp', function($filter) {
return function(input, precision) {
if (!precision) {
precision = 1;
}
var numberFilter = $filter('number');
return numberFilter(input, precision) + '\u00B0C';
};
});
myapp.controller('WeatherCtrl', function ($scope, weatherService) {
$scope.weather = weatherService.getWeather();
});
myapp.directive('weatherIcon', function() {
return {
restrict: 'E', replace: true,
scope: {
cloudiness: '#'
},
controller: function($scope) {
$scope.imgurl = function() {
var baseUrl = 'https://ssl.gstatic.com/onebox/weather/128/';
if ($scope.cloudiness < 20) {
return baseUrl + 'sunny.png';
} else if ($scope.cloudiness < 90) {
return baseUrl + 'partly_cloudy.png';
} else {
return baseUrl + 'cloudy.png';
}
};
},
template: '<div style="float:left"><img ng-src="{{ imgurl() }}"></div>'
};
});
</script>
</body>
My output looks like this:
Could anyone please show me how to do this?
The problem is that you are declaring two apps remove "ng-app="myApp" from the body <body> tag.

ReferenceError: module is not defined in Jasmine Angular js

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);
});
});

Not able to run AngularJS timer example

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

how to bind names between text box to label

How can i bind values from shown single text box to label value ??
If i use ng-repeat in this i'm facing issues to my further functionalities.. can u pls solve this issue. i'm not able to bind between them ....Working DEMO
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope, $compile) {
$scope.my = {name: 'untitled'};
var counter=0;
$scope.add_Name = function(index) {
var myName='untitled'+counter;
var namehtml = '<label ng-click="selectName(\''+myName+'\')">'+myName+' //click<br/></label>';
var name = $compile(namehtml)($scope);
angular.element(document.getElementById('add')).append(name);
++counter;
};
$scope.selectName = function(val) {
$scope.my.name=val;
$scope.showName = true;
};
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="add_Name($index)">Add Names</button>
<div id="add"></div><br/>
<form ng-show="showName">
<label>Name Change(?)</label><br/>
<input ng-model="my.name">
</form>
</body>
</html>
I have updated my code, here's a working version, finally i got the result:
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope, $compile) {
$scope.my = {name: 'untitled'};
$scope.mies=[]; // added an array to store the generated values
var counter=0;
$scope.add_Name = function(index) {
$scope.mies[counter]={name: 'untitled'+counter}; // insert a new object into the array
var namehtml = '<label ng-click="selectName(mies[\''+counter+'\'])">{{mies['+counter+'].name}} //click<br/></label>';
var name = $compile(namehtml)($scope);
angular.element(document.getElementById('add')).append(name);
++counter;
};
$scope.selectName = function(val) {
$scope.my=val; // set my to val instead of my.name
$scope.showName = true;
};
});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="add_Name($index)">Add Names</button>
<div id="add"></div><br/>
<form ng-show="showName">
<label>Name Change(?)</label><br/>
<input ng-model="my.name">
</form>
</body>
</html>

How to use google apis tasks for javascript

What is wrong with this script?
I'm trying to get the tasklists from google using ggogle apis for javascript.
This is the code:
<html>
<head>
<title>Google auth</title>
<script src="https://apis.google.com/js/client.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script>
function auth() {
var config = {
'client_id': '198071236552-5ou4utkvmknkcj48prfah7a4mpm86f5v.apps.googleusercontent.com',
'scope': 'https://www.googleapis.com/auth/tasks https://www.googleapis.com/auth/tasks.readonly'
};
gapi.auth.authorize(config, function() {
makeTasksApiCall();
});
}
function makeTasksApiCall() {
gapi.client.load('tasks', 'v1').then(function () {
var request = gapi.tasks.tasklists.list();
request.execute(function (resp) {
for (var i = 0; i < resp.items.length; i++) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(resp.items[i].summary));
document.getElementById('tasks').appendChild(li);
}
});
});
}
</script>
</head>
<body>
<button onclick="auth();">GET CONTACTS FEED</button>
<div id="tasks">
</div>
</body>
</html>
Error:
gapi.tasks is undefined
Thank you

Categories