When i am using angular version this. "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js" my code works fine. but when i am using this angular version my code is not working. "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js".
Full HTML code.
<!DOCTYPE html>
<html ng-app="">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<head>
<title>Angular Js Tutorial</title>
</head>
<body>
<div ng-controller="Maincontroller">
{{message}}
</div>
<script>
function Maincontroller($scope)
{
$scope.message = "Hii how are you";
}
</script>
</body>
</html>
I didn't the required output. It simply prints.
{{message}}
-
1Can you provide some of your controller code or console output when the page is rendering? Odds are there is some exception not allowing the binding to completeHal– Hal2015年11月21日 15:27:13 +00:00Commented Nov 21, 2015 at 15:27
-
Error from console of firefox."Error: [ng:areq] errors.angularjs.org/1.4.7/ng/… I/<@ajax.googleapis.com/ajax/libs/angularjs/1.4.7/… qb@ajax.googleapis.com/ajax/libs/angularjs/1.4.7/… Sa@ajax.googleapis.com/ajax/libs/angularjs/1.4.7/… Xe/this.$get</<@ajax.googleapis.com/ajax/libs/angularjs/1.4.7/…Java_byte– Java_byte2015年11月21日 15:39:24 +00:00Commented Nov 21, 2015 at 15:39
4 Answers 4
Starting from angular 1.3 you can't declare controllers in the global scope.
Rewrite the declaration of your controller MainController
// Declaration of the module
angular.module('myApp', []);
// Declaration of the controller
angular.module('myApp').controller('MainController', function ($scope) {
$scope.message = "Hii how are you";
});
Regarding to the above changes, replace <html ng-app=""> with <html ng-app="myApp">
1 Comment
There are few problems with your code,
(i)You have not declared module anywhere. (ii) With Angular 1.3 you the controllers should not be declared globally.
Here is the corrected application
Comments
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Angular Js Tutorial</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body >
<div ng-controller="MainController as mainCtrl">
{{ mainCtrl.message }}
</div>
<script>
(function() {
'use strict';
angular
.module('app', []);
.controller('MainController', ['$scope', function MainController($scope) {
$scope.message = "Hii how are you";
}]);
})();
</script>
</body>
</html>
Please refer this.
1 Comment
MainController as mainCtrl, don't use $scope. Use this.<html>
<head>
<title>Angular JS Controller Example</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/
1.4.7/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Controller Application</h2>
<div ng-app = "ukApp" ng-controller = "ukController">
<br>
{{name}}
</div>
<script>
var mainApp = angular.module("ukApp", []);
mainApp.controller('ukController', function($scope) {
$scope.name= "Umar Farooque Khan";
});
</script>
</body>
</html>
Use the above code to do above task.