I've been reading and doing my first excercies on Angular.
After a while I'm stuck on this. Simple "Hello World" is not working.
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
<p>{{greeting.text}}, world </p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Angular -->
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'hey!!';
}]);
</script>
</body>
</html>
This <p>{{greeting.text}}, world </p> should be <p>{{greeting}}, world </p>.
Related
I created a basic AngularJS app and it's not displaying the values on the live site declared on the controller.
The live site displays the expressions written on the controller file instead.
ie. - It displays:
{{ title }}
{{ paragraph }}
Instead of:
First Angular Title
First Angular Paragraph
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular Application</title>
<script src="js/shared/angular.min.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="MainController">
<h1> {{ title }} </h1>
<p> {{ paragraph }}<p>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
</body>
</html>
MainController.js
app.controller("MainController", ['$scope', function($scope) {
$scope.title = "First Angular Title";
$scope.paragraph = "First Angular Paragraph";
}]);
app.js
var app = angular.module("mainApp", []);
I don't know what I'm doing wrong. I'm completely new to this. I appreciate any help. Thanks for your time.
I have included the angular from cdn and updated the inline script the same working. please verify included files are loading properly.
<!DOCTYPE html>
<html>
<head>
<title>Angular Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-app="mainApp">
<div ng-controller="MainController">
<h1> {{ title }} </h1>
<p> {{ paragraph }}<p>
</div>
<!-- Modules -->
<script type="text/javascript">
var app = angular.module("mainApp", []);
app.controller("MainController", ['$scope', function($scope) {
$scope.title = "First Angular Title";
$scope.paragraph = "First Angular Paragraph";
}]);
</script>
</body>
</html>
</body>
</html>
I am a beginner in Angular js. I have written the code but I am getting the below output. Could you correct my code.
This is index.html:
<body>
<div ng-controller="MainController">
{{ value }}
<h1>Hello, world</h1>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascipt" src="app.js"></script>
</body>
</html>
This is code in the App.js:
angular.module('app',[]);
var MainController = function($scope){ $scope.value="This is Angular" }
But I am getting this output: {{ $scope.value }} Hello, world
I have verified the console but I got the Error message.Click [here(https://docs.angularjs.org/error/$injector/modulerr?p0=app&p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs.org%2Fundefined%2F$injector%2Fnomod%3Fp0%3Dapp%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:6:453%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:20:119%0A%20%20%20%20at%20a%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:19:353)%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:20:14%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:28:434%0A%20%20%20%20at%20Array.forEach%20(%3Canonymous%3E)%0A%20%20%20%20at%20q%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:7:261)%0A%20%20%20%20at%20e%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:28:374)%0A%20%20%20%20at%20Xb%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:32:427)%0A%20%20%20%20at%20c%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.0%2Fangular.min.js:17:315)!
Change your app.js code as follows,
var app = angular.module('app',[]);
app.controller('MainController',function($scope){
$scope.value="This is Angular";
});
DEMO
var app = angular.module('app',[]);
app.controller('MainController',function($scope){
$scope.value="This is Angular";
});
<html ng-app="app">
<body>
<div ng-controller="MainController">
{{ value }}
<h1>Hello, world</h1>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</body></html>
I have a really simple Angular.js Hello World application. When I include version 1.2.0 the application works but when I include 1.4.7 the application does not work.
<body ng-app>
<!-- works with 1.2.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!-- Does not work with with 1.4.7 -->
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script-->
<div ng-controller="AppCtrl">
Hello {{name}}
</div>
<script type="text/javascript">
var app = angular.module('app',[]);
function AppCtrl($scope) {
$scope.name = 'Sally';
}
</script>
</body>
Can someone help me with what might be wrong here?
thanks
That format is no longer supported from 1.3.x
You have to complete process in order to continue
Like this
<body ng-app='app'>
<!-- works with 1.2.0 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<!-- Does not work with with 1.4.7 -->
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script-->
<div ng-controller="AppCtrl">
Hello {{name}}
</div>
<script type="text/javascript">
var app = angular.module('app',[]);
function AppCtrl($scope) {
$scope.name = 'Sally';
}
app.controller("AppCtrl",AppCtrl);
</script>
</body>
I am new to Angularjs so i made one example to call a controller but i am not able to call controller ...
this is my sample code
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="angularjs/angular.min.js"></script>
</head>
<body ng-app="">
<div data-ng-controller="mycontroller">
</div>
<script>
function mycontroller($scope, $http) {
alert("alert");
}
</script>
</body>
try this
<body ng-app="learning">
<div data-ng-controller="mycontroller">
</div>
<script>
angular.module("learning", [])
.controller("mycontroller", function($scope, $http) {
alert("alert");
});
</script>
</body>
You can try this, but I recommend you to read angular tutorials to understand how controllers and binds works.
http://www.w3schools.com/angular/
https://docs.angularjs.org/tutorial
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="mycontroller" ng-init="initMethod()">
<!--<input type="text" ng-model="test"></p>
<div>{{test}}</div>-->
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
alert("alert")
$scope.initMethod = function(){
alert("alert from init");
}
});
</script>
</body>
</html>
I start with AngularJS. Try create easy app, but dont working.
<div class="col-md-10 editor" ng-controller="Editor">
{{hello}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="./js/script.js"></script>
script.js
var app = angular.module('myApp', []);
app.controller('Editor', function($scope) {
$scope.hello = "Hello!";
});
What am I doing wrong?
In console dont have errors.
You have to specify the app in your Html file as well.
Something like:
<body ng-app="myApp">
</body>
https://docs.angularjs.org/api/ng/directive/ngApp
Use this:
<html data-ng-app="myApp">
<head>
</head>
<body>
<div class="col-md-10 editor" ng-controller="Editor">
{{hello}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>
maybe, you must first load script.js
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="./js/script.js"></script>
<div class="col-md-10 editor" ng-controller="Editor">
{{hello}}
</div>