I have installed phantomjs (coz i'm trying to get the system to make my website in angular crawlable), and i'm stuck on a "nomod" error which occurs only on phantomjs server (the live version works perfectly fine).
<html lang="{{lang}}" itemscope itemtype="http://schema.org/WebPage" ng-app="myApp" class="no-js">
<base href="/">
<head>
<meta name="fragment" content="!">
</head>
<body>
....
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
........
<!-- endbower -->
<script></script>
....
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
loading controllers
....
<!-- endbuild -->
</body>
</html>
For the app.js
'use strict';
angular
.module('myApp', [
'ngAnimate',
'ngAria',
....
])
.filter()....
.config(function ($routeProvider, $stateProvider, $urlRouterProvider, $authProvider, UIRouterMetatagsProvider) {....})
.config(function($locationProvider) {
// use the HTML5 History API
$locationProvider.html5Mode(true);
requireBase: false;
$locationProvider.hashPrefix('!')
});
When i access from phantomjs ng-app is called before myApp being initialized and i tried to start the app with manual bootstrapping without success.
If i try to load the controllers without calling ng-app I still get the error because myApp module is somehow created after all controllers have been loaded.
Hope someone can help...
Thank you very much.
I was also getting the nomod error. In my case it was because my controller had the "const" declaration in it.
Changing "const" to "var" resolved the problem.
My error was:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myAppName&p1=[$injector:nomod] http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myAppName
Here is a related post explaining the problem with PhantomJS (via Karma) and "const".
https://github.com/karma-runner/karma/issues/1621
Related
I'm fairly new to AngularJS, and I'm attempting to set up routing on my basic app.
My app.js:
var app = angular.module("StarWarsApp", ['ngRoute', 'ne.swapi']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.otherwise({
redirectTo: '/'
});
});
My index.html:
<head>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="StarWarsApp" \>
<div class="container">
<div ng-view></div>
</div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
<!-- Services -->
<script type="text/javascript" src="js/services/charactersList.js"></script>
<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>
</body>
</html>
When I load home.html directly, I see the contents of it properly, but it won't appear in my ng-view and I can't figure out why. I'm sure I missed something very basic, but I've no idea. Any ideas?
What you posted works correctly without your controller, service, and ne.swapi, so the error is likely there. However the code for your controller & service was not posted here.
One idea I have from referencing the ne.swapi documentation-check that you are loading 'swapi' after $scope in the controller if you are using ne.swapi. Again, since your controller was not posted I am not sure if this is causing the issue.
app.controller("Test", function($scope, swapi){
$scope.test = "Hey";
});
I have a working plunker here, I hope referencing it will help you find the error. https://plnkr.co/edit/9hD490m7nZxSTQPDTN0J?p=preview
Issues Found:
There is an unexpected character in the body tag. Remove that first.
Also, you have added the 'ne.swapi' dependency in app.js. So, its script should be added before inserting app.js.
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Also, it would be good to add scripts in the bottom of the body tag. Otherwise. it might affect the page rendering speed. This is a suggestion. This won't cause the issue you have now.
I have off the shelf app framework. Index.html contains this
<!-- jQuery and Bootstrap -->
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- MetsiMenu -->
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<!-- SlimScroll -->
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Peace JS -->
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<!-- Main Angular scripts-->
<script src="js/angular/angular.min.js"></script>
<script src="js/plugins/oclazyload/dist/ocLazyLoad.min.js"></script>
<script src="js/ui-router/angular-ui-router.min.js"></script>
<script src="js/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<!-- Our application's scripts -->
<script src="js/controllers.js"></script>
and in js/controllers.js, I have
angular
.module('inspinia')
.controller('MainCtrl', MainCtrl)
and my controller is
function MainCtrl($scope, $http, $interval, $state, $location)
when I try to inject UI bootstrap by chaning it to
.module('inspinia', ['ui.bootstrap'])
I get
"Error: [$injector:unpr]
http://errors.angularjs.org/1.3.7/$injector/unpr?p0=%24stateProvider%20%3C-%20%24state%20%3C-%20MainCtrl
I am sure that it is something very simple, but I can't see what.
Seems like you are using $state API service inside your controller so you also need to also include ui.router with it.
So while asking for $state dependency, injector doesn't able to find asked dependency inside angular DI container $injector/unpr?p0=%24stateProvider in MainCtrl
angular
.module('inspinia', ['ui.bootstrap', 'ui.router'])
We're trying to get Angular set up for a fairly simple project using Gulp, but we're somehow failing at the first hurdle. Here's what we have set up, more or less:
index.html:
<!doctype html>
<html ng-app="testModule">
<head>
<meta charset="utf-8">
<title>Test Module</title>
<meta name="description" content="">
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<div ng-view></div>
<!-- inject:js -->
<script src="/angular-route.js"></script>
<script src="/angular.js"></script>
<!-- endinject -->
<!-- inject:bundle:js -->
<script src="/bundle.js"></script>
<!-- endinject -->
</body>
</html>
bundle.js:
// A bunch of stuff inserted by Gulp.
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var angular;
(function () {
angular.module('testModule', ['ngRoute']);
angular.module('testModule').config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo', {
template: '<p>Hi.</p>'
}).otherwise({
redirectTo: '/foo'
});
}]);
})();
},{}]},{},[1])
//# sourceMappingURL=bundle.js.map
This seems simple enough to be foolproof, yet here are the errors we're getting:
angular-route.js:24: Uncaught TypeError: Cannot read property 'module' of undefined
bundle.js:8: Uncaught TypeError: Cannot read property 'module' of undefined
angular.js:4458: Uncaught Error: [$injector:modulerr] Failed to instantiate module testModule due to:
Error: [$injector:nomod] Module 'testModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
It almost seems like the browser doesn't know angular exists when processing angular-route and bundle, and only figures it out later. How can we get the browser to detect the presence of angular earlier so everything works?
You don't need to initialize the variable angular manually.
Here's a plunker, and you'll note we're brought right to the view for /foo: http://plnkr.co/edit/dxo3ZUJIWLeFw9HXF80w?p=info
angular.module('testModule', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo', {
template: '<p>Hi.</p>'
}).otherwise({
redirectTo: '/foo'
});
}]);
I am new to angular.js and just trying to get my head around the basics and hopefully this is something simple, but I am having trouble loading in a templateUrl.
My index.html is as follows:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>AngularJS Tutorials</title>
</head>
<body>
<div ng-app="app">
<h1>Introduction to Angular.JS</h1>
<div ui-view></div>
</div>
<!-- Scripts -->
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
My app.js is:
angular
.module('app', [
'ui.router'
])
.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home.html'
})
}])
My home.html is: <h1>home template</h1>
So I dont know why this isn't working, but the error is:
XMLHttpRequest cannot load file:///Users/code/Desktop/angular/templates/home.html. Cross origin requests are only supported for HTTP.
Thanks in advance, Gab
This error comes due to a security restriction put by the browser. You can try below steps:
Try to run your code in some other browsers
Add the templates inside index.html itself by placing the content inside script tag. These script elememts should appear after ng-app. (ref link)
<script type="text/ng-template" id="home.html">
Content of the template goes here
</script>
First thing you use <ng-view> </ng-view> for loading your templates. and second is use <script type="text/ng-template" id="home.html"> for you each partial view. third thing is not mandatory but use otherwise at last that makes sense. Here is fiddle for you check it out
fiddle
If you want to run your page locally, I suggest you install a http-server and run it in there ...
Then you avoid CORS issues like that
Example:
with node.js installed
cd ~/myProjectFolder
npm i http-server
http-server ./
Then you could also just enter localhost:8080 in your browser and wouldn't have to point it to some URI/folder
I'm building a desktop application with node-webkit and angular. I have been using version 1.0.7 of angular, but I need to update to take advantage of improvements to the framework. Unfortunately, the new ngRoute module doesn't seem to be working properly whereas I had no problems with routing previously.
Using the angular-seed boilerplate as an example, when the app loads up it shows view1, but clicking on the links for view1 and view2 has seemingly no effect. I have verified it works fine when served as a webpage in a browser, but in the node-webkit environment it fails.
I did discover that if I comment out the otherwise option for $routeProvider that the address bar shows index.html#/C:/view1 instead of app/index.html#/view1, and of course then neither view1 nor view2 is shown, and clicking on the view1 and view2 links still has no effect. It seems that the links are possibly being interpreted incorrectly? If so, how should they be formatted? I've played around with a bunch of combinations to no effect.
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
index.html
<!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>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
-->
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.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>
I got it to work. I used the same strategy used in the Angular documentation to make the ngRoute example code work in plunkr. I can't say I exactly understand why it didn't work using the stock angular-seed configuration. If anyone has insight, I'd like to hear it.
The modified index.html and app.js files should look like this:
app.js
'use strict';
// Declare app level module which depends on filters, and services
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
// configure html5 to get links working on node-webkit
$locationProvider.html5Mode(true);
}]);
index.html
<!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"/>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script type="text/javascript">
//this is here to make node-webkit work with AngularJS routing
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</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>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.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>
Note that in this mode, index.html is no longer part of the URL, so if you reload, nw tries to reload a file that doesn't exist (e.g. /path/to/app/view1). You need to manually update it to /path/to/app/index.html. It would be nice if you could make nw go back to the main page on reload, but I so far don't see an option for making that happen.
Late breaking news: It was due to a bug in Angular 1.2.0, which has since been resolved. The angular-seed simply has not yet been updated to the most recent version.