Hello I've been searching for reason why my code doesn't work but i can't find it. I've found similar question posted here but non help.
This is my code.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>AngularJs tests</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-controller="Ctrl">
<input type="text" ng-model="blog"><br>
<br>
{{blog}}
<script>
var app=angular.module('app',[]);
app.controller=('Ctrl', ['$scope',function($scope){
$scope.blog="text";
}]);
</script>
</body>
</html>
app.controller = ( ... ); is not valid syntax.
app.controller('Ctrl', ...);
Use this your controller changnge to
var app=angular.module('app',[]);
app.controller('Ctrl', ['$scope',function($scope){
$scope.blog="text";
}]);
Related
I'm going through a basic book for Angular, and it uses a controller to set up a field. However, I don't get the expected output. Searching here and elsewhere, it looks like I'm invoking it correctly, but something's not working. Anything obviously wrong? Anything else to try? Details below. Thanks.
Document html:
<html lang="en" ng-app ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title></title>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<h1>Hello, {{name || 'World'}}</h1>
<input type="text" ng-model="name">
</body>
controller.js:
function AppCtrl($scope) {
$scope.name = "World";
(function closing brace lost by code formatting)
Expected output is "Hello, World", but I get "Hello, {{name || 'World'}}"
You are missing the ng-app and the module in controller.
var app = angular.module('myApp', []);
DEMO
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope, $http) {
$scope.name = "World";
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<h1>Hello, {{name || 'World'}}</h1>
<input type="text" ng-model="name">
</div>
</body>
</html>
I have come across a lot of similar issues here on SF and did everything as expected. Yet, I can't seem to get this simple Angular app working. Console throws up this exception
angular.min.js:6 Uncaught Error: [$injector:modulerr]
AngularJS site docs gave some suggestions which I followed. Yet, I still get that same exception. Here is my code.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I have this in the App.js
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
I double checked file paths and other possibly obvious mistakes, but no joy.
I am definitely missing out something here? Thanks.
Your paths referencing the libraries and the app.js are wrong and in the wrong order . You should load the angular reference first and then the relative js referencing the module.
Change
From
<script scr="app\app.js"></script>
<script src="app\lib\angular.min.js"></script>
To
<script src="app/lib/angular.min.js"></script>
<script scr="app/app.js"></script>
DEMO
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Dead Simple Proj</title>
<link rel="stylesheet" href="content/css/styles.css">
<script type=" text/javascript " src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.js "></script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
</html>
I dont think you added your angular files properly. I made a plunker out of your code and it worked. you can cross check with my code.
var myApp = angular.module('myApp', []);
myApp.controller('GreetingController', function($scope) {
$scope.greeting = 'Hola!';
});
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="GreetingController">
<h1>Hello {{greeting}}!</h1>
</body>
</html>
I am new to web development, trying to learn angularjs, and got stuck at very first step, this code works fine when I remove ng-controller but in this condition the browser shows Hello, {{name}}.
What am I doing wrong?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="AppCtrl" >
<head >
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<meta character="uft-8">
<title></title>
</head>
<body>
<h1>Hello, {{name}}</h1>
<input type="text" ng-model="name">
</body>
</html>
controller.js
function AppCtrl($scope)
{
$scope.name: "world";
}
You are calling module named app which you didn't declared.
<html lang="en" ng-app="app" ng-controller="AppCtrl" >
If you provide module name then controller have to bind with that module.
To assign a value you have to use = not :
$scope.name: "world";
Try Like this
$scope.name= "world";
Moreover Global controller isn't allowed from 1.3.x
Try like this
var app = angular.module("app", []);
app.controller("AppCtrl", function($scope) {
$scope.name= "world";
});
JSFIDDLE
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
my code my controller:
App.controller('TestCtrl', function ($scope, $http) {
console.log("CTRL STARTED");
if (angular.isDefined($scope.test)) <--------------- ERROR
{
alert('UNDEFINITA');
LoadDefault();
};
My HTML
<select class="form-control" ng-options="people.id as people.name for people in peoples" ng-model="test" ng-change="LoadAnotherSelect()">
<option value="">Seleziona azienda...</option>
</select>
How to know if test variable is undefined????
Thank's in advanced
your code seems fine,
what error are you getting?
as you can see, this code works, using angular.isDefined($scope.name):
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
if (angular.isDefined($scope.name)) {
alert($scope.name);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
</body>
</html>