I have this main application called dashboard and I want to inject a custom made module called core.
I keep getting this injection error and I have no idea why. I am following a template that my co-worker has and it is pretty much word for word so I do not know why it is not working for me.
app.js
(function(){
'use strict';
var dependencies = [
'ngRoute',
'core'
]; // all our modules
angular.module('dashboard', dependencies).config(Config); //.config(Config);
Config.$inject = ['$locationProvider'];
function Config($locationProvider){
$locationProvider.hashPrefix('!');
}
angular.element(document).ready(function(){
angular.bootstrap(document, ['dashboard']);
});
})();
layout.hbs
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel='stylesheet' href='/javascripts/bootstrap/dist/css/bootstrap.css' />
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div class="flud-container">
{{{body}}}
</div>
</body>
<!-- JS Libraries -->
<script type='text/javascript' src='/lib/jquery/dist/jquery.min.js'></script>
<script type='text/javascript' src='/lib/bootstrap/dist/js/bootstrap.min.js'></script>
<script type='text/javascript' src='/lib/angular/angular.min.js'></script>
<script type='text/javascript' src='/lib/angular-route/angular-route.min.js'></script>
<script type='text/javascript' src='/modules/core/core.client.module.js'></script>
<script type='text/javascript' src='/modules/core/config/core.client.routes.js'></script>
<script type='text/javascript' src='/app.js'></script>
</html>
core.client.module.js
(function(){
'use strict';
// var dependencies = [
// ];
angular.module('core', []);
angular.module('core').run(intialize);
initialize.$inject = ['$rootScope', '$location'];
function intitialize($rootScope, $location){
//initialize module's variables here
}
});
console error:
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=dashboard&p1=Error%…(http%3A%2F%2Flocalhost%3A3000%2Flib%2Fangular%2Fangular.min.js%3A20%3A463)
As you were using IIFE pattern for restricting the scope of code, you should invoke function of core.client.module.js immediately to core module get available.
core.client.module.js
(function(){
//---- code here-----//
})(); //<---invoke the function
Related
I am using WAMP and under my www folder i have a folder called ng-cribs.
the index has the following code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
<script src="scripts/cribsController.js"></script>
<head>
<title>ng-cribs</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body ng-app="ngCribs" ng-controller="cribsController">
<h1> {{hello}} </h1>
</body>
</html>
Then i have a app.js file in the same folder with the following code
angular.module('ngCribs, ['ui.bootstrap']);
Then lastly a controller file under a new folder called scripts nad the file name is cribsController with the following code
angular
.module('ngCribs')
.controller('cribsController'), function(&scope){
$scope.hello = 'hello world!'
});
However my result is {{Hello}} instead of displaying what is in the controller
In the controller function, you must use $ instead of &.
angular
.module('ngCribs',[])
.controller('cribsController', function($scope){
$scope.hello = 'hello world!'
});
You should declare syntax as below
angular
.module('ngCribs').controller('cribsController', ['$scope', function($scope) {
$scope.hello = 'hello world!'
}]);
instead of
angular
.module('ngCribs')
Results in closing the controller without declaring its dependencies and
injections.
.controller('cribsController'), function(&scope){
$scope.hello = 'hello world!'
});
I'm working with Jasmine to do tests on my angular app.
I'm am trying to test a function called calculateAverageAge which is defined in an angular factory called sharedFactory and it is telling me that sharedFactory is undefined.
ReferenceError: sharedFactory is not defined
I've included all the src files. Is there anything I'm missing?
Note: it's working in the actual app but not in the spec. Thanks
Jasmine suite
describe("SharedFactory", function () {
it("should calcuate the average age from an array of ages", function () {
var ageArray = [1,6,9,23,33,62,63,4,5];
var averageAge = sharedFactory.calculateAverageAge(ageArray);
expect(averageAge).not.toBeLessThan(1);
expect(averageAge).not.toBeGreaterThan(120);
});
});
SharedFactory.js
agesApp.factory('sharedFactory', function($http, loginFactory) {
return {
calculateAverageAge: function(ageArray){
var sumOfAges = 0;
var numberofAges = ageArray.length;
ageArray.forEach(function(age) {
sumOfAges += age;
});
var averageAge = sumOfAges/numberofAges;
return averageAge;
}
};
});
SpecRunner.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.6.1</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.6.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.6.1/jasmine.css">
<script src="lib/jasmine-2.6.1/jasmine.js"></script>
<script src="lib/jasmine-2.6.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.6.1/boot.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/angular-touch.min.js"></script>
<!-- include source files here... -->
<script src="../modules/agesApp.js"></script>
<script src="../factories/loginFactory.js"></script>
<script src="../factories/sharedFactory.js"></script>
<!-- include spec files here... -->
<script src="spec/SharedFactorySpec.js"></script>
</head>
<body>
</body>
</html>
See the code here: http://plnkr.co/edit/xIRiq10PSYRsvNE0YWx7?p=preview.
I'm getting the following 2 errors.
Route must provide either a path or regex property
[$compile:ctreq]
http://errors.angularjs.org/1.5.3/$compile/ctreq?p0=ngOutlet&p1=ngOutlet
index.html
<!DOCTYPE html>
<html ng-app="favMoviesList">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js</script>
<script src="https://unpkg.com/#angular/router#0.2.0/angular1/angular_1_router.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script src="module.js"></script>
<script src="movies-list-component.js"></script>
<script src="movie-rating-component.js"></script>
<script src="movie-app-component.js"></script>
</head>
<body>
<movie-app></movie-app>
</body>
</html>
module.js
(function(){
var module = angular.module("favMoviesList",["ngComponentRouter"]);
module.value("$routerRootComponent","movieApp");
module.component("appAbout",{
template:"This is about page"
});
}());
movie-app-component.js
(function(){
var module = angular.module("favMoviesList");
module.component("movieApp",{
templateUrl:"movie-app-component.html",
$routeConfig:[
{ path:"/list",component:"movieList",name:"List"},
{ path:"/about",component:"appAbout",name:"About"},
{ paht:"/**", redirectTo:["List"] }]
});
}());
You made a typo: paht should be path.
The second error is because your controller 'ngOutlet', required by directive 'ngOutlet', can't be found.
Here is the structure:
Here are the sources:
/* #flow */
"use strict";
(function () {
const app = angular.module('Lesson2', ['ngRoute', 'ngAnimate'] );
app.config(function($routeProvider){
$routeProvider
.when('/what', { controller:'FavoCtrl', templateURL:'pages/what.html'})
.when('/where', { controller:'FavoCtrl', templateURL:'pages/where.html'})
.otherwise({redirectTo:'/what'});
});
app.controller('FavoCtrl', function ($scope) {
$scope.favouriteThings=[
{what:'raindrops', by:'on', where:'roses'},
{what:'whiskers', by:'on', where:'mittens'},
{what:'Brown paper packages', by:'tied up with', where:'strings'},
{what:'schnitzel', by:'with', where:'noodles'},
{what:'Wild geese', by:'that fly with', where:'the moon on their wings'},
{what:'girls', by:'in', where:'white dresses'},
{what:'Snowflakes', by:'that stay on', where:'my nose and eyelashes'}
];
})
})();
<!DOCTYPE html>
<html ng-app="Lesson2">
<head lang="en">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="scripts/app.js"></script>
<meta charset="UTF-8">
<title>Lesson 2</title>
</head>
<body>
Hello!
<ng-view></ng-view>
</body>
</html>
And two "what.html" and "where.html" are plain texts, like This is "where.html"
The hardest thing here is that browser does not throw any error, console is clean. Views are not loaded, all I see is "Hello" of "index.html"
Seems like you have a typo, in your config block, use templateUrl instead of templateURL.
It should look like:
app.config(function($routeProvider){
$routeProvider
.when('/what', { controller:'FavoCtrl', templateUrl:'pages/what.html'})
.when('/where', { controller:'FavoCtrl', templateUrl:'pages/where.html'})
.otherwise({redirectTo:'/what'});
});
First you have a typo in your route configuration, it is "templateUrl" and not "templateURL".
If this doesn't solve your problem try adding the controller in your index.html
<html ng-app="Lesson2" ng-controller="FavoCtrl">
I have an AngularJS app. I want this app to run both in the browser and be able to distribute it with PhoneGap. In an attempt to do this, I have the following code:
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/app/app.js"></script>
</head>
<body>
...
<script type="text/javascript">
if (window.location.protocol === "file:") {
document.addEventListener('deviceready', startApp, false);
} else {
startApp();
}
</script>
</body>
</html>
app.js
function startApp() {
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function() {
...
});
myApp.run(function() {
...
});
}
controller.js
"use strict";
myApp.controller('MyController', function($rootScope, $scope, $location) {
...
});
myApp.controller('MyOtherController', function($rootScope, $scope, $location) {
...
});
...
If I add controllers.js after app.js in the head tag, I get an error that says:
Uncaught ReferenceError: myApp is not defined
This is happening because I'm manually bootstrapping the AngularJS app. I need to manually bootstrap it because of my need to startApp. For this reason, I need a way to dynamically load controllers.js from within startApp. Yet, I'm not sure how to do that. Can anyone provide some help?
THank you
you have missed ng-app="" attribute in html tag...
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script type="text/javascript" src="/app/app.js"></script>
</head>
<body>
...
<script type="text/javascript">
if (window.location.protocol === "file:") {
document.addEventListener('deviceready', startApp, false);
} else {
startApp();
}
</script>
</body>
</html>
Why don't you give requirejs a try?
He has a strong dependency management based loader and will avoid issues like this.
First thing first: To initialize your app angular module its require angular-route.js with angular.js file and these js file should be loaded before your app js.
<head>
<script type="text/javascript" src="/app/angular.js"></script>
<script type="text/javascript" src="/app/angular-route.js"></script>
<script type="text/javascript" src="/app/app.js"></script>
</head>