I know this question is a bit redundant and there are a ton of resources out there, but I have been at this for over a day now and I just cant see what I am doing wrong.
Edit*
I was wondering if I was having a problem with the CORS feature, so I hosted a subdomain and added support for this test subdomain...Still no data showing up...
http://test.spcomputerclub.com/news/
http://api.spcomputerclub.com/Help/Api/GET-Api-Forums
app.js
var myApp = angular.module('myApp', [
'myControllers',
'myServices'
]);
controller.js
var myControllers = angular.module('myControllers', []);
myControllers.controller('myControllers', ['$scope', 'ForumIndexItem', function ($scope, ForumIndexItem) {
$scope.data = {};
ForumIndexItem.query(function(response){
$scope.data.issues = response;
});
}]);
service.js
var myServices = angular.module('myServices', ['ngResource']);
myServices.factory('ForumIndexItem', function ($resource) {
return $resource('http://api.XXXXXXXX.com/Api/Forums', {})
})
html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Practice</title>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body>
<ul>
<li ng-repeat="ForumIndexItem in data.issues">
<p>{{ForumIndexItem.ForumName}}</p>
</li>
</ul>
</body>
</html>
Related
I have newly started learning AngularJS. When I am running the application it is not showing the data to the view.
Here is my html page.
index.html:
<!DOCTYPE html>
<html ng-app="tutorialApp">
<head>
<meta charset="utf-8">
<title>Angular Tutorial</title>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
</head>
<body ng-controller="TutorialCtrl">
<h1>{{tutorialObject.title}}</h1>
<h2>{{tutorialObject.subTitle}}</h2>
<hr/>Number: {{2+2}}
<p>{{tutorialObject.bindOutput}}</p>
</body>
</html>
app.js:
var app = angular.module('tutorialApp', ['tutorialCtrlModule']);
tutorialCtrl.js:
angular.module('tutorialCtrlModule', [])
.controller('ToturialCtrl', ['$scope', function($scope){
//Code
$scope.tutorialObject = {};
$scope.tutorialObject.title = "Angular Tutorial";
$scope.tutorialObject.subTitle = "Basic";
$scope.tutorialObject.bindOutput = 2;
}]);
I could not even understand what could be the wrong thing i have done.
I am attaching the screenshot below:
You need to change the order of controller as tutorialAppp is dependent on tutorialCtrlModule
<script src="js/controllers/tutorialCtrl.js"></script>
<script src="js/app.js"></script>
EDIT:
You have made another typo mistake in the html, controller name as "TutorialCtrl" whereas it should be ToturialCtrl
Here is the working DEMO
I'm starting learning Angular.js with this book "Angular.js OReilly", I am trying to construct the first examples that they have. I already downloaded Angular.js from the website and create my controller.js like it says, but I always get the error in the title.
This is what I did:
<html ng-app>
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
You need to put HelloController between tag inside tag.
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
<script>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
</script>
</head>
Why are you using so old syntax? Try to start with new syntax you can do your above requirement like below code:
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);//creating app
myApp.controller('GreetingController', ['$scope', function($scope) { // creating controller
$scope.greeting = 'Hola!';
}]);
</script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
First you have to make app then make a controller. try this
I am new to angularjs and I want to know why it isn't working.
The code has a flaw and am not sure about the same.
Thinking from java perspective,httpController defined has nested function defined inside.
Here it is my code
index.html
<!DOCTYPE html>
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myapp" ng-controller="HelloController">
<h2>{{message}}</h2>
</div>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName:{{user.name}}</div>
</div>
</body>
</html>
Script.js
var app = angular.module("myapp", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, AngularJS";
});
var httpApp=angular.module("httpService",[]);
httpApp.controller("httpController",function($scope,$http){
var onUserComplete=function(response){
$scope.user=""response.data"";
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
}
);
Only one ng-app will be automatically bootstrapped on your page. That's why if you remove the first ngApp directive, the second one will work.
var httpApp = angular.module("httpService", []);
httpApp.controller("httpController", function($scope, $http) {
var onUserComplete = function(response) {
$scope.user = response.data;
}
$http.get("https://api.github.com/users/rob").then(onUserComplete);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="httpService" ng-controller="httpController">
<div>FirstName: {{user.name}}</div>
</div>
NOTE: You have a typo in your callback, remove ""s around your response.data. Also, since you are using Angular 1.5.6, you don't need to specify dependencies/inject your $http service to make your code work.
https://plnkr.co/edit/LyWCLeBeyHPzjys3LOcr?p=preview
<body ng-app="httpService">
<div ng-controller="httpController">
<div>FirstName: {{user.key}}</div>
</div>
</body>
This link is working fine...just try it out
Do not use ng-app more than once in your program...Your code would not work
With the code below, I see my button (angular 1.3.15, DevExtreme 15.1.4)
HTML :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Testing</title>
<link href="Content/dx.common.css" rel="stylesheet" />
<link href="Content/dx.light.css" rel="stylesheet" />
</head>
<body>
<script src="/Scripts/jquery-1.11.3.min.js"></script>
<script src="/Scripts/jquery.globalize/globalize.js"></script>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-sanitize.min.js"></script>
<script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Scripts/dx.webappjs.js"></script>
<script src="/app/app.js"></script>
<div ng-controller="myCtrl">
<div dx-button="{text: 'Test Button'}"></div>
</div>
</body>
</html>
app.js file :
var myApp = angular.module('myApp', ['dx']);
(function () {
angular.module('myApp')
.controller('myCtrl', ['$scope','dx', myCtrl]);
function myCtrl($scope, dx) {
var vm = this;
}
}());
I see the button and no error but when I add the controller in the div :
<div ng-controller="myCtrl">
<div dx-button="{text: 'Test Button'}"></div>
</div>
I get this error :
Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=dxProvider%20%3C-%20dx%20%3C-%20myCtrl
R/<#http://localhost:51314/Scripts/angular.min.js:6:417
You are attempting to inject the dx module into your myCtrl controller. Try removing it:
var myApp = angular.module('myApp', ['dx']);
(function () {
angular.module('myApp')
.controller('myCtrl', ['$scope', myCtrl]);
function myCtrl($scope) {
var vm = this;
}
}());
For future reference, following the link given in an Angular error can help reveal problems like these.
Hi I am having trouble with this tutorial. I copied over the code but for some reason it is not working.
This is the html code
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller = "MyController">
<h1>{{ person }}</h1>
and their name:
<h2> {{person.name}}</h2>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
and here is the JS
var app = angular.module('app', []);
app.controller('MyController', function($scope) {
$scope.person = {
name: "Ari Lerner"
};
});
It doesn't look like the AngularJS code is being recognized. Any ideas?
Your app name in the module definition:
var app = angular.module('app', []);
doesn't match the one you reference in your dom:
<div ng-app="myApp">
Change your module definition to:
var app = angular.module('myApp', []);