For the concat block of my Gruntfile.js:
concat: {
options: {
stripBanners: false,
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
production: {
files: {
'./public/js/build/services.js': ['./public/js/services/*.js'],
'./public/js/build/factories.js': ['./public/js/factories/*.js'],
'./public/js/build/controllers.js': ['./public/js/controllers/*.js'],
'./public/js/build/directives.js': ['./public/js/directives/*.js'],
'./public/js/build/filters.js': ['./public/js/filters/*.js'],
'./public/js/build/plugins.js': ['./public/js/plugins/*.js'],
'./public/js/build/modern-angular.js': [
'./public/bower_components/jquery/dist/jquery.js',
'./public/bower_components/angular-stable/angular.js',
'./public/bower_components/angular-sanitize-stable/angular-sanitize.js'
],
'./public/js/build/old-angular.js': [
'./public/bower_components/jquery-1.11/index.js',
'./public/bower_components/angular-unstable/angular.js',
'./public/bower_components/angular-sanitize-unstable/angular-sanitize.js',
'./public/bower_components/html5shiv/dist/html5shiv.js'
],
'./public/js/build/app.js': [
'./public/js/app.js',
'./public/js/build/services.js',
'./public/js/build/factories.js',
'./public/js/build/controllers.js',
'./public/js/build/directives.js',
'./public/js/build/filters.js',
'./public/js/build/plugins.js'
]
}
}
},
As you may be able to tell with my Gruntfile.js, I'm required to support old, outdated browsers, therefor I have to load two different versions of Angular depending on the browser.
Here's my index.ejs:
<!doctype html>
<html lang="en" class="ng-app:idocs" id="ng-app" ng-app="idocs" xmlns:ng="http://angularjs.org">
<head>
<!-- Omitting to prevent bloating -->
<!--[if lte IE 8]>
<script> var olderIE = true; </script>
<![endif]-->
<script>
if (typeof olderIE === 'undefined') {
// User is using a modern browser, they're awesome.
var script = document.createElement('script');
script.setAttribute('src', '/js/build/modern-angular.js');
document.head.appendChild(script);
}
</script>
<!--[if lte IE 8]>
<script src="/js/build/old-angular.js"></script>
<![endif]-->
</head>
<body data-ng-cloak onload="handleTaggerEvent()">
<!-- Again, omitting -->
<% if(nodeEnv == 'production') { %>
<script src="/js/build/app.js"></script>
<% } else { %>
<script src="/js/build/controllers.js"></script>
<script src="/js/build/directives.js"></script>
<script src="/js/build/factories.js"></script>
<script src="/js/build/filters.js"></script>
<script src="/js/build/plugins.js"></script>
<script src="/js/build/templates.js"></script>
<script src="/js/app.js"></script>
<% } %>
<script src="socket.io/socket.io.js"></script>
<script>
var app = {
// Omitting for brevity
};
// Socket.io stuff
</script>
</body>
</html>
Then in the browser I get littered with the following error. Angular appears to load, but after the rest of the angular code:
I think you are getting the error because you are loading the controllers, directives, factories, filters and such before you actually load angular files. You need to load the angular files. Should look something like this:
'./public/js/build/modern-angular.js': [
'./public/bower_components/jquery/dist/jquery.js',
'./public/bower_components/angular-stable/angular.js',
'./public/bower_components/angular-sanitize-stable/angular-sanitize.js'
],
'./public/js/build/services.js': ['./public/js/services/*.js'],
'./public/js/build/factories.js': ['./public/js/factories/*.js'],
'./public/js/build/controllers.js': ['./public/js/controllers/*.js'],
'./public/js/build/directives.js': ['./public/js/directives/*.js'],
'./public/js/build/filters.js': ['./public/js/filters/*.js'],
'./public/js/build/plugins.js': ['./public/js/plugins/*.js'],
This would allow for the angular-stable/angular.js files to load before the other files.Your previous version loads because you load all the files after the angular files a second time. Try removing one of the copies of:
'./public/js/build/app.js': [
'./public/js/app.js',
'./public/js/build/services.js',
'./public/js/build/factories.js',
'./public/js/build/controllers.js',
'./public/js/build/directives.js',
'./public/js/build/filters.js',
'./public/js/build/plugins.js'
]
That should work.
Add this two line before script tab
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
Related
I'm new to Unit Testing. I have followed the tutorials and I have everything
configured on node.js via npm. I have done some describe and it just to get the feel for ho things are set up and my spec runner is fine. The problem I'm trying to get test on controllers figured out but I run in a snag and been trying to figure things out for a while but I continue to get the same error so I thought I would reach out.
I'm trying to do a simple test on a LoginController but I continue to get the same error. I can't point out what I'm doing wrong. Trying to get over this hurdle.
TypeError: angular.mock.module is not a function:
spec runner index html file.
<!doctype html>
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="stylesheet" href="../bower_components/jasmine-core/lib/jasmine-core/jasmine.css">
</head>
<body>
<script src="../My Documents/My Website/AngularLogin-
Registration/js/angular-1.6.0.js"></script>
<script src="../My Documents/My Website/AngularLogin-Registration/js/angular-route-1.6.0.min.js"></script>
<script src="../bower_components/jasmine-core/lib/jasmine-core/jasmine.js"></script>
<script src="../bower_components/jasmine-core/lib/jasmine-core/jasmine-html.js"></script>
<script src="../bower_components/jasmine-core/lib/jasmine-core/boot.js"></script>
<!-- include source files here... -->
<!--<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>-->
<!--<script src="//code.angularjs.org/1.6.0/angular-cookies.min.js"></script>-->
<script src="../My Documents/My Website/AngularLogin-Registration/js/angular-mock.js"></script>
<script src="../My Documents/My Website/AngularLogin-Registration/js/app.js"></script>
<script src="../My Documents/My Website/AngularLogin-Registration/login/login.controller.js"></script>
<!-- include spec files here... -->
<script src="spec/test.js"></script>
Here is my test file.
describe('LoginController test', function () {
beforeEach(angular.mock.module('app'));
beforeEach(angular.mock.inject(function(_$controller_){
$controller = _$controller_;
}));
describe('$scope.grade', function() {
it('sets the strength to "strong" if the password length is >8 chars',
function() {
var $scope = {};
var controller = $controller('LoginController', { $scope: $scope });
$scope.password = 'longerthaneightchars';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
});
});
Thanking You In Advance
PDH
Load angular-mocks library in your spec runner html , make sure to load it after angular.js.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-mocks.js"></script>
You can also use bower to download the js file instead of the CDN.
ok, I have viewed the docs, and have directly taken this code from another project that works. I have no idea why, but i keep getting an unknown provider error. Ive run through all the possible problems that angular points out on their error reference, so if you are just going to link me there don't waste your time.
the error:
angular.js:13236 Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=waypointsProvider%20%3C-%20waypoints%20%3C-%20WaypointController
at Error (native)
at https://code.angularjs.org/1.5.0/angular.min.js:6:416
at https://code.angularjs.org/1.5.0/angular.min.js:43:7
at Object.d [as get] (https://code.angularjs.org/1.5.0/angular.min.js:40:270)
at https://code.angularjs.org/1.5.0/angular.min.js:43:69
at d (https://code.angularjs.org/1.5.0/angular.min.js:40:270)
at e (https://code.angularjs.org/1.5.0/angular.min.js:41:1)
at Object.instantiate (https://code.angularjs.org/1.5.0/angular.min.js:41:364)
at https://code.angularjs.org/1.5.0/angular.min.js:87:42
at A.link (https://code.angularjs.org/1.5.0/angular-route.min.js:7:274) <div ng-view="" class="ng-scope">
my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Appalachian App</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-route.min.js"></script>
</head>
<body ng-app="atApp">
<h1 class="header">Yo</h1>
<div ng-view></div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/WaypointController.js"> </script>
<!-- Services -->
<script type="text/javscript" src="js/services/waypoints.js"></script>
</body>
</html>
my app.js file:
var app = angular.module('atApp', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/waypoint.html',
controller: 'WaypointController'
}).
otherwise({
redirectTo: '/'
});
}]);
my controller:
app.controller('WaypointController',[
'$scope','waypoints',
function($scope, waypoints){
$scope.helloWorld='hello world!';
$scope.ways = waypoints;
}]);
my service:
app.factory('waypoints', [function(){
var demo = [
{
name:"Milinockett",
date:"17 August 2015",
state:"Maine",
specificLocation:"motel",
startingPoint:true,
distanceFromStart:0,
distanceFromEnd:2189.0,
img:"https://56.media.tumblr.com/03645603932681733b6ae4b46d6c7abf/tumblr_o43w4sh5Zu1rrw1gjo1_540.jpg",
companions:"Vallone",
},
{
name:"Katahdin Stream Campground",
date:"18 August 2015",
state:"Maine",
specificLocation:"Baxter State Park Camp Site 21",
startingPoint:false,
distanceFromStart:5.2,
distanceFromEnd:2183.8,
img:"http://41.media.tumblr.com/1a0fd39fd0b14f83ce03151299c883f8/tumblr_o43w7109pQ1rrw1gjo1_1280.jpg",
companions:"Vallone",
},
];
return demo;
}]);
any help is appreciated
First things first. When you want to debug your application, do not use the minified, but the standard version of Angular. That will give you a far more descriptive error, which will guide you to the source of your issue.
Here's a working example: http://plnkr.co/edit/JANQwccTsyqPUTSYAZLv?p=preview . Your code (at least the part you included) looks good at first glance, so I hope this will give you an idea where you went wrong.
P.S. Using service vs. a factory will arguably give you a cleaner syntax:
function WaypointsService() {
this.getWaypoints = getWaypoints;
function getWaypoints() {
return [way1, way2, ...];
}
}
app.service('waypointsService', WaypointsService);
Place waypoints.js file before WaypointController.js
Have any error for JSON on the console. Nothing I found buggy in your code.
Try this code for your factory:
app.factory('Waypoints', Waypoints);
function Waypoints(){
var demo = [ { ... }, { ... }, ];
return{
getDemo: getDemo
}
function getDemo(){
return demo;
};
});
So in your controller inject Waypoints and get demo like:
$scope.ways = Waypoints.getDemo();
I am trying to test an Ext JS 5.0.1 application with Jasmine 2.3.4. I keep getting the error "Uncaught ReferenceError: describe is not defined". It is as though it is not seeing describe, it, and other global functions. If I switch out the Jasmine files to 1.3, then it does see these global functions. I want to use the newest version of Jasmine and furthermore, I am not sure 1.3 plays well with Ext JS 5. Has anyone else run into this issue? Code snippets below:
specrunner.jsp
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Application</title>
<!--Jasmine Files -->
<link rel="stylesheet" type="text/css" href="/app_name/app/js/jasmine/jasmine.css">
<script type="text/javascript" src="/app_name/app/js/jasmine/jasmine.js"></script>
<script type="text/javascript" src="/app_name/app/js/jasmine/jasmine-html.js"></script>
<!-- ExtJS Files -->
<script type="text/javascript" src="//cdn-tst.corporate.com/LNF/4/4.0.1/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="//cdn-tst.corporate.com/LNF/4/4.0.1/extjs/packages/ext-theme-classic/build/ext-theme-classic.js"></script>
<!-- Jasmine Test Case File -->
<script type="text/javascript" src="/app_name/app/js/spec/AppSpec.js"></script>
<!-- app Test Case File -->
<script type="text/javascript" src="/app_name/app/js/test/app.js"></script>
</head>
<body>
</body>
</html>
app.js (for testing)
Ext.Loader.setConfig ({enabled: true});
// Loading different components like controller, model, view..
Ext.application ({
models: [ 'Trip' ],
stores: [ 'Trips' ],
// views: [ 'simpleTrip' ], Views are throwing an error
autoCreateViewport: false,
name: 'carrier360',
// using the Launch method of Application object to execute the Jasmine Test Cases
launch: function () {
debugger;
var jasmineEnv = jasmine.getEnv ();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter ();
jasmineEnv.addReporter (htmlReporter);
jasmineEnv.execute ();
}
});
AppSpec.js
describe ("ExtJS App Test Suite", function () {
debugger;
beforeEach (function () {
// Initializing the mainPanel
debugger;
tripsStore = Ext.StoreManager.lookup ('Trips');
simpleTrip = Ext.create ('app.view.simpleTrip');
controller = Ext.create ('view.controller.tripController');
});
/* Test if View is created Successfully.*/
it ('View is loaded', function () {
debugger;
expect (simpleTrip != null).toBeTruthy ();
});
/* Test if store is loaded successfully.*/
it ('Store shouldn’t be null', function () {
debugger;
expect (tripsStore != null).toBeTruthy();
});
/* Test controller is initialized successfully.*/
it ('Controller shouldn’t be null', function () {
debugger;
expect (controller != null).toBeTruthy();
});
});
Any suggestions on why describe and other functions are not visible would be appreciated!
Descibre, it, ... are no longuer defined in jasmine.js but instead in the boot.js included with jasmine library.
I have a java script file that contains a config object for decoding a lot of business jargon for ease of use in my application.
How can I get that to be available to my angular app? I currently have it included in my html file above all the application files.
here is my config.js:
var config = {
"metadata":[
"8235205241531AF399B113140005492E":{
"name":"verison_number"
}
]
}
here is includes:
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-resources/angular-resource.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="js/config.js"></script>
<script src="js/viewer.js"></script>
<script src="js/controller.js"></script>
<script src="js/services.js"></script>
<script src="js/routes.js"></script>
<script src="js/app.js"></script>
now here is my controller just trying to do a console.log on it:
var MainCtrl = angular.module('MainCtrl', []);
MainCtrl.controller('loader',['$scope','$rootScope','$http','startApp', function($scope,$rootScope,$http,startApp) {
console.log(config);
console.log('loading course...');
console.log(startApp);
}]);
Your JSON is incorrect.
Here is the correct way for declaring config:
var config = {
"metadata":[
{"8235205241531AF399B113140005492E":"verison_number"}
]}
Working Plunkr
Maybe using the value recipe. For example:
var app = angular.module('MainCtrl');
// later
app.value('myconfigs',config); // set your "object"
// somewhere in your controller code
MainCtrl.controller('loader',['$scope','$rootScope','$http','startApp','myconfigs', function($scope,$rootScope,$http,startApp, myconfig) {
console.log(myconfig.metadata);
console.log('loading course...');
console.log(startApp);
}]);
I've an app that retrieve server data using ajax. I've tested in localhost, the loader work fine, but when I install my extension and click on the browser action popup, the loader won't show. The little popup delayed for 2 second and shows the result.
popup.html
<div class="cssLoader" ng-show="loader">Fetching...</div>
js
app.controller('MainControl', function($scope, $http){
$scope.loader = true;
$http({
url: "http://www.corsproxy.com/mydomain.net/items.php",
method: "GET",
}).success(function(data) {
$scope.data = data;
$scope.loader = false;
});
});
Without seeing more of your code it is difficult to know for sure. Nonetheless, my suspicion (based upon the fact that your code works outside of the Chrome extension environment but not inside that environment) is that since you're operating in a Chrome Extension environment, you'll need to include the ng-csp directive (see Chrome documentation or Angular documentation).
I developed an Angular app inside a chrome extension and I needed to use ng-csp in order for Angular to load and fully function properly.
Essentially, Chrome extensions (and even more apps) place a number of restrictive security permissions on the browser environment and ng-csp tells Angular to operate in a way that is more consistent with a strict CSP.
I have included an example below that shows loading the entire Angular application properly:
<!DOCTYPE html>
<html ng-app="myApp" ng-csp>
<head>
<meta charset="utf-8">
<title>My Extension</title>
<link href="css/index.css" rel="stylesheet">
<!-- Include in the next line your Angular library code -->
<script type="text/javascript" src="js/angular-lib.js"></script>
<!-- Include in the next line your custom Angular code such as the $http to load the loader -->
<script type="text/javascript" src="js/myapp.js"></script>
</head>
<body>
<!-- Place your HTML code for the 'Fetching' anywhere here in the body -->
</body>
</html>
According to the docs, CSP "is necessary when developing things like Google Chrome Extensions" (more info can be found on the linked page).
Furthermore, besides defining ng-csp on your root element, there is on more crucial point (which affects ngShow/ngHide):
CSP forbids JavaScript to inline stylesheet rules. In non CSP mode Angular automatically includes some CSS rules (e.g. ngCloak). To make those directives work in CSP mode, include the angular-csp.css manually.
I found this to be necessary only if the angular.js script is defined inside the app's context.
In any case, here is the source code of minimal demo extension that seems to work fine for me:
Structure:
extension-root-dir/
|_____manifest.json
|_____popup.html
|_____popup.js
|_____angular.js
|_____angular-csp.css
manifest.json:
{
"manifest_version": 2,
"name": "Test Extension",
"version": "0.0",
"browser_action": {
"default_title": "Test Extension",
//"default_icon": {
// "19": "img/icon19.png",
// "38": "img/icon38.png"
//},
"default_popup": "popup.html"
}
}
popup.html:
<!DOCTYPE html>
<html>
<head>
<title>Test Extension</title>
<link rel="stylesheet" href="angular-csp.css" />
</head>
<body ng-csp ng-app="myApp" ng-controller="mainCtrl">
<div ng-show="loader">Fetching...</div>
<div ng-hide="loader">{{status}}</div>
<script src="angular.js"></script>
<script src="popup.js"></script>
</body>
</html>
popup.js:
var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($http, $scope) {
$scope.loader = true;
$http({
url: "http://www.corsproxy.com/mydomain.net/items.php",
method: "GET"
}).finally(function () {
$scope.loader = false;
}).then(function (response) {
$scope.data = response.data;
$scope.status = 'Success !';
}, function (response) {
$scope.status = 'ERROR !';
});
});
(BTW, I am using AngularJS v1.2.16.)