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>
Related
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>
I am following a tutorial but stuck on one issue. I don't know what I am missing here.
//script.js
var MainController = function($scope)
{
$scope.message = "Hello!!!!";
};
<!-- index.html -->
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#1.3.4" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Problem is -
The message is not binding.
Create your module first, then add the controller to the module, specify both the app and controller in your HTML portion.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.3.4" data-semver="1.3.4" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script>
var app = angular.module('app',[]);
var MainController1 = function($scope)
{
$scope.message = "Hello!!!!";
};
app.controller("MainController1", MainController1);
</script>
</head>
<body ng-controller="MainController1">
<h1>{{message}}</h1>
</body>
</html>
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>