just for learning purpose--
index.html
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="ctrl.js"></script>
</head>
<body ng-app="abc">
<h1 ng-controller="ctrl">{{data}}</h1>
</body>
</html>
script.js
angular.module('abc', []);
ctrl.js
angular.module('abc').controller('ctrl',function($scope){
$scope.data="hello";
});
js fiddle link
it showing error... what i ve done wrong here???
You named your controller file wrongly.
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="cntrl.js"></script>
</head>
Related
can anyone point the mistake as to why i am unable to read the data from the controller ?
Link to plunker
Plunker
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js.1.3#*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1> {{ message }} </h1>
</body>
</html>
// Code goes here
// Code goes here
var MainController = function($scope) {
$scope.message = "Hello";
};
Where is the ng-app name ? Provide module name.
angular.module('myApp',[])
.controller('SomeCtrl',function($scope){ .. your code ...})
Provide it in .html file
<html ng-app="myApp">
Fixed your Plunkr
You are referring to older version of AngularJS for learning and using 1.5 in plunkr. Check the below link
For your app, refer
this link
and this one too
While your code may be correct, but it is prior to the versions 1.3.0
Versions Before 1.3.0:
Prior to 1.3.0, angular was able to automatically discover controllers
that were defined globally.
Check Below I have created without module
<div ng-app>
<div ng-controller="MainController">
{{message}}
</div>
</div>
The code can be:
var MainController = function($scope) {
$scope.message = "Hello";
};
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.32/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}} </h1>
</body>
</html>
Plunker version prior to 1.3.0
Versions After 1.3.0:
You can use $controllerProvider.allowGlobals() to enable that behaviour.
allowGlobals allows $controller to find controller constructors on
window
angular.module("ng").config(function($controllerProvider){
$controllerProvider.allowGlobals();
});
var MainController = function($scope) {
$scope.message = "Hello";
};
<!DOCTYPE html>
<html ng-app>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
function MyController() {}
</script>
</head>
<body ng-controller="MainController">
<h1>{{message}} </h1>
</body>
</html>
Plunker with versions after 1.3.0
Note: I personally recommend to use the latest versions with modules
and ng-app="app" format.
angular.module('myApp',[])
.controller('MainController',function($scope){ .. your code ...})
Here you go!!
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js.1.3#*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1> {{ message }} </h1>
</body>
</html>
// Code goes here
script.js
angular.module('app',[]).controller('MainController',function MainController($scope) {
$scope.message = "Hello";
})
this is html file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>BlogIt!</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="myCtrl">
{{message}}
</body>
</html>
this is js file
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.message = "Welcome to BlogIt!";
})
Edit with this :
<head>
<title>BlogIt!</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{message}}
</body>
i've got 'app.js' with
var myApp = angular.module('myModule', []);
myApp.controller("myController",function($scope){
$scope.message = 'message';
});
and html
<html ng-app="myModule">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-controller="myController">
<p>{{ message }}</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/static/app.js"></script>
</html>
And i've got no idea why data from the scope object does not show. All files are included properly
could you add all these cdn and your js files, inside to head / body tag !!
You should all your script inside head/body.
Check this working sample:
<html ng-app="myModule">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div ng-controller="myController">
<p>{{ message }}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
https://plnkr.co/edit/jLH0mVhX8shBWvI90b2i?p=preview
i'm running it using XAMPP but it's not working and showing output of {{"Hello"+"you"}} rather than Hello you
<!DOCTYPE HTML>
<html>
<head ng-app="store">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="angular.min.js">
</script>
<script >
var abc=angular.module('store',[]);
</script>
<p>
{{"Hello"+"you"}}
</p>
</body>
</html>
First, you should create a controller in your JS, then you use it in your view.
You can do it setting the ng-controller directive, as below:
<!DOCTYPE html>
<html ng-app="store">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('store', [])
.controller('storeCtrl', function($scope) {
});
</script>
</head>
<body ng-controller="storeCtrl">
<p>
{{"Hello"+"you"}}
</p>
</body>
I am calling an underscore _.map having a function, but I want the results in a paragraph. How can I achieve it?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body>
<p> </P>
<script>
_.map([1,2,3],function(e){return e*3;});
</script>
</body>
</html>
The results must print inside my paragraph.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body>
<p><script>
_.map([1,2,3],function(e){document.write(e*3);});
</script></p>
</body>
</html>
Update to accommodate comment request
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
</head>
<body>
<p id="target"></p>
<script>
_.map([1,2,3],function(e){
document.getElementById('target').innerHTML=(e*3);
});
</script>
</body>
</html>