Anyone can please tell me what im doing wrong here:
i just update the library, and seems that the code broke for some reason it's not doing anything.
angular library
html5 code
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<header id="header">
<h1 id="logo"></h1>
<div id="menu">
<a ng-click="setRoute('home')" class="btn">Home</a>
<a ng-click="setRoute('about')" class="btn">about</a>
<a ng-click="setRoute('experiments')" class="btn">Experiments</a>
</div>
<div class="color"></div>
<div class="clear"></div>
</header>
<!-- //top -->
<div class="shadow"></div>
<div id="container">
<div ng-view></div>
</div>
angular.js
angular.module('WebSite', []).
config(function($routeProvider) {
$routeProvider.
when('/about', {templateUrl:'folder/test.html', controller:AboutCtrl}).
when('/experiments', {templateUrl:'folder/test.html', controller:ExperimentsCtrl }).
when('/home', {templateUrl:'folder/test.html', controller:HomeCtrl }).
otherwise({redirectTo:'/home'});
});
function AboutCtrl($scope) {
$scope.title = 'About Page';
$scope.body = 'This is the about page body';
}
function ExperimentsCtrl($scope) {
$scope.title = 'Experiments Page';
$scope.body = 'This is the about experiments body';
}
function HomeCtrl($scope) {
$scope.title = 'Home Page';
$scope.body = 'This is the about home body';
}
First you need to use ng-app to setup the angular application with your module. Maybe you already did, but it is not part of the snippet you posted:
<html ng-app="WebSite">
Also, about the setRoute(), I don't know where you copy that from, but you don't need it. Just use the href with the hash, for example:
about
You need to check out the source from github at https://github.com/simpulton/angular-website-routes
There is no changeRoute method. After some dialog, I realized it was best to handle the anchors tags as naturally as possible.
Your menu element should look like this
<div id="menu">
Home
About
Experiments
</div>
Hope this helps!
Related
random quote generator
$(document).ready(function(){
function getQuote(){
var url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
$.getJSON(url,function(data){
$(".quote").html(data.quoteText);
});
};
$("#newQuote").on("click",function(){
getQuote();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container text-center">
<h3>Random Quote Generator</h3>
<p>Some of greatest quotes for thought.</p>
<div class="quoteBox">
<span class = "quote"></span><br>
<span class="auther"></span>
</div>
<button type = "submit" id = "newQuote" class ="btn btn-default">New quote</button>
</div>
it is working while running here but not on codepen. can someone please tell me why?
thanks guys...i got it. since it is the unsafe source so without using https, it work just fine.
This is what i'm trying to achieve.
section1 will be hidden at page load. When user clicks on Advanced, section1 should show & section2 should hide. On clicking Basic, the opposite should happen. Nothing happens when I click any of the anchor tags now. Where am i going wrong.
<div class="container" ng-init="advstatus=true">
Basic
<br/>
Advanced
<div class="section1" ng-hide="advstatus">
///...
</div>
<section ng-show="advstatus" class="section2">
///...
</section>
</div>
In AngularJS you need to use ng-click instead of onclick.
Also, ng-init isn't supposed to be used unless you're in ng-repeat, which you are not (take a look at the Docs).
You should set up the variable in your controller:
<div ng-app ng-controller="myCtrl" class="container" >
Basic
<br/>
Advanced
<div class="section1" ng-show="!advstatus">
Section 1
</div>
<section ng-show="advstatus" class="section2">
Section 2
</section>
</div>
Controller:
function myCtrl($scope) {
$scope.advstatus = true;
}
JS Fiddle
This one is easy to understand
<div class="section1" ng-show="state1">
Section 1
</div>
<div class="section2" ng-show="state2">
Section 2
</div>
<input type="button" value="Advance" ng-click="sec1_show()" />
<input type="button" value="Basic" ng-click="sec2_show()" />
<script>
function homecntrl($scope) {
$scope.state1 = false;
$scope.state2 = true;
$scope.sec1_show = function () {
$scope.state1 = true;
$scope.state2 = false;
};
$scope.sec2_show = function () {
$scope.state2 = true;
$scope.state1 = false
};
};
</script>
Very simple just do this:
<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>
<div ng-if="hideShow">hide and show content ...</div>
my json responce is {isVimeo = true } in angular js
<div ng-show={{isVimeo}}>
----
----
------
</div>
I want to show this div when isVimeo is true,but it is not display at my html.when i click inspect element in my html page the following code is there
<div ng-show="true" class="ng-hide">
</div>
when i remove the ng-hide class in inspect element it is displaying.By default it is not displayong
Can anyone help!
Thanks!
<div ng-show="isVimeo">
And be sure $scope.isVimeo is set to true in the current scope.
angular.module('testApp',[]).controller('testCTRL',function($scope)
{
$scope.wantToShow = true;
$scope.dontShow = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<head>ng-show example:</head>
<body data-ng-app="testApp">
<div data-ng-controller="testCTRL">
<br>
<b>ng-show is true:</b>
<span data-ng-show="wantToShow"> It is showing this becuase ng-show is true</span>
<br><br>
<b>ng-show is false(So,nothing we are showing):</b>
<p data-ng-show="dontShow">It is showing this becuase ng-show is true</p>
</div>
</body>
I have some trouble. I am using this plugin "angular-masonry" (it's on Github) to dynamically build the grid on the page. When the page loads I get this:
http://joxi.ru/YBQPVP3JTJCwfIgLgbc
Here is my code:
<div class="container" style="width:80%">
<h1 style="text-align: center; margin-bottom: 40px">
Category: {{category.text}}
</h1>
<div>(masonry='' load-images="false")
<div class="masonry-brick" ng-repeat="portal in category.claim_portals" style='width:50%;float:left'>
<div>
<h3>(style='margin-left:30px')
Portal: {{portal.text}}
</h3>
<div class="category-list" ng-repeat="claim in portal.portal_claim" style="margin-bottom:2px">
<div class="claim_sections">
<claimforlist claim="claim"></claimforlist>
</div>
</div>
</div>
</div>
</div>
</div>
But after resizing browser window, everything becomes normal and looks like this:
http://joxi.ru/iBQPVP3JTJCUfLnoqQQ
I think that view loads earlier than JSON data arrives.
Can anyone help and tell me how can I load view after the data has arrived? Or if you know another reason of such an issue, please reply.
Thanks in advance.
You can add a scope boolean variable with value set to false, and change the value to true on your http promise success.
Code sample:
function myController($scope, YourDataServer) {
$scope.dataLoadedSuccessfully = false;
yourDataServer
.query()
.$promise
.then(
function(result) {
$scope.dataLoaded = true; // set the value to true
});
}
HTML would look like:
<div id="loadingBar" ng-show="!dataLoadedSuccessfully">Loading data...</div>
<div id="dataWrapper" ng-show="dataLoadedSuccessfully">
<!-- data goes here -->
</div>
I'm currently having problems outputing data in angularJS from a JSON.
I'm pulling JSON from SoundCloud to show song titles. Here is my app:
(function() {
// define the app
var app = angular.module('PartyPlayer', []);
// create the song lister controller
app.controller('SongListCtrl',
function ($scope, $http) {
$http.get("http://api.soundcloud.com/tracks/13158665.json?client_id=MY_CLIENT_ID").success(function(data) {
$scope.songs = data;
});
});
})();
and I'm trying to add the data here:
<div class="row" ng-controller="SongListCtrl as songList">
<div class="small-12 columns">
<div class="list">
<ul>
<li>{{songList.songs.title}}</li>
</ul>
</div>
But nothing shows up. When I console.log(data.title) I get the correct result, but not when I go to add it to my controller in the html. Anyone know the reason why this is happening? Any help would be gratefully appreciated! Thanks!
You have set a scope variable as songs and referring it in the html markup with songsList.songs
Your actual HTML Markup should be
<div class="row" ng-controller="SongListCtrl as songList">
<div class="small-12 columns">
<div class="list">
<ul>
<li>{{songs.title}}</li>
</ul>
</div>