This one will be most probably easy question. I'm very new to Web programming and I was given a task to learn Ext JS (I don't know anything about it they just told me to learn this, may be there are some better frameworks out there, but I don't know). So I started with a very simple example.
This is the Ext JS code
Ext.define('Cookbook.Vehicle', {
config: {
Manufacturer: 'Aston Martin',
Model: 'Vanquish'
},
constructor: function(config) {
// initialise config object
this.initConfig(config);
},
getDetails: function() {
alert('I am an ' + this.getManufacturer() + ' ' + this.getModel());
},
});
var myVehicle = Ext.create('Cookbook.Vehicle');
myVehicle.getDetails(); // alerts 'I am an Aston Martin Vanquish'
And this is the HTML Code
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/extall.css" />
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="Chapter 1.js"></script>
</head>
<body>
<h2 id="h2">Nothing seem to work</h2>
</body>
</html>
I suppose that Ext JS code should run after the .hmtl file is launched right? But the thing is, nothing happens. Just a plane page which says Nothing seems to work. Is there a problem in my code? Or is there a special thing to be done to run Ext JS code. I don't really know what to do.
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.
I am trying to use a service with a controller and UI-Router. I understand how to use it without UI-Router, and I have found a variant how to make it work with UI-Router and done it, but it doesn't work. The browser throws a mistake and I can not find where it is in my code. Maybe there is another way to use a service in ui-router, but I find this most understandable for me. Thanks!
index.html
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css">
</head>
<body ng-app="mainApp">
<div class="container-fluid">
<div ui-view></div>
</div>
</body>
</html>
try.html
<h4>{{try.articles.thereAre[1].title}}</h4>
And angularJS App with ui-router in two files: app.js and controller.js.
app.js
angular.module('mainApp', ['dndLists', 'ui.router'])
.config(function($stateProvider) {
$stateProvider
.state('try', {
url: '/try',
templateUrl: ' templates/try.html',
controller: 'tryCtrl as try'
})
})
controller.js
angular.module('mainApp')
.service('defaultArticles', function() {
var me = this;
me.thereAre = [
{
id: '1',
title: 'All Victims Are Out of the Hospit',
titleCopy: 'All Victims Are Out of the Hospit',
idea: "'We really were very lucky', Gov. Andrew M. Cuomo said after a significant blast in the Chelsea neighborhood of Manhattan. Nobody was killed, and all 29 of the injured have been released from the hospital. Remnants of the bomb and a second device were being investigated, and an additional 1,000 police officers and National Guard members were being deployed in the city.",
hide_or_no: true,
isCollapsed: true,
picture: 'src/img/1.jpg'
},
{
id: '2',
title: 'How I Spent My New York Fashion Week',
titleCopy: 'How I Spent My New York Fashion Week',
idea: 'In early September, summer turns to fall and fashion turns to New York Fashion Week, the first leg in the monthlong international relay in which next spring’s collections (or sometimes this fall’s collections) are shown. New York’s week is particularly crammed, and while I raced uptown and down, subsisting on what I could cadge from catered shows and parties — a blini-and-caviar here (Ralph Lauren), a frosted mini doughnut there (Gucci), a cherry Coke Slurpee sucked down after dark (Alexander Wang) — I filled the margins of my notebook with the obscure, unexpected and pleasantly surprising. Here are some of the most memorable things I saw.',
hide_or_no: true,
isCollapsed: true,
picture: 'src/img/2.jpg'
}
];
})
.controller('tryCtrl', function(defaultArticles) {
var me = this;
me.artickles = defaultArticles;
})
I get this mistake, what am I doing wrong?
Template expects
<h4>{{try.articles.thereAre[1].title}}</h4>
while your code uses
me.artickles = defaultArticles;
Simply "artickles" is not "articles"
Side note: I would avoid JS keywords as try in any context... just a note
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.)
I'm learning Backbonejs and I'm really confused with linking external JS files. So, if I write Backbone script in HTML document between everything works fine. But if I add a link in HTML to JS file it doesn't work. I have tested jQuery in this file and it works fine, it seems like only Backbone.js scripts doesn't work. So, the main question is:
How do I link external JS files where I'm using Backbone.js to my HTML file?
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<script src="testingscript.js"></script>
<title>Backbone for beginners</title>
</head>
<body>
<div id="container">Loading...</div>
<script>
var AppView = Backbone.View.extend({
el: $('#container'),
// template which has the placeholder 'who' to be substitute later
template: _.template('<h3>Hello <%= who %></h3>'),
initialize: function () {
this.render();
},
render: function () {
// render the function using substituting the varibile 'who' for 'world'
this.$el.html(this.template({who: 'world!'}));
}
});
var appView = new AppView ();
</script>
</body>
</html>
Greetings!
There is no special magic to load other js files in the same HTML file that backbonejs is used.
I would make sure that your 'testingscript.js' file is in the right path and get loaded properly. You can look at the console in your web-browser (From FireBug if you use fireFox, or 'Inspect Element' if Chome is used).
Once you confirm that the file is loaded properly, things should work as I don't see you have any unusual in your code.
Good luck!
<script src="testingscript.js"></script>
I want to inject an old style, procedurally built string into a DIV element that's created in a standard ExtJS 4 MVC application, and I'm having a hard time wrapping my head around how I'm supposed to leverage dynamic loading.
So say I have this function by itself in a javascript file called "createHtml.js":
function fillDiv(strDivName) {
document.getElementById(strDivName).innerHTML = "<h1>TEST</h1>";
}
Elsewhere, in my MVC ExtJS 4 app (so in an object referenced within app.js, I have the following:
myPanel = Ext.create('Ext.panel.Panel', {
title: 'Map',
html: '<div style="width:100%; height:100%" id="map"></div>'
});
In my index.html page, I include a reference to createHtml.js. In my app.js file, I have something like the following:
( function() {
Ext.Loader.setConfig({
enabled : true,
paths : {
MyJive: 'media/js/ext/MyCom/MyJive',
}
});
Ext.onReady( function() {
var urlparams = document.URL.split('?')[1];
var param = Ext.urlDecode( urlparams ? urlparams : '' );
var pcard = Ext.create( 'MyJive.view.MyUI',{
param1 : param.param1,
param2: param.param2
});
Ext.create( 'Ext.container.Viewport', {
layout: 'fit',
items: [pcard]
});
});
})();
Now if I attach a listener to a button somewhere on MyUI and have it call fillDiv('map'); I get a Uncaught ReferenceError: fillDiv is not defined error.
If I put fillDiv not in its own file (createHtml.js) but MyUI.js (referenced by pcard, above), I'm golden. So I know it's not a super-stupid issue like having the div id wrong or some wacky, invalid innerHTML value.
I would have thought the app would know about fillDiv() because fillDiv()'s parent file is in index.html's javascript includes, but fine, createHtml.js isn't being dynamically loaded. I've got that, I guess.
But how do I tell app.js that my function exists in a file outside of its bounds?
(Now, "IRL", I've got fillDiv creating a complicated piece of html via OpenLayers so that we can display a map identified by param1 and param2 embedded in the ExtJS form, but I've gone to this simpler setup to try and figure out what I'm doing wrong.)
EDIT: Added index.html. createHtml.js contains the fillDiv() method. Note that the DIV that takes the map isn't in the index.html; it's, again, defined in an ExtJS Panel.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My Project</title>
<link rel="stylesheet" type="text/css"
href="media/js/ext/ext-4.0/css/ext-all.css" />
<link rel="stylesheet" type="text/css"
href="media/js/ext/MyCom/MyJive/css/main.css" />
<script type="text/javascript"
src="media/js/ext/MyCom/MyJive/createHtml.js"></script>
<script type="text/javascript"
src="media/js/ext/MyCom/MyJive/OpenLayers-2.11/OpenLayers.js"></script>
<script type="text/javascript"
src="media/js/ext/ext-4.0/ext-all-debug-w-comments.js"></script>
<script type="text/javascript"
src="media/js/ext/MyCom/MyJive/app.js"></script>
</head>
<body>
<div id="divParent"></div>
</body>
</html>
EDIT: Adding app.js:
( function() {
Ext.Loader.setConfig({
enabled : true,
paths : {
MyProj: 'media/js/ext/MyCom/MyProj',
OpenLayers: 'media/js/ext/MyCom/MapJive/OpenLayers-2.11',
MyComExt : 'media/js/ext/MyCom/MyComExt'
}
});
Ext.onReady( function() {
var urlparams = document.URL.split('?')[1];
var param = Ext.urlDecode( urlparams ? urlparams : '' );
var pcard = Ext.create( 'MyProj.view.MyProj',{
param1: param.p1,
param2: param.p2
});
Ext.create( 'Ext.container.Viewport', {
layout: 'fit',
items: [pcard]
});
});
})();
I would leave just a comment, but I don't have enough points for that.
You didn't include a index.html file with imports of your createHtml.js and app.js files. But the first thing I would check is that your createHtml.js import is placed above app.js.