I copied this angularjs code from a book "ng-book". But it is not working at all..........................................................
<!DOCTYPE html>
<html ng-app="">
<head>
<title>Simple App</title>
</head>
<body>
<div ng-controller="MyController">
Hello <span ng-bind="clock"></span>
</div>
<script src="angular-1.5.7/angular.js">
</script>
<script type="text/javascript">
function MyController($scope){
$scope.clock = new Date();
var updateClock = function () {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
</script>
</body>
</html>
Use $interval rather and setInterval.
No need of $scope.$apply() when you use angular's $interval
You need the ng-app defined
The controller definition should be like in the snippet
Here is a working code snippet
var demoApp = angular.module('demoApp', []);
demoApp.controller('MyController', function($interval, $scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
$interval(function() {
updateClock();
}, 1000);
updateClock();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Simple App</title>
</head>
<body ng-app="demoApp">
<div ng-controller="MyController">
Hello <span ng-bind="clock"></span>
</div>
</body>
What you are doing is not the most efficient way. For example you could use $interval and so on..
But since you are just starting with Angular, I've made the code working with minimal addition or modification so you can understand:
//addition-start
var app = angular.module('myApp', []);
app.controller("MyController", MyController);
//addition-end
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function() {
$scope.clock = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
};
<!DOCTYPE html>
<!--can be modified to ng-app="myApp"but will work otherwise too -->
<html ng-app="">
<head>
<title>Simple App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js "></script>
</head>
<body>
<div ng-controller="MyController">
Hello <span ng-bind="clock "></span>
</div>
</body>
</html>
first read how to difine angular module and how it works.you didn't define module in html
<!DOCTYPE html>
<html ng-app="testapp">
<head>
<title>Simple App</title>
<script src="angular-1.5.7/angular.js"> </script>
</head>
<body>
<script type="text/javascript">
var app=angular.module('testapp',[]);
app.controller('MyController',function($scope,$setInterval){
$scope.clock = new Date();
var updateClock = function () {
$scope.clock = new Date();
};
$setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
});
</script>
<div ng-controller="MyController">
Hello <span ng-bind="clock"></span>
</div>
</body>
</html>
You forgot to define your module ng-app
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<title>Simple App</title>
</head>
<body>
<div ng-controller="MyController">
Hello {{clock}}</span>
</div>
<script src="angular-1.5.7/angular.js"></script>
<script type="text/javascript">
var app = angular.module('demoApp',[]);
function MyController($scope){
$scope.clock = new Date();
var updateClock = function () {
$scope.clock = new Date();
};
$interval(function() {
updateClock();
}, 1000);
updateClock();
};
</script>
</body>
</html>
Doc
Difference between set-interval and $interval
ng-bind has one-way data binding ($scope --> view). It has a shortcut {{ val }} which displays the scope value $scope.val inserted into html where val is a variable name.
Related
I am learning AngulaJS, here is the code:
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="ClockCtrl">
Current time is: {{ time.now }}
</div>
</body>
</html>
the script.js:
function ClockCtrl($scope){
var time = {};
time.now = new Date().toString();
$scope.time = time;
setInterval(function(){
$scope.time.now = new Date().toString();
console.log(time.now);
}, 1);
}
But i don't know why the time cann't be update in the html display?
You should use $interval directive instead of setInterval, which will internally call $scope.$apply() to update the bindings
function ClockCtrl($scope, $interval){
$interval(function(){
$scope.time.now = new Date().toString();
}, 1000);
////Or, You can use $scope.$apply()
//setInterval(function () {
// $scope.time.now = new Date().toString();
// $scope.$apply();
//}, 1000);
}
DEMO
in my web app (which is with angularJs in the front part and with Symfony2 in the back part) i need to integrate a timer (count down of a quizzer) i found this timer https://github.com/siddii/angular-timer on github and it seems to be cool but i don't the integration in my webapp works but when i try to start the counter on an event (button click) it don't works, in fact i tried this script:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example - Single Timer 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;
};
$scope.$on('timer-stopped', function (event, data){
console.log('Timer Stopped - data = ', data);
});
}
MyAppController.$inject = ['$scope'];
</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>
and i got this error:
Argument 'MyAppController' is not a function, got undefined
any one can help me plz ?
after some changes the my code becomes :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example - Single Timer Example</title>
<script src="../angular/angular.min.js"></script>
<script src="../app/js/timer.js"></script>
<script>
var myApp = angular.module('myApp', ['timer']);
myApp.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);
});
}]).$inject = ['$scope'];
</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>
and i'm getting this beauty :/
Unknown provider: I18nServiceProvider <- I18nService
I am trying to use my scope values in my head title tag. This is external to the body element that has my controller. IS there a way to do this?
Here is my HTML:
<!DOCTYPE html>
<html ng-app="soCLean">
<head>
<title>{{locale}} {{type}} {{service}}</title>
</head>
<body ng-controller="soCleanLandingPage">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var soClean = angular.module('soClean', []);
soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
$scope.locale = 'vancouver';
$scope.type = 'residential';
$scope.service = 'pressure washing';
$scope.serviceSingle = 'pressure wash';
}]);
</script>
</body>
</html>
Thanks for your help.
Just move your ng-controller to the html element.
http://plnkr.co/edit/xImv48BvoW2Y9Ibb9JTq?p=preview
(You can see the values in head in the debugger)
<!DOCTYPE html>
<html ng-app="soClean" ng-controller="soCleanLandingPage">
<head>
<title>{{locale}} {{type}} {{service}}</title>
</head>
<body >
<div>
<p>{{locale}}</p>
<p>{{type}}</p>
<p>{{service}}</p>
<p>{{serviceSingle}}</p>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var soClean = angular.module('soClean', []);
soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
$scope.locale = 'vancouver';
$scope.type = 'residential';
$scope.service = 'pressure washing';
$scope.serviceSingle = 'pressure wash';
}]);
</script>
</body>
</html>
You can use the $rootScope:
app.run(function($rootScope){
$rootScope.locale = "en";
$rootScope.type = "something";
$rootScope.service = "another";
});
You can also use a fancy directive:
app.directive('title', function(){
return {
restrict: 'E',
scope:{},
template: "{{locale}} {{type}} {{service}}",
link: function(scope){
scope.locale = "en";
scope.type = "something";
scope.service = "another";
}
}
});
Check this plunker: http://plnkr.co/edit/JRblEkKaOCLNC2O7r9s4?p=preview
I am having a problem which should have a simple solution. For some reason my action helper is not connecting to its method.
Here is my JSBin http://jsbin.com/UMaJaM/5/edit
Code is copied below for reference.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Ember template" />
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.1.2/ember.js"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
JavaScript:
var TemplatedViewController = Ember.Object.extend({
templateFunction: null,
context: null,
viewBaseClass: Ember.View,
view: function () {
var controller = this;
var context = this.get('context') || {};
var args = {
template: controller.get('templateFunction'),
controller: controller
};
args = $.extend(context, args);
return this.get('viewBaseClass').extend(args);
}.property('templateFunction'),
appendView: function (selector) {
this.get('view').create().appendTo(selector);
},
appendViewToBody: function (property) {
this.get(property).create().append();
}
});
var template_source = '<button type="button" class="btn" {{action "button"}}>Click</button>';
var MyController = TemplatedViewController.extend({
templateFunction: Ember.Handlebars.compile(template_source),
button: function() {
console.log('hello world');
}
});
var controller = MyController.create();
$(function () {
controller.appendView('#main');
});
You need to create an Ember application. Add this to the beginning of your script:
App = Ember.Application.create();
I'm getting an error of "buildXML is not defined" when I run this code:
var c = {
updateConsumer:function (cid,aid,sid,survey){
var surveyXML = buildSurveyXML(survey);
},
buildSurveyXML: function(survey) {
var surveyResults = survey.split("|");
var surveyXML = '';
for (var i=0;i<surveyResults.length;i++){
...
}
return surveyXML;
}
}
And the html that includes this JS and calls the updateConsumer function:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Web Service Test</title>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../../shared/js/consumerSoap.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
c.insertConsumer("First","Last","55555","name#url.com","76:1139");
});
</script>
</body>
</html>
The problem is that updateConsumer doesn't know anything about buildSurveyXML; that function isn't in the global scope. However, since your function is part of the same object, you can call it using the this keyword.
updateConsumer:function (cid,aid,sid,survey){
var surveyXML = this.buildSurveyXML(survey);
}
Use
var surveyXML = c.buildSurveyXML(survey);