Load JavaScript at Runtime in AngularJS - javascript

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>

Related

$injector:modulerr Injecting Custom Module Into Angular App

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

ReferenceError: random is not defined at Scope.$scope.generateRandom angular js

For some reason it gives me the error:
ReferenceError: random is not defined at Scope.$scope.generateRandom
I dont know what im doing wrong, you can go check out the website im using to do this HERE.
index.html:
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" />
<title>Basic Login Form</title>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
<script type="text/javascript" src="script23.js"></script>
</head>
<body ng-app = "app" ng-controller = "app">
<button ng-click = "generateRandom()">Generate Random Number</button>
<br> {{randomNumber}}
</body>
</html>
script23.js:
var app = angular.module('app', []);
app.service('random', function(){
var randomNum = Math.floor(Math.random()*10)
this.generate = function(){
return randomNum;
}
});
app.controller('app' , function($scope){
$scope.generateRandom = function(){
alert("Something")
$scope.randomNumber = random.generate();
}
})
To use service in controller, you need to inject it.
app.controller('app', function ($scope, random) {
I'd recommend you to use following syntax:
app.controller('app', ['$scope', 'random', function ($scope, random) {
See Why we Inject our dependencies two times in angularjs?
Change your controller like this, since you are using the service 'random'
myApp.controller('app', ['$scope','random', function( $scope,random)
{
$scope.generateRandom = function(){
alert("Something")
$scope.randomNumber = random.generate();
}
}])
Here is the working Application

Can't make Angular.js to work

I'm trying to learn Angular.js. I set up a simple page, in which I want to display a message from my script file. Here's the HTML structure:
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
And this is my script.js:
var MainController = function($scope){
$scope.message = "my message";
};
I'm supposed to see the words my message on the page, but instead I'm seeing literally {{message}}. I tried to wrap the JS code in self-envoking function:
(function() {
var MainController = function($scope) {
$scope.message = "my message";
};
}());
But it didn't have any result.
What am I doing wrong?
It's old syntax and you cannot declare controller like that. Now you need to register controller on your module.
angular.module('anyModuleName',[]).controller('yourControllerName',function(){
});
and also edit to ng-app="anyModuleName" where you initialize your app. In your case <html ng-app="anyModuleName">

Angularjs Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0

I am trying simply read qr code by web camera but I get this error in console open angular help page but saying using ngRoute
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=q...)
angular and html code here
<html ng-app="App">
<body ng-controller="qrCrtl">
<qr-scanner width="400" height="300" ng-success="onSuccess(data)" ng-error="onError(error)" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script data-main="qr-scanner.js" src="require.js"></script>
<script src="src/jsqrcode-combined.min.js"></script>
<script>
var App = angular.module('App', ['qrScanner']);
App.controller('qrCrtl', ['$scope', function($scope) {
$scope.onSuccess = function(data) {
console.log(data);
};
$scope.onError = function(error) {
console.log(error);
};
$scope.onVideoError = function(error) {
console.log(error);
};
}]);
</script>
</body>
</html>
It seems that you did not inject the ngRouter library into your module, like so,
var App = angular.module('App', ['qrScanner', 'ngRoute']);
See here and here
Also, make sure that you import the Angular route library after angular, like so,
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>

AngularJS route won't load the view and reports no errors

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">

Categories