I'm currently trying out angularJS to see how it works.
I followed a tutorial on egghead.io which is quite good.
Came up with this fiddle but it annoys me that I cant find the issue/error.
Nothing shows/outputs
app.js
(function() {
var app = angular.module('gemStore', []);
app.controller('StoreController', function() {
this.products = gems;
});
var gems = [
{
name: "Soap",
price: 25,
quantity: 10,
canPurchase: false
},
{
name: "Bag",
price: 100,
quantity: 15,
canPurchase: false
}
];
});
index
<body ng-controller="StoreController as store">
<div ng-repeat="product in store.products">
<h1>{{product.name}}</h1>
<h2>${{product.price}}</h2>
<button ng-show="product.canPurchase">Add to cart</button>
</div>
This is the fiddle: https://jsfiddle.net/Vwsej/618/ (UPDATED)
Hope you could point me in the right direction.
In advance, thanks.
You forgot to include angular in your page. Simply add:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
to your HTML page. Note that jsfiddle has a button on the top left under "Frameworks & Extensions" that allows you to quick-add libraries such as angular.
You also forgot to call your IIFE:
(function() {
//Your JS...
})(); //<--- you forgot the ()
I forked your fiddle and fixed those issues, it works just fine.
You forgot to call the self calling function:
JS Fiddle:
https://jsfiddle.net/Vwsej/620/
This is how self calling structure is:
(function(){
// your js code to execute
})();//forgot to call
Related
I'm new to Vue.js and trying to create a component that connects to one object within some global-scope data and displays differently based on the specifics of each object. I think I'm misunderstanding how the directives v-if and v-on work within component templates. (Apologies if this should actually be two different questions, but my guess is that the root of my misunderstanding is the same for both issues).
Below is a minimal working example. My goal is to have each member entry only display the Disable button if the associated member is active, and enable changing their status via the button. (I also want to keep the members data at the global scope, since in the actual tool there will be additional logic happening outside of the app itself).
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<member-display
v-for="member in members"
v-bind:member="member"
></member-display>
</div>
<script>
var members = [
{name: "Alex", status: "On"},
{name: "Bo", status: "On"},
{name: "Charley", status: "Off"}
]
Vue.component('member-display', {
props: ['member'],
computed: {
active: function() {
// Placeholder for something more complicated
return this.member.status == "On";}
},
methods: {
changeStatus: function() {
this.member.status = 'Off';
}
},
// WHERE MY BEST-GUESS FOR THE ISSUE IS:
template: `
<div>
{{member.name}} ({{member.status}})
<button v-if:active v-on:changeStatus>Disable</button>
</div>
`
});
var app = new Vue({
el: "#app",
data: {
members: members
}
})
</script>
</body>
</html>
Thanks for your help!
The code v-if and the v-on for the button just have the wrong syntax. The line should look like this:
<button v-if="active" v-on:click=changeStatus>Disable</button>
I have a bunch of links in the footer of my app (Angular 1.3.15).
html
<section class="footer-projects">
<div class="container">
<div class="row">
<section ng-repeat="area in ::links">
<h4 ng-bind="area.title"></h4>
<ul>
<li ng-repeat="project in ::area.projects">
</li>
</ul>
</section>
</div>
</div>
</section>
ng-repeat loops through this
js constants
'use strict';
require('./footer.module.js')
.constant('FooterLinkConstants', [
{
title: 'Space',
projects: [
{
name: 'Galaxy Zoo',
url: 'http://www.galaxyzoo.org/'
},
{
name: 'Moon Zoo',
url: 'http://www.moonzoo.org/'
},
{
name: 'Solar Storm Watch',
url: 'http://www.solarstormwatch.com/'
},
{
name: 'Planet Hunters',
url: 'http://planethunters.org/'
},
{
name: 'Planet Four',
url: 'http://planetfour.org/'
},
{
name: 'Radio Galaxy Zoo',
url: 'http://radio.galaxyzoo.org/'
},
{
name: 'Stardate M83',
url: 'http://www.projectstardate.org/'
},
{
name: 'Disk Detective',
url: 'http://diskdetective.org/'
}
]
}
]);
and this is my directive
js directive
'use strict';
require('./footer.module.js')
.directive('appFooter', appFooter);
// #ngInject
function appFooter($state, FooterLinkConstants) {
var directive = {
link: appFooterLink,
restrict: 'A',
replace: true,
templateUrl: 'footer/footer.html'
};
return directive;
function appFooterLink(scope) {
scope.links = FooterLinkConstants;
});
}
}
All works fine in development. However when I deploy to a remote server address, that address gets prepended to the values in my list above. For example:
instead of
http://www.galaxyzoo.org/
I get
http://preview.zooniverse.org/folgerdemo/http://galaxyzoo.org/
You can have a look at the live example (just inspect the links in the footer)
So why does that happen?
Other questions, like this, suggest to use absolute urls by including the protocol in the addresses; which I am already doing.
I'm pretty sure I'm missing something obvious, but could do with some fresh pair of eyes.
Right. Unfortunately only I could know the answer - not because it was difficult obviously, but because I didn't provide all the pieces of information in my question.
I built my application as a spin-off of somebody else's. The app uses Gulp as task manager.
It turns out that this line
gulp.src(filename).pipe(replace(/(href=")(?![http|\/\/])/g, '$1' + prefix)),
where prefix value is dependent on the type of AWS S3 bucket is used, was replacing my urls.
Once I commented out that line, things were back to normal.
Thanks to people who commented and apologies for wasting your time ;)
So I'm new to Angular and trying to do an app. My server is very basic and written in go. This is my angular code-
(function() {
var app = angular.module('dashboard', []);
app.controller("JobsController", function() {
this.currentJob = 0;
this.jobs = jobs;
this.setCurrentJob = function(index) {
this.currentJob = index;
};
});
var jobs = [
{
'id': 1,
'requester': 'Prakash Sanker',
'description': 'I want you to give me the entire world'
},
{
'id': 2,
'requester': 'MJ Watson',
'description': 'Please give me Spiderman, preferably upside down...but Im not fussy'
},
{ 'id': 3,
'requester': 'Josh Lyman',
'description': 'Matthew Santos as president...or Jed Bartlet..but please not anyone Republican'
},
{
'id': 4,
'requester': 'Barry Allen',
'description': 'A frictionless suit that wont burst into flames when I run at a zillion miles an hour...its for a friend'
},
{
'id': 5,
'requeter': 'A. Bambaata',
'description': 'Boombox, prime condition, from the 80s. Go back in time if you have to'
}
];
})();
This is my index.html -
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="/dashboard.js"></script>
<body>
<div class="dashboard">
<div ng-controller="JobsController as jobsCtrl">
<div class="jobs">
{{jobsCtrl.jobs[0]}}
</div>
</div>
</div>
</body>
This causes this error on my server
2015/07/29 12:18:02 http: panic serving [::1]:56857: runtime error: invalid memory address or nil pointer dereference
goroutine 18 [running]:
net/http.func·009()
/usr/local/go/src/pkg/net/http/server.go:1093 +0x9e
runtime.panic(0x20ed40, 0x4efaed)
/usr/local/go/src/pkg/runtime/panic.c:248 +0xda
html/template.(*Template).escape(0x0, 0x0, 0x0)
/usr/local/go/src/pkg/html/template/template.go:52 +0x30
Why is this happening?
You cannot use angular's default start {{ and end }} brackets in a go template because the go server interprets your angular as go template arguments and pipelines.
"Arguments" and "pipelines" are evaluations of data
To solve this you can make use of angular's $interpolate in your config to change the delimiters that define angular code:
var app = angular.module('dashboard', []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('[{');
$interpolateProvider.endSymbol('}]');
});
Alternatively if your pages are static you can just use Go's built in file server to not cause confusion with templates:
http://golang.org/pkg/net/http/#example_FileServer
So, I am learning Angular JS from codeschool course "Shaping up with angular js". The guy on the videos says, that wrapping code in (function(){}) is a good habbit.
BUT, when I do that Im getting an error[$injector:modulerr]`. Without this self-called function syntax everything works fine. And it bothers me, why they tell to do this way, and why does it cause error?
Seems that you are missing the (); self executing braces at the end of your anonymous function:
(function(){
// all your code
})();
//^^^--------------add this (); at the closing.
Usually the format should look like this:
angular.module("gemStore", []).controller("StoreController", function () {
var gems = [
{ name: "Dodecahedron", price: 2, desc: "some description", canPurchase: true },
{ name: "Pentagonal gem", price: 5.95, desc: "...", canPurchase: true }
];
this.products = gems;
})
Trying to teach myself AngularJS and am stuck on a tutorial trying to build a simple shopping cart. I cannot for the life of me figure out why my {{}} angular tags are not displaying the data in the view, rather they are displaying the literal string (i.e. {{item.price | currency}}) Any insights? I'm worried the code isn't referencing the angular library, but the source is correct - the library is saved as angular.min.js .
Please help!
`
<html ng-app='myApp'>
<head>
<title>Your Shopping Cart </title>
</head>
<body ng-controller='CartController'>
<h1> Your order</h1>
<div ng-repeat='item in items'>
<span>{{item.title}}</span>
<input ng-model='item.quantity'>
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script>
function CartController($scope){
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index){
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>`
When you set a value to ng-app (like ng-app="MyApp"), Angular.JS will expect you to have something like var myModule = angular.module("MyApp", []).
It will look for controllers only inside that, using myModule.controller() method (or can be directly after the module call). A global function will not work.
So, you have 2 options:
Replace <html ng-app="MyApp"> with <html ng-app>
Creating a module:
angular.module("MyApp", []).controller("CartController", function($scope) {
/// ...
});
Note that if you are using Angular.JS 1.3, you have to use method 2, as the global scope function way was removed in that version.
It is because CartController is just a plain function. You have to add it as a controller under the myApp module
angular.module("maApp", []).
controller("CartController", function ($scope) {
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
$scope.remove = function(index){
$scope.items.splice(index, 1);
}
})
I think you are trying this example from Angularjs Book, in which they have clearly mentioned that we are not initializing app for every example, you need to initialize your app. or simply ignore app, start coding from controller. when you mention ng-app="sample" you need to bootstrap that in order to work with controllers directives and everything that you use. In case if you dont want to initialize then you can simply leave ng-app="" blank. Here is working example [fiddle][1]
[1]: http://jsfiddle.net/kaLropns/