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