I'm using AngularJs. I started to write simple controller that will output Hello world!
In my cribsControler.js code looked liked this:
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.hello = 'hello world';
});
and it worked. Then I changed my code to display details that are shown in the example below.
app.js
angular.module('ngCribs', ['ui.bootstrap']);
cribsController.js
angular
.module('ngCribs')
.controller('cribsController', function($scope){
$scope.cribs = [
{
"type": "condo",
"price": 22000,
"address": "nameOfStreet1",
"description": "description1"
},
{
"type": "hose",
"price": 54000,
"address": "nameOfStreet2",
"description": "description2"
},
{
"type": "cotage",
"price": 1000,
"address": "nameOfStreet3",
"description": "description3."
}
];
});
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<title></title>
</head>
<body ng-app="ngCribs" ng-controller="cribsController">
<pre>{{ cribs | json}}</pre>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
<script src="scripts/cribsController.js"></script>
</html>
When I edited, saved, and than ran it in a browser I got a blank page. When I clicked view page source and then when I clicked on my script link: <script src="scripts/cribsController.js"></script>, I can see that it didn't update from "Hello World" to the display details.
What can I do to actually update it? Or maybe there is error in my code?
I development phase you should have the development console up. Press f12 to open It. Somewhere in the console you will find a setting that says something like: clear cache whille console is open(depends on which browser you use). Browser cache JavaScript files by default
Related
First of all, I have to say that is my first time posting on StackOverflow.. So if I post on the wrong area, sorry.
I'm beginning with angularjs, and I'm struggling into two points. 1st I've to create a connection with my mysql, witch i wasn't able until now.. 2nd I've to display the content into the HTML page.
I'm using the following code, witch includes the app.js, page.html and data.json (I'll change that later to php if I'm allowed to.)
The app.js seems to work fine, but the view (page.html) isn't display any data..
App.js
app.controller('PatientListCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get('patients.json').success(function (data) {
$scope.patients = data;
});
$scope.orderProp = 'id';
}]);
patients.json
[
{
"id": 0,
"first_name": "John",
"last_name": "Abruzzi"
},
{
"id": 1,
"first_name": "Peter",
"last_name": "Burk"
}
]
Page.html
<!DOCTYPE html>
<html class="no-js" ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
</head>
<body>
<div data-ng-repeat="patient in patients">
{{patient.id}}{{patient.last_name}}{{patient.first_name}}{{patient.SSN}}{{patient.DOB}}
<div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Thanks for your attention.
You have not define the controller in the view
<div ng-controller="PatientListCtrl" data-ng-repeat="patient in patients">
<li> {{patient.id}} </li>
<div>
Here is the working Fiddle
I am developing a chrome extension. This is how my extension is structured:
I have a browser action defined such that clicking on it loads a local HTML file default.html. This is my manifest file:
{
"name": "Example Extension",
"version": "0.1",
"manifest_version": 2,
"browser_action": {
"default_title": "Does nothing.",
"default_icon": "icon.png"
},
"background": {
"scripts": ["extension.js"]
},
"permissions": ["tabs"]
}
This is my extension.js:
chrome.browserAction.onClicked.addListener(function(tab) {
var newURL = chrome.extension.getURL('default.html');
chrome.tabs.create({ url: newURL });
});
This is my default.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" href="jquery-1.10.2.min.js"></script>
<script type="text/javascript" href="donothing.js"></script>
</head>
<body>
<b>It works!</b>
</body>
</html>
I want to access chrome's currently open tabs in donothing.js and display some statistics in the default.html. I learn that I can not access chrome.* APIs within my donothing.js. If I have understood the docs correctly, I should declare and define a content script and pass messages as donothing.js --> contentscript.js --> extension.js and vice versa to achieve what I want to. Is there a simpler way to do this? Can someone explain the need for the content script here?
Thanks,
I have tried to suggest http://www.w3schools.com to chrome://newtab, neither i have success nor errors through discovery.
After a cursory look at source code i have tried the same code in different profiles, but no worth.
registry->Add(extension_id(), suggested_link.Pass());
is not adding my link to chrome://newtab.
Trivial Demonstration
manifest.json
{
"name":"Discovery Demo",
"description":"This demonstrates Discovery API",
"manifest_version":2,
"version":"1",
"permissions":["experimental"],
"browser_action":{
"default_icon":"screen.png",
"default_popup":"popup.html"
}
}
popup.html
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
</body>
</html>
popup.js
chrome.experimental.discovery.suggest({
"urlImage": chrome.extension.getURL("screen.png"),
"score": 1.0,
"linkUrl": "http://www.w3schools.com",
"linkText": "Sample"
});
Is there any thing i missed out, any suggestions?
Where I can find an example code of chrome extension which shows the current address in a popup?
Thanks.
Ron
Documentation: http://code.google.com/chrome/extensions/getstarted.html
Samples: http://code.google.com/chrome/extensions/samples.html
This is the official documentation and sample code for Google Chrome extensions. In your manifest you want to declare a popup for either a page or browser action (whichever best suites your extension). In your popup HTML file you probably want something like the following;
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function initPopup() {
chrome.tabs.getSelected(null, function (tab) {
document.body.appendChild(document.createTextNode(tab.url));
});
}
</script>
</head>
<body onload="initPopup();"></body>
</html>
This very simply appends the URL of the selected tab to the body of the popup.
Your manifest should look like the following;
{
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs"
]
}
The file structure for this example is a single folder containing manifest.json, popup.html and icon.png.
On the Extensions page (chrome://extensions) you should click Load unpacked extension... and navigate to this folder. If you make any changes to the manifest be sure to click the Reload link to pick up these changes.
I hope this helps but I strongly suggest reading through the documentation I mentioned above to get a better understanding of what you're doing.
EDIT: Added missing null argument to code and included an example manifest and file structure based on additional information gathered from comments.
Try this code in your popup, it works for me (Google Chrome 14-beta):
chrome.windows.getCurrent(function(window) {
chrome.tabs.getSelected(window.id, function(tab) {
console.log(tab);
console.log(tab.url); // url of the current tab
});
});
For more information check: http://code.google.com/chrome/extensions/tabs.html#method-getSelected
It looks like all these answers are outdated so here is a manifest 2 example. You will need jQuery for this example. I have included all the files in a gist.
manifest.json
{
"manifest_version": 2,
"name": "Hello World",
"version": "1.0",
"author": "Christian Juth",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
}
popup.html
<!doctype html>
<html>
<head>
<title>Hello World</title>
<script src="jquery.js"></script>
<script src="popup.js"></script>
</head>
<body>
<span id="address"></span>
</body>
</html>
popup.js
$(document).ready(function(){
//define query
var query = { active: true, currentWindow: true };
//query tabs
chrome.tabs.query(query, function (tabs) {
currentAddress = tabs[0].url;
$('#address').text(currentAddress);
});
});
When I open:
Incpect Popup
Next select tab scripts
I get samtimes empty list scriprs.
I write a simply extension manifest.json (my minimum)
{
"name": "TEST",
"version": "1.0",
"browser_action": {
"popup": "popup.html"
}
}
Popup.html
<!DOCTYPE html>
<html>
<head>
<script src="popup.js"></script>
</head>
<body>
<h1>TEST1</h1>
<div id="content">
TEST
</div>
</body>
</html>
popup.js
console.log('test OK');
Sometimes I get list but not with all my js files.
This file is only short example. I send to console message, and I see this message and I see this file in resource, but i not see in the scripts tab.
My chrome version is 9.0.597.98.
I try with other version and I have the same problem.
During the next update, this will be solved. If it doesn't, please submit a bug in http://crbug.com/new