RcBuilder@walla.com
call centre: 054-5614020

angular tracks basic example

27
Jan
2016
Posted by: RcBuilder  /   Category: $http / AngularJS / autocomplete / Controllers / CSS / Data Providers / Directives / Events / Factories / HTML / JAVASCRIPT / jQuery / jquery-ui / Model / module / OOP / Services / Views   /   No Comments

angular tracks basic example

app.js

var module = angular.module(‘my-app’, []);

module.controller(‘homeController’, function ($scope, tracksFactory) {
$scope.myList = [];
$scope.tracks = [];

$scope.AddToList = function (index) {
$scope.myList.push($scope.tracks[index]);
}

$scope.Search = function () {
tracksFactory.searchForTracks($scope.searchPhrase, function (response) {
$scope.tracks = response;
});
}

$scope.LoadAutocomplete = function () {
if ($scope.searchPhrase.lengh < 3) return;
tracksFactory.getNames($scope.searchPhrase, function (response) {
angular.element(“#searchPhrase”).autocomplete({
source: response
});
});
}
});

module.factory(‘tracksFactory’, function ($http) {
var server = ‘http://ws.audioscrobbler.com/2.0/’;
var queryBase = ‘?method=track.search&track={0}&api_key=0604d2c5492dc743997cabe3fd636099&format=json&limit={1}’;

var foreach = function (arr, callback) {
for (var i = 0; i < arr.length; i++)
callback.call(arr[i]);
};

return {
getNames: function (searchPhrase, onSuccess) {
$http.get(server.concat(queryBase.replace(‘{0}’, searchPhrase).replace(‘{1}’, 10)))
.success(function (response) {
var trackNames = [];
foreach(response.results.trackmatches.track, function () {
trackNames.push(this.name);
});

onSuccess(trackNames);
})
},
searchForTracks: function (searchPhrase, onSuccess, onFailure) {
$http.get(server.concat(queryBase.replace(‘{0}’, searchPhrase).replace(‘{1}’, 10)))
.success(function (response) {
var tracks = [];

foreach(response.results.trackmatches.track, function () {
tracks.push({
name: this.name,
image: this.image[1]['#text'],
artist: this.artist,
url: this.url,
id: this.mbid
});
});

onSuccess(tracks);
})
}
};
});

module.directive(‘ngTrack’, function () {
return {
restrict: ‘E’,
templateUrl: ‘track.partial’,
replace: true,
scope: {
track: ‘=track’,
click: ‘&click’
}
}
});

html

<!DOCTYPE html>

<html ng-app=”my-app” lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title></title>

<link rel=”stylesheet” type=”text/css”href=”site.css” />
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css”>
</head>
<body>
<div ng-controller=”homeController”>

<div class=”ui-widget”>
<input id=”searchPhrase” ng-model=”searchPhrase” ng-change=”LoadAutocomplete()”>
</div>
<input type=”button” ng-click=”Search()” value=”search” />

<ul>
<li ng-repeat=”track in tracks”>
<ng-track track=”track” click=”AddToList($index);”></ng-track>
<!–<div ng-include=”‘track.partial’”></div>–>
</li>
</ul>

<h4>myList</h4>
<ul>
<li ng-repeat=”track in myList track by $index”>
<ng-track track=”track” click=”AddToList($index);”></ng-track>
<!–<div ng-include=”‘track.partial’”></div>–>
</li>
</ul>
</div>

<script type=”text/ng-template” id=”track.partial”>
<div class=”trackWrapper”>
<div class=”track”>
<img src=”{{ track.image }}” alt=”{{ track.name }}” />
<div>
<h5><a href=”{{ track.url }}”>{{ track.name }}</a></h5>
<p>
{{ track.artist }}
</p>
</div>
<div>
<input type=”button” ng-click=”click()” value=”add to list” />
</div>
</div>
</div>
</script>

<script src=”//code.jquery.com/jquery-1.10.2.js”></script>
<script src=”//code.jquery.com/ui/1.11.4/jquery-ui.js”></script>
<script type=”text/javascript” src=”https://code.angularjs.org/1.4.9/angular.min.js”></script>
<script type=”text/javascript” src=”app/app.js?ver=3″></script>
</body>
</html>

css

ul {
list-style:none;
padding:0px;
margin:0px;
}

div.trackWrapper {
padding:8px 0;
}

div.trackWrapper > div.track {
border:solid 1px #ddd;
padding:12px;
}

div.trackWrapper > div.track div, div.trackWrapper > div.track img {
display:inline-block;
}

Author Avatar

About the Author

בניית אתרים ופתרונות טכנולוגים | RcBuilder

No Comments


  • פיתוח מערכות
  • פתרונות טכנולוגים
  • קידום אתרים
  • בניית אתרים