I try to display some variable of my controller, but the output is just {{UserCtrl.user}} instead of the content of UserCtrl.user.
I got the following file structure:
index.html
scripts/app.js
This is the code of index.html:
<!doctype html>
<html lang="en" ng-app="birdsnest">
<head>
<meta charset="utf-8">
<title>Birdsnest</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.css">
</head>
<body>
<div ng-controller="UserController as UserCtrl">
{{UserCtrl.user}}
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
scripts/app.js:
(function() {
var app = angular.module('birdsnest', []);
app.controller('UserController', ['scope', function($scope) {
$scope.user = 'Michael';
}]);
})();
Change this line:
app.controller('UserController', ['scope', function($scope) {
To:
app.controller('UserController', ['$scope', function($scope) {
Edit:
If you're using controllerAs then I think you should rewrite your code:
app.controller('UserController', function() {
this.user = 'Michael';
});
When you're using the ControllerAs syntax in your HTML, the values that end up getting bound to the controller instance is actually on your this object.
What this means is that your code that attaches user to the scope object is incorrect; instead you should do the following:
app.controller("UserController", function() {
this.user = "Michael";
});
Related
What is wrong here? I've scoured StackOverflow, read Angular and PHP manuals, and attempted to use some code that other people used, and still nothing has solved the problem.
I cannot figure out why there is no response data and why the {{user.variable_names}} are unresolved, nothing is showing up when I run the code. I have debugged as much as possible, but still not luck.
MarketController.js
var OrchidApp = angular.module('OrchidApp', ['ui.router', 'ngCookies']);
OrchidApp.controller('MarketController', function ($http, $scope) {
$http.get('market.php')
.then(function (response) {
$scope.users = response;
});
});
Market.php
<?php
include 'dbConfig.php';
$sel = mysqli_query($con,"select * from Chef");
if (!$sel) {
printf("Error: %s\n", mysqli_error($con));
exit();
}
$data = array();
while ($row = mysqli_fetch_array($sel)) {
$point = array("fullname"=>$row['fullname'],"city"=>$row['city'],"state"=>$row['state'],"zip_code"=>$row['zip_code'],"rating"=>$row['rating']);
array_push($data, $point);
}
echo json_encode($data);
index.html
<!doctype html>
<html lang="en" data-ng-app="OrchidApp">
<head>
<meta charset="utf-8">
<base href="/">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Orchid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body class="container">
<div>
<table>
<tr ng-repeat="user in users" data-ng-controller="MarketController">
<td>{{user.fullname}}</td>
<td>{{user.city}}</td>
<td>{{user.state}}</td>
<td>{{user.zip_code}}</td>
<td>{{user.rating}}</td>
</tr>
</table>
</div>
<!-- Libraries -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-cookies.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
<!-- App Scripts -->
<script src="../server.js"></script>
<script src="../marketControllers.js"></script>
<script src="../dbHelpers/market.php"></script>
</body>
</html>
If this is your plain code, you are missing, at least, the angular bootstrap. In other words you need to initialize your angular app by automatic or manual process.
If you want automatic initialization, just put something like this in your html tag:
<html ng-app="optionalModuleName" ng-strict-di>
Or if you want to do it manual, you can do this:
angular.module('myApp', [])
.controller('MarketController', ['$scope', function ($scope) {
...
}]);
angular.element(function() {
angular.bootstrap(document, ['myApp']);
});
Also, you should check if the response exists or not so you don't get unexpected results
Check here for more info about bootstrap angular:
https://docs.angularjs.org/guide/bootstrap
Your response is the response.object, if you want to get the body, you have to use the data-Property like this:
var OrchidApp = angular.module('OrchidApp', ['ui.router', 'ngCookies']);
OrchidApp.controller('MarketController', function ($http, $scope) {
$http.get('market.php')
.then(function (response) {
$scope.users = response.data;
});
});
I have following code in my app.js in root directory /app.js
angular.module("ngClassifieds",[])
.controller("classifiedsCtrl", function($scope) {
$scope.name = "shekhar";
});
Currently this is working fine, then i shift my controller inside new directory components/classifiedCtrl.js like this
below is my app.js file
angular.module("ngClassifieds",[]);
below is my controller inside components/classifiedCtrl.js
(function () {
"use strict";
angular.module("ngClassifieds")
.controller("classifiedsCtrl", function($scope) {
$scope.name = "shekhar";
});
}) ();
Now it is gives me the error Error: [ng:areq] Argument 'classifiedsCtrl' is not a function, got undefined
I am using angular version 1.5.7
below is my index.html file
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app = "ngClassifieds" ng-controller="classifiedsCtrl">
<h1>{{name}}</h1>
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
You need to include your controller file below app.js
<script src="scripts/app.js"></script>
<script src="scripts/components/classifiedCtrl.js"></script>
I am new to AngularJS. I am trying to use ng-include but it does not show the html files which I refered.
app.js code
var app = angular.module('myApp', []);
app.controller('mainCtrl', [$scope, function($scope)
{
$scope.templateID = 'testing1.html';
$scope.changeTemplateID = function($scope){
$scope.templateID = 'testing2.html';
}
}]);
index.html file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<ng-include src="templateID"></ng-include>
<h1>Hello Plunker!</h1>
<p ng-click="changeTemplateID()">next</p>
</body>
</html>
There are two html file in the root directory. They are called testing1.html and testing2.html. I even tried to refer them directly like "'testing1.html'" in the ng-include.
but no success. Any help?
Two errors in your JS code:
var app = angular.module('myApp', []);
// vvvvvvvv must be a string
app.controller('mainCtrl', ['$scope', function($scope)
{
$scope.templateID = 'testing1.html';
// you don't need to pass $scope here:
$scope.changeTemplateID = function(){
$scope.templateID = 'testing2.html';
}
}]);
Plunker for your perusal.
app.controller('mainCtrl', [$scope, function($scope)...
Your [$scope must be ['$scope' like a string, change it and you'll be fine )
I am new to AngularJS and JavaScript in general and need some help trying get a JavaScript variable into my AngularJS controller. Here is my html page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="test">
<head>
<meta charset="utf-8" />
<title>Test</title>
<!--Third party scripts-->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-sanitize.min.js"></script>
<!--Custom scripts-->
<script type=" text/javascript" src="app/test.js"></script>
<!--Third party style sheets-->
<link type="text/css" rel="stylesheet" href="css/test.css" />
</head>
<body>
<div id="page" ng-controller="PageCtrl">
<ul>
<li ng-click="print(gBool)">Print</li>
</ul>
</div>
</body>
</html>
<script>
var gBool = false;
window.onload = function () {
gBool = true;
};
</script>
Here is the AngularJS code:
var app = angular.module('test', []);
app.controller('PageCtrl', ['$scope', function ($scope) {
$scope.print = function (boolParam) {
console.log(boolParam);
};
}]);
This just prints out 'undefined' in the console when it executes. Is this something that should work?
You need to do it in the "angular" way by using $window:
var app = angular.module('myapp', []);
app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {
$scope.memId = $window.memId;
}]);
In this line:
<li ng-click="print(gBool)">Print</li>
You are referencing a variable gBool in your scope, so its $scope.gBool
If you define in your JavaScript instead in your html, will work.
$scope.gBool = true;
Also, lookup $window and use it from your controller like this:
app.controller('PageCtrl', ['$scope', '$window', function ($scope, '$window') {
$scope.gBool = false;
$window.onload = function() {
$scope.gBool = true;
};
$scope.print = function (boolParam) {
console.log(boolParam);
};
}]);
There are two Things to focus
(i)You need to initialize the variable you can use the ng-init
(ii) Declare a function to assign the bool value initially
Here is the working Application
Searched far and wide, most of the answers were "you forgot to include your controller".
"Error: [ng:areq] Argument 'AdamState' is not a function, got undefined"
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Adam Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="Scripts/AdamState.js"></script>
</head>
<body ng-app="">
<div ng-controller="AdamState">
</div>
</body>
</html>
JS:
function AdamState($scope, $http) {
$scope.test = 1;
}
Also, when calling that function from the console it will be called.
Angular 1.3+ global controller functions are turned off.
So you need to bind your controller to module,
Controller
var app = angular.module('app',[])
app.controller('AdamState',[`$scope`, `$http`, AdamState])
function AdamState($scope, $http) {
$scope.test = 1;
}
Or you need to declare controller as global controller then do allow global controller function manually form app.config() that is in angular config phase, the below code will make your code working.
CODE
app.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
Thanks.
You miss lots of code there, this should eventually help you get started:
var myApp = angular.module("myApp", []);
myApp.controller("AdamStateCtrl", function($scope) {
$scope.test = 1;
});
<!DOCTYPE html>
<html>
<head>
<title>Adam Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="Scripts/AdamState.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="AdamStateCtrl">
{{test}}
</div>
</body>
</html>