I'm refactoring an old AngularJS project so it's less dumb and bad, separating controllers and exporting data with a factory rather than having all the data inside of one giant controller. I can't get very far, unfortunately, because my main controller isn't working. I've searched SO extensively and none of the issues I've seen matched mine. I also ran it by a senior dev and he couldn't find the issue. Any help is much appreciated. The app did work before my refactoring efforts.
My index.html:
<!DOCTYPE html>
<html ng-app="campSpots">
<head>
<meta charset="utf-8">
<title>Camp Spots</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="mainCtrl">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="components/main.ctrl.js"></script>
</body>
</html>
My factory:
(function(){
"use strict";
angular
.module("campSpots")
.factory("postFactory", function($http){
function getPosts(){
return $http.get('data/posts.json');
};
return {
getPosts: getPosts
};
})
})
And my controller, main.ctrl.js:
(function(){
"use strict";
angular
.module("campSpots")
.controller("mainCtrl", mainCtrl);
mainCtrl.$inject = ['$scope', '$http', 'postFactory'];
function mainCtrl($scope, $http, postFactory){
postFactory.getPosts().then(function(posts){
$scope.posts = posts.data;
})
}
})
You neglected to invoke the function in your IIFE for both the controller and factory.
They should go like this:
(function(){
///code
}());
That last () is missing in your code, so it's not actually running the code blocks.
Related
I am trying my first experiences with Angular, but I only get curly-braces for the angular expressions, even though the localhost server is running - it is the same on git pages..
Can anyone help me? Researching brings me more complex solutions such as stopping angluar displaying these braces on a more complex level, but I feel my question is very basic - but copying and testing as much as possible, I can't get it to work.
Below is the HTML:
<!DOCTYPE html>
<html ng-app="myFirstApp">
<head>
<meta charset="utf-8">
<script src="scripts/angular.min.js"></script>
<script src="scripts/app.js"></script>
<title>Hello Coursera</title>
</head>
<body>
<h1>Hello Coursera</h1>
<div ng-controller="MyFirstController">
{{$scope}}
</div>
</body>
</html>
The app.js in the same folder:
(function () {
'use strict';
angular.module('myFirstApp', [])
.controller('MyFirstController', funtion($scope) {
$scope.name = "simon";
});
})();
The angular.min.js file is located in the same folder and is downloaded directly.
Is this perhaps an old version or so?
Would really appreciate your help here.
Many thanks and best regards,
Simon
There are couple of mistakes in your code. First of all you dont write {{$scope}} in html . You directly write variable name like {{name}} then the function you spelled was wrong.
PFB the code and it will work for you.
(function () {
'use strict';
angular.module('myFirstApp', [])
.controller('MyFirstController', function($scope) {
$scope.name = "simon";
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myFirstApp">
<head>
<meta charset="utf-8">
<script src="scripts/angular.min.js"></script>
<script src="scripts/app.js"></script>
<title>Hello Coursera</title>
</head>
<body >
<h1>Hello Coursera</h1>
<div ng-controller="MyFirstController">
{{name}}
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="myApp">
<head></head>
<head>
</head>
<!-- ControllerAs syntax -->
<!-- Main controller with serveral data used on diferent view -->
<body ng-controller="MainCtrl as main" class="{{$state.current.data.specialClass}}" landing-scrollspy id="page-top">
<!-- Main view -->
<div ui-view></div>
<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-3.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- Anglar App Script -->
<script src="js/app.js"></script>
<script src="js/config.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services/myService.js"></script>
</body>
</html>
I have an angularJS app which was working fine before adding a service.
I am getting the following error.
myService.js:3 Uncaught Reference Error: myApp is not defined
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?
I am tying all the controllers to the module. I have also added the myService file to the index.html
Below is the code that I have in controller:
function MainCtrl($scope, $rootScope, $http, $state, myService){
};
angular
.module('myApp')
.controller('MainCtrl', MainCtrl)
.controller('FinalViewCtrl', FinalViewCtrl);
This is what I have in myService.js
'use strict';
myApp.factory('myService', ['$http', function($http) {
}]);
Let me know if I am missing anything?
Add the myapp variable initiation just above the service code.
var myapp = angular.module('myApp');
myApp.factory('myService', ['$http', function($http) {
}]);
Without the html, it will be hard to tell, but are you adding your JavaScript files in the correct order? You have to make sure that your file with angular.module('myApp') is loaded before any controllers or services. I've had the same error you have when adding my service before my app.
I have created a basic angular app, with self invoking function
(function(){})
When ever I am running the application it is throwing injector error, if I remove the above code, it is working fine, I have gone through many sites but unable to fix this, and why it is happening I am unable to understand.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<h1>Hello Plunker!</h1>
</body>
</html>
script.js:
(function(){
angular.module("myApp", [])
});
Demo
You need to have like this,
(function(){
angular.module("myApp", [])
})();
DEMO
I'm trying to understand what's going on here. The warning is self explanatory, and I realize that in the app, with the code and structure I have below, it runs the ng-view twice ('test' will be logged twice in the console, so of course angular is loaded twice!)....but why?
I've read every post I could find about it, and it seems to boil down to jQuery being loaded before angular.
If I leave out jQuery or if I load jQuery after angualr (which isn't good practice from what I understand), no problem. I'd like to have jQuery to support some functionality (specifically ui-sortable). And, although it doesn't seem to be actually causing any problems, I'd like to not have it running my ng-view twice.
Am I doing something structurally wrong, or am I missing an obvious way to fix this?
Update: Plunker of the issue (check the console)
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site Title</title>
</head>
<body ng-view>
<script type="text/javascript">
console.log('test')
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
<script type="text/javascript" src="app_simple.js"></script>
</body>
</html>
app_simple.js:
'use strict';
/**
* Configure client module
*/
var myApp = angular.module('myApp',
[
'ngRoute'
]);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/simple', {
templateUrl: 'components/simple/simple.html',
controller: 'SimpleCtrl'
})
.otherwise({
redirectTo: '/x'
})
});
myApp.controller('SimpleCtrl', ['$scope', '$log', '$http', function($scope, $log, $http){
}]);
simple.html:
My simple content
Ok, to summarize the help from the comments:
If jQuery is included, any <script> tags included WITHIN an ng-view will be evaluated twice. (Thanks #lossleader!).
My incorrect assumption in testing was that it was processing the entire template content twice when I tried moving the ng-view off the body onto a <div> because I saw the log message twice. It wasn't!
<body>
<div ng-view>
<script>console.log('duplicated if jQuery');</script>
</div>
</body>
So #Tom and #Wawy both had correct solutions. Either move the ng-view into a <div> or move the <script> tags into the <head> (outside of the ng-view).
i have same issue, and i fix it by loading JQuery before i load AngularJS
hope that works for you
I'm trying to display the configured values author and version in angular value service in html page.Version code is displayed fine but not the author name
Here is the html code
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<div>Author is : <span app-author></span></div>
<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
Here is the directive...
angular.module('myApp.directives', []).
directive('appVersion', ['version', function(version) {
return function(scope, elm, attrs) {
elm.text(version);
};
}])
.directive('appAuthor', ['author', function(author) {
return function(scope, elm, attrs){
elm.text(author);
};
}]);
And here is the service portion where author and version values are configured
angular.module('myApp.services', []).
value('version', '0.1')
.value('author','JIM');
The error i'm getting in developer console is
Error: Unknown provider: authorProvider <- author <- appAuthorDirective
Make sure you are loading those modules (myApp.services and myApp.directives) as dependencies of your main app module, like this:
angular.module('myApp', ['myApp.directives', 'myApp.services']);
plunker: http://plnkr.co/edit/wxuFx6qOMfbuwPq1HqeM?p=preview
bmleite has the correct answer about including the module.
If that is correct in your situation, you should also ensure that you are not redefining the modules in multiple files.
Remember:
angular.module('ModuleName', []) // creates a module.
angular.module('ModuleName') // gets you a pre-existing module.
So if you are extending a existing module, remember not to overwrite when trying to fetch it.