Develop Reference

angularjs application - can i include business logic/backend code in my angular controllers written inside javascript file

I am developing a web application with technologies html,angularjs, java, Spring.
My requirement is to create a search page for my application. Please find the demo here
I need to enter the details and search the information.Please enter Atlanta in From text field and Chicago in To text field and click on SearchLocations button to view the information.
Few questions which i have:
1) Can i write the business logic in my angularjs controllers which are written in javascript file as the sample code shown below:
angular.module('myApp').controller('searchController', ['$scope', function($scope) {
$scope.places = ['', ''];
$scope.searchValue = '';
$scope.submit = function() {
$scope.showGrid = $scope.Passport;
if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
$scope.searchValue = $scope.places[0] + $scope.places[1];
}
};
2) Can i write backend logic in my controllers. If yes can you please suggest any links so that i can proceed or gain knowledge from their.
The javascript code which i have written, can i say it as a backend code/business logic. Sorry about this kind of questions but i thought this is the great platform to put my questions to clarify..
If someone ask me to write backend code for this kind of search functionality, how would anyone proceed. Any suggestions would be very very helpful.The code which i wrote is as shown in the demo plunker above.Thanks.
js code:
angular.module('myApp', ['ngAnimate', 'ui.bootstrap', 'ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit', 'ui.grid.cellNav']);
angular.module('myApp').controller('citiesCtrl', function($scope) {
// $scope. places = undefined;
$scope.items = ["Atlanta", "Chicago", "NewYork"];
$scope.selectAction = function() {
console.log($scope.places1);
};
});
/*Controller for searchLocations button*/
angular.module('myApp').controller('searchController', ['$scope', function($scope) {
$scope.places = ['', ''];
$scope.searchValue = '';
$scope.submit = function() {
$scope.showGrid = $scope.Passport;
if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
$scope.searchValue = $scope.places[0] + $scope.places[1];
}
};
$scope.users = [{
'name': 'AtlantaChicago',
'show': true,
'details': [{
"Travel Date": "10/10/2014",
commute: "Bus"
}, {
"Travel Date": "10/11/2014",
commute: "flight"
}]
}, {
'name': 'NewYorkChicago',
'show': true,
'details': [{
"Travel Date": "3/15/2016",
commute: "flight"
}, {
"Travel Date": "10/12/2016",
commute: "flight"
}, ]
}];
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [{
name: 'Travel Date',
width: '5%'
}, {
name: 'Departurecommute',
enableFiltering: false,
width: '12%'
}],
rowHeight: 20,
enableHorizontalScrollbar: 2
};
}]);
html code:
<div>
<label>
Show one Grid
<input type="radio" name="Passport" ng-model="Passport" value=1 ng-click="ShowPassport('Y')" />
</label>
<label>Show two Grids
<input type="radio" name="Passport" ng-model="Passport" value=2 ng-click="ShowPassport('N')" />
</label>
</div>
<div class="row">
<div class="form-group" ng-controller="citiesCtrl">
<label>From</label>
<input type="text" ng-model="places[0]" placeholder="Type Departure City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
</div>
<div class="form-group" ng-controller="citiesCtrl">
<label>To</label>
<input type="text" ng-model="places[1]" placeholder="Type Destination City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
</div>
</div>
<input type="button" value="SearchLocations" ng-click="submit()">
<div ng-show="showGrid==='1'||showGrid==='2'">
<div ng-repeat="user in users | filter: {name: searchValue} : true ">
<h3>First Grid</h3>
<div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
</div>
</div>
<div ng-show="showGrid==='2'">
<div ng-repeat="user in users | filter: {name: searchValue} : true ">
<h3>Second Grid</h3>
<div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
</div>
</div>

Angular is MVW framework, the main component is view and model. So Basically its used for segregation of page rendering from Server Code. Now business logic related to client request handling and page rendering could be write in angular controller but the logic which is related to our actual data/database can not be write in angular controller.So you better know what kind of code you have in back-end and decide based on that.

fetching data from angular controller and display it on the html view got error

I am developing an online course application and I am trying to display the course details of a course along with video lectures which are on youtube.
My angular controller is fetching the course details from the node.js controller and displaying it on the html view, however it doesn't show get the youtube video link. Its because I changed the mongoose schema for storing course video from a String to String Array. If I keep the mongoose schema for course video as String, then I can view the video.
Here is the mongoose schema, file name is course.server.model.js
'use strict';
/**
* Module dependencies
*/
var mongoose = require('mongoose'),
Schema = mongoose.Schema;
/**
* Course Schema
*/
var CourseSchema = new Schema({
created: {
type: Date,
default: Date.now
},
title: {
type: String,
default: '',
trim: true,
required: 'Title cannot be blank'
},
content: {
type: String,
default: '',
trim: true
},
courseLecture: [{
week_number: { type: Number },
lecture_video: [String]
}],
user: {
type: Schema.ObjectId,
ref: 'User'
}
});
mongoose.model('Course', CourseSchema);
In the schema, I have kept lecture_video as String array within courseLecture.
Here is my angular controller. controller name is courses.client.controller.js
(function () {
'use strict';
angular
.module('courses')
.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.youtube.com/**'
]);
})
.controller('CoursesController', CoursesController);
CoursesController.$inject = ['$scope', 'courseResolve', 'Authentication'];
function CoursesController($scope, course, Authentication) {
var vm = this;
vm.course = course;
vm.authentication = Authentication;
$scope.product = {
name: 'some name',
description: 'some description',
media: [{
src: vm.course.courseLecture.lecture_video
}]
};
console.log('value of courseLecture: ' + vm.course);
console.log('value of youtube embed lecture is: ' + vm.course.courseLecture.lecture_video);
$scope.getIframeSrc = function(src) {
return 'https://www.youtube.com/embed/' + src;
};
}
}());
If I do console.log for vm.course.courseLecture.lecture_video then I get undefined. However, I do get undefined for it, even from node.js controller as well.
Here is my html view. file name :- view-course.client.view.html
<style>
.video-container {
height: 400px;
width: 200px;
}
.thumbnail1 {
height: 450px;
width: 220px;
}
</style>
<section>
<div class="page-header">
<h1 ng-bind="vm.course.title"></h1>
</div>
<small>
<em class="text-muted">
Posted on
<span ng-bind="vm.course.created | date:'mediumDate'"></span>
by
<span ng-if="vm.course.user" ng-bind="vm.course.user.displayName"></span>
<span ng-if="!vm.course.user">Deleted User</span>
</em>
</small>
<p class="lead" ng-bind="vm.course.content"></p>
<div ng-repeat="media in product.media">
<div class="thumbnail1" class="col-xs-12 col-sm-9">
<div class="video-container">
<iframe ng-src="{{getIframeSrc(media.src)}}" frameborder="5" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
Right now with this, I can see the course details using REST calls, only the video link doesn't work, which starts working if in the course schema, in the courseLecture property, if I change the lecture_video from lecture_video: [String] to lecture_video: {type:String}.
I can view the video. I want to store all the video links for a week in an array so the all the videos can be displayed.
Please help me with what I am doing wrong here.

If you got data according to your schema then your angular controller can be like bellow to add each video url in media. because your courseLecture is an array and in courseLecture the lecture_video also an array so need to iterate as media array so need two forEach or for loop.
$scope.product = {
name: 'some name',
description: 'some description',
media: []
};
(vm.course.courseLecture).forEach(function(lecture) {
(lecture.lecture_video).forEach(function(videoUrl) {
$scope.product.media.push({src: videoUrl});
});
});
and Html
<div ng-repeat="media in product.media">
<div class="thumbnail1 col-xs-12 col-sm-9" >
<div class="video-container">
<iframe ng-src="{{getIframeSrc(media.src)}}" frameborder="5" allowfullscreen></iframe>
</div>
</div>
</div>

Since the type has changed, there will be inconsistency in the data that is coming from rest. Hence, You have to provide backward compatibility for the string url as well as the array of string urls.
For string urls :
<div ng-if="isString(product.media)">
<div class="thumbnail1" class="col-xs-12 col-sm-9">
<div class="video-container">
<iframe ng-src="getIframeSrc(product.media.src)" frameborder="5" allowfullscreen></iframe>
</div>
</div>
</div>
For Array of string url :
<div ng-if="!isString(product.media)">
<div ng-repeat="media in product.media">
<div class="thumbnail1" class="col-xs-12 col-sm-9">
<div class="video-container">
<iframe ng-src="{{getIframeSrc(media.src)}}" frameborder="5" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
In controller :
$scope.isString = function(media){
if(Array.isArray(media)){
return false;//returns if it is an string
}
else{
return true; // return if it is an array
}
}

vm.course.courseLecture[0].lecture_video is an array which has an array of videos in the schema. In client you create $scope.product with media key which has an array value, inside is a object again with key src which should have the value vm.course.courseLecture[0].lecture_video. product.media.src[0] is the key you want to iterate.
<div ng-repeat="media in product.media.src[0]">
<div class="thumbnail1" class="col-xs-12 col-sm-9">
<div class="video-container">
<iframe ng-src="{{getIframeSrc(media)}}" frameborder="5" allowfullscreen></iframe>
</div>
</div>

Why html5lightbox doesn't work with angular?

I use html5lightbox to open images and pdf file in lightbox. Now I added angular.js and when click on a link, it takes me to enother page instead of opening it in a lightbox
var app = angular.module('MyApp', []);
var tiles =
[
{
class: "fileTile",
link: "images/9-credit-1.jpg",
header: "ToDo List",
content: "PDF File contains information about SAP sales and customers"
},
{
class: "videoTile",
link: "https://www.youtube.com/watch?v=Nfq3OC6B-CU",
header: "Fiori Tutorial",
content: "This Video contains information about SAP sales and customers"
},
{
class: "fileTile",
link: "images/canberra_hero_image_JiMVvYU.jpg",
header: "A Random Image",
content: "PDF File contains information about SAP sales and customers"
},
{
class: "fileTile",
link: "images/national-basketball-association-scoring-big-with-real-time-statistics-and-sap-hana.pdf?iframe=true",
header: "National Basketboal Team",
content: "PDF File contains information about SAP sales and customers"
}
];
app.controller("DisplayController", function($scope, $http){
$scope.tiles = tiles;
});
What can I do make html5lightbox working???

Use angular-bootstrap-lightbox.Simply awesome.
Here is the Working Plunker
html
<ul ng-controller="GalleryCtrl">
<li ng-repeat="image in images">
<a ng-click="openLightboxModal($index)">
<img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
</a>
</li>
</ul>
JS (controller)
angular.module('app').controller('GalleryCtrl', function ($scope, Lightbox) {
$scope.images = [
{
'url': '1.jpg',
'caption': 'Optional caption',
'thumbUrl': 'thumb1.jpg' // used only for this example
},
{
'url': '2.gif',
'thumbUrl': 'thumb2.jpg'
},
{
'url': '3.png',
'thumbUrl': 'thumb3.png'
}
];
$scope.openLightboxModal = function (index) {
Lightbox.openModal($scope.images, index);
};
});
DEMO

Are you sure there is
data-lightbox
like identifier that means this link will be shown in lightbox..
If i remember truely you must give an attribute like this for lightbox like codes.
Or can you whare angular template/html that u are trying to use for.
Regards

Webpage jumping after using anchorscroll and http.get

Here is my index.html
<body ng-cloak>
<div id="main">
<!-- angular templating -->
<div ng-view=""></div>{{scrollTo}}
</div>
I have a top menu where I'm using anchors. Top Menu is generated from json files.
Part of top menu json File :
{
"menu": "About Me",
"hrefs": "#/about",
"show": "true",
"menuitem": [
{"submenu": "Research", "addresstoredirect": "#about?scrollTo=research"},
{"submenu": "Education", "addresstoredirect": "#about?scrollTo=education"},
{"submenu": "Career Awards", "addresstoredirect": "#about?scrollTo=careerawards"},
{"submenu": "Visited Institutes", "addresstoredirect": "#about?scrollTo=visitedinstitutes"},
{"submenu": "CV", "addresstoredirect": "#about?scrollTo=cv"}
]
},
Here is method for anchorscroll :
mainApp.run(function($rootScope, $location, $anchorScroll, $routeParams,$timeout) {
$rootScope.$on('$routeChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
if ($location.hash($routeParams.scrollTo)) {
$timeout(function() {
var hashId = $location.hash($routeParams.scrollTo);
$anchorScroll();
//TODO
},3000);
}});
});
Each view also contains dynamic content downloaded from json files for example here is aboutView controller :
mainApp.controller('aboutController', function ($scope, $http,$routeParams,$localStorage){
if ($localStorage.message === "ENG")
{
$http.get('../app/assets/json/abouttxtEng.json').success(function(data) {
$scope.aboutTexts = data;
})}
And aboutView.html
<h1>About View</h1>
<p>{{ message }}</p>
<br>
<br>
<p>{{aboutTexts[0].aboutString[0]}}
<p>{{aboutTexts[0].aboutString[1]}}
<p>{{aboutTexts[0].aboutString[2]}}
<br>
<br>
<p>{{aboutTexts[1].aboutString2[0]}}
<p>{{aboutTexts[1].aboutString2[1]}}
<p>{{aboutTexts[1].aboutString2[2]}}
<a name="research"></a>
<div id="research">
<br>
<br>
<h3>This is research section of about page</h3>
Research
<p>{{aboutTexts[2].Research[0]}}
<p>{{aboutTexts[2].Research[1]}}
<p>{{aboutTexts[2].Research[2]}}
</div>
<a name="education"></a>
<div id="education">
And last piece of the storry. Part of abouttxtEng.json file :
[{
"aboutString":
[
"aboutText1ENG",
"aboutText2ENG",
"aboutText3ENG"
]
},
{
"aboutString2":
[
"aboutText4ENG",
"aboutText5ENG",
"aboutText6ENG"
]
},
{
"Research" :
[
"ResearchText1ENG",
"ResearchText2ENG",
"ResearchText3ENG",
"ResearchText4ENG"
]
},
{
So the problem is when I remove timeout from $rootScope.$on and click any anchor on topmenu, "jump will be executed site will be positioned correctly, but after a while http.get will return aboutText1ENG etc. and page will go down. When I used timeout ( everything is fine ) but 3 seconds is just my assumption. What if http.get will work slower etc. Maybe there is a way to wait before executing jump after http.get will finish ?
I have second solution for that, just in case. I can put whole content in *.js files and load it in the beginning in index.html, but it is good for small amount of content, for bigger it is not. Can sb can help me out ?
P.S Don't bother about html it's just a tests.

Angular scope and Kendo UI controls

Suppose I have following html file:
<!DOCTYPE html>
<html>
<head>
<title>LOG</title>
</head>
<body>
<div class="panel panel-success">
<!-- Default panel contents -->
<div class="panel-heading">Log data</div>
<div class="panel-body">
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Start processing at {{StartProcessing }}</li>
<li class="list-group-item">Finished processing at {{EndProcessing }}</li>
</ul>
<div id="logTvId" kendo-tree-view
k-data-source="treeData">
</div>
</div>
</div>
and following controller code:
Arch.LogController = function ($scope, $resource, $routeParams)
{
var LogResource = $resource('log/:markerId', {}, {
get: {method: "GET", isArray: false}
});
LogResource.get({markerId: $routeParams.markerId}, function (data1)
{
$scope.StartProcessing = new Date(data1.StartProcessing).toLocaleString();
$scope.EndProcessing = new Date(data1.EndProcessing).toLocaleString();
$scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
{ text: "Item 1" },
{ text: "Item 2", items: [
{ text: "SubItem 2.1" },
{ text: "SubItem 2.2" }
] },
{ text: "Item 3" }
]});
});
};
After page load I can see StartProcessing and EndProcessing on page, but I can't see treeview. If I take out code related to $scope.treeData from resource load (say the next instruction after)
then everything works as expeteced. If I add $scope.$apply() to my initial controller code it throws exception...
What I'm doing wrong? Should I deal with promises ($q ??) and wait after resource is loaded?
Thanks in advance.

Ok, actually problem is solved. In resource handler I create kendo treeview by "hand" (via jquery, as usual), so I'm not using kendo-tree-view directive. Simple div with id + jquery.