HTML code as below
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
<meta charset="utf-8">
<title>ng-cribs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="scripts/cribsController.js"></script>
</head>
<body ng-app="ngCribs" ng-controller = "cribsController">
<h1>{{ hello }}</h1>
</body>
</html>
02.app.js file
angular.module('ngCribs',['ui.boostrap']);
03.cribsController.js file
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.hello = 'Hellow world';
});
Problem
index file loads as {{ hello }} instead Hellow world
You may need to inject $scope into your controller like this:
angular
.module('ngCribs')
.controller('cribsController', ["$scope", function($scope){
$scope.hello = 'Hellow world';
}]);
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";
})
I am new in angularjs, so i try this script in Index.html like this:
<!DOCTYPE html>
<html lang="en" ng-app="DEMO">
<head>
<title></title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{HelloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.HelloMessage = "Hello Pejman";
}
</script>
</body>
</html>
but when i run this, it show {{HelloMessage}} instead of Hello Pejman , what is the problem?
EDIT : this is the tutorial:
You did not bootstrap angular module, that is why your code doesnt work. You must call ng-app in any HTML tag to notify Angular start in there. So all of the sub tags under the tag Angular declared will be able to use directives, scope, controller etc.
Please check here to understand how to create controller and use it : https://docs.angularjs.org/guide/controller
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<script src="angular.min.js"></script>
</head>
<body>
<h1 ng-app="demo" ng-controller="HelloWorldCtrl">{{HelloMessage}}</h1>
<script type="text/javascript">
var app = angular.module('demo', []);
app.controller('HelloWorldCtrl', function($scope) {
$scope.HelloMessage = "Hello Pejman";
});
</script>
</body>
</html>
My task is to show Hello, Angular! in the browser, using AngularJS.
This is my HTML:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Introduction to AngularJS Application</title>
<script src="Scripts/MyScripts/Example01Scripts.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
This is my JavaScript:
/// <reference path="../angular.js" />
var MainController = function ($scope) {
$scope.message = "Hello, Angular!";
};
And here's what I'm getting:
This is my expected result:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Introduction to AngularJS Application</title>
<script src="Scripts/MyScripts/Example01Scripts.js"></script>
</head>
<body ng-controller="MainController">
<h1>Hello, Angular!</h1>
</body>
</html>
The interpolation isn't functioning correctly. Why is this, and how can I fix it?
I have taken your code and updated it. You were missing the app name in ng-app. Click Run code snippet to see it working.
angular.module('myApp', []).controller('MainController', function($scope){
$scope.message = "Hello, Angular!";
});
<html ng-app="myApp">
<head>
<title>Introduction to AngularJS Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
On the HTML you're missing the Angular source code and your app name on ng-app directive.
On the JS you're missing the module declaration.
HTML should be something like
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Introduction to AngularJS Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="Scripts/MyScripts/Example01Scripts.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
and your Example01Scripts.js should be something like:
angular.module('MyApp', []).controller('MainController', function($scope){
$scope.message = "Hello, Angular!";
});
Looks like the module was missing. Have created a wee test script that will do what you wanted.
Code example here
Why is that when I run my Angular app, I don't get directive running?
Example code:
var app = angular.module("app",['mgcrea.ngStrap','layout.menu']);
app.controller('MainController', ['$scope','$timeout', function($scope,$timeout){
$timeout(function(){console.log("ready")});
}]);
var menu = angular.module('layout.menu', [])
.controller('MenuController', ['$scope', function($scope){
console.log("controller");
}])
.directive('menuDir', ['$window', function($window){
console.log("directive");
return function (scope, element) {
console.log("return directive");
};
}]);
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="assets/libs/bootstrap/dist/css/bootstrap.min.css">
<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="assets/libs/angular/angular.js"></script>
<script type="text/javascript" src="assets/libs/angular-strap/dist/angular-strap.js"></script>
<script src="assets/libs/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="MainController">
<div class="list-group mainmenu" id="mainmenu" ng-controller="MenuController"></div>
</body>
</html>
When I run the app, I get the controller output, but no output from directive. Why? How can I fix it?
Directives/Services/Factories in angularJs are lazily instantiated.
They will be processed only when we use them.
Use the menuDir directive in your markup, then you will see the console statement written inside your directive.
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>