angularjs factory service error - angularjs

i am getting this error
...([c,d,arguments]);return k}}if(!e)throw Error("No module: "+d);var b=[],c=[],j=a...
can anyone please help on this issue.
<div ng-app="app">
<div ng-controller="booksCtrl">
<div ng-repeat="book in allBooks">
<ul>
<li>{{book.title}}</li>
<li>{{book.author}}</li>
<li>{{book.year}}</li>
</ul>
</div>
</div>
</div>
..............................
(function(){
angular.module('app').factory('dataService', dataService);
function dataService(){
return {
getAllBooks : getAllBooks,
};
function getAllBooks(){
return[
{
book_id:1,
title:"hari potter",
author:"J.K. Rowling",
year:2009
},
{
book_id:2,
title:"The Cat in the Hat",
author : "DR. Seuss",
year : 1967
},
{
book_id:3,
title:"Encyclopedia",
author : "Donald j Sobol",
year : 1940
}
];
};
};
}());
(function(){
angular.module('app').controller('booksCtrl', booksCtrl);
function booksCtrl($scope, dataService){
$scope.allBooks = dataService.getAllBooks();
}
}());

I think you have not initialized module app. You have to initialized your module once using syntax
angular.module('app', [])
in any one of js file.
(function(){
angular.module('app',[]).controller('booksCtrl', booksCtrl);
function booksCtrl($scope, dataService){
$scope.allBooks = dataService.getAllBooks();
}
}());
from official documentation https://docs.angularjs.org/guide/module
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

Related

How to use angular-translate in HTML tag property as a function param

We have this:
<td ... ng-click="someFunction(param)" ...></td>
The function is defined in one of the controllers in controllers.js:
$scope.someFunction= function (param) { ... }
and the param is expected to be translated string. I tried different approaches, e.g.:
<td ... ng-click="someFunction('PARAM_TRANSLATION_KEY' | translate)" ...></td>
or:
<td ... ng-click="someFunction({{'PARAM_TRANSLATION_KEY' | translate}})" ...></td>
and also others, but nothing seems to be working and I couldn't find this in the angular-translate documentation and/or I-net.
Any ideas?
angular translate has a translation service that you can use inside your js code ,
https://angular-translate.github.io/docs/#/api/pascalprecht.translate.$translate
simply pass the function as
ng-click="someFunction('PARAM_TRANSLATION_KEY')
and use the service inside the function like so:
function(param) { $translate(param).then(translation) { ... } }
UPDATE : if you cant change the code then you can pass the param like so
Add the service to the scope so you can access it
Use the service to translate and call your function after callback
Example:
var translations = {
HEADLINE: 'What an awesome module!',
PARAGRAPH: 'Srsly!',
NAMESPACE: {
PARAGRAPH: 'And it comes with awesome features!'
}
};
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(['$translateProvider',
function($translateProvider) {
// add translation table
$translateProvider
.translations('en', translations)
.preferredLanguage('en');
}
]);
app.controller('myController', function($scope, $translate) {
$scope.translationServiceCallback = function(param, cb) {
$translate(param).then(function(translation) {
cb(translation);
});
}
$scope.log = function(param) {
console.log(param)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-translate/2.11.1/angular-translate.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myController">
<div>
<button ng-click="translationServiceCallback('HEADLINE',log)">Translate</button>
<button ng-click="log('HEADLINE')">WYSIWYG</button>
</div>
</div>
</div>

How to send data from one controller to other in angularjs

How to send the json data from FirstCtrl to secondCtrl using angularjs.
Can anyone please help me out regarding this ...
First.js:
angular.module('myApp')
.controller('FirstCtrl', function ($scope) {
//firstCtrl json data
$.getJSON("sample.json", function (json) {
console.log(json);
});
});
Second.js:
angular.module('myApp')
.controller('secondCtrl', function ($scope) {
//get the firstCtrl json data here
});
I would also suggest a service that gets and returns data from and to the controllers.
we create the two controllers and then we create a service with two functions:
1. one to get the json data
2. one to return the json data
Like so:
'use strict';
angular.module('myApp', [])
.controller('FirstCtrl', function( $scope, myService ){
//we create or get the json object
$scope.myjsonObj = {
'animal':'cat',
'feed':'frieskies',
'color':'white',
'sex':'male'
};
//pass the json object to the service
myService.setJson($scope.myjsonObj);
})
.controller('SecondCtrl', function( $scope, myService ){
//call service getJson() function to get the data
$scope.myreturnedData = myService.getJson();
})
.factory('myService', function(){
var myjsonObj = null;//the object to hold our data
return {
getJson:function(){
return myjsonObj;
},
setJson:function(value){
myjsonObj = value;
}
}
});
and the HTML partial would be:
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
{{myjsonObj}}
</div>
<hr>
<div ng-controller="SecondCtrl">
{{myreturnedData.animal}}
{{myreturnedData.feed}}
{{myreturnedData.color}}
{{myreturnedData.sex}}
</div>
Hope helps, good luck.
If the second controller is nested you can use $parent to access the scope of the first controller. You would need to assign the value of json to $scope such as
$scope.json = my_json
Then in the second controller you can say
$scope.json = $scope.$parent.json;
var app = angular.module('myApp', []);
app.controller('Ctrl1', function ($scope, $rootScope) {
$scope.msg = 'World';
$rootScope.name = 'AngularJS';
});
app.controller('Ctrl2', function ($scope, $rootScope) {
$scope.msg = 'Dot Net Tricks';
$scope.myName = $rootScope.name;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html>
<body ng-app="myApp">
<div ng-controller="Ctrl1" style="border:2px solid blue; padding:5px">
Hello {{msg}}!
<br />
Hello {{name}}!
(rootScope)
</div>
<br />
<div ng-controller="Ctrl2" style="border:2px solid green; padding:5px">
Hello {{msg}}!
<br />
Hey {{myName}}!
<br />
Hi {{name}}! (rootScope)
</div>
</body>
</html>
Yo can simply make a new service with two functions one to save the date and one to give them, this service then can be accessed from any where.
In addition, you can assign the data to a $rootScope.someVar for example, and in this way too you can retrieve the data from any where
Just use $rootScope to achieve this.
In your first controller assign $rootScope.json = $scope.json; and It will available on the entire application. So, you can access $rootScope.json wherever you want on that particular app

AngularJS: ng-app inside ng-include

I have a template like this.
<body ng-app="demo" ng-controller="demo">
<div ng-include="/main.html">
</div>
</body>
And the main.html is.
<div ng-app="main" ng-controller="main>
""
</div>
here is the js.
JS-1
var myapp = angular.module('demo', []);
myapp.controller('demo', function($scope,$routeParams, $route,$http) {
$scope.variable="444"
})
JS-2
var mainapp = angular.module('mainapp', []);
myapp.controller('main', function($scope,$routeParams, $route,$http) {
})
Is it possible to access the scope of JS-1 inside JS-2?, if yes how, if no is there any solution to this.Thanks.
It depend what you want to do.
If you want read $scope.variable variable from JS-1, you should see it in JS-2 $scope.
If you want modify $scope.variable form JS-1, you should create method in JS-1:
$scope.changes = function(data){
$scope.variable = data;
}
This method also should be available in JS-2 $scope.
This isn't nice solution but should work.
The best solution is to create service which will provide operations on JS-1 fields.

How to execute a function defined in a controller attached to a previous page after ons.navigator.popPage() ?

I discover Onsen UI and I have a problem :
1- I defined 2 pages page-1.html and page-2.html with a controller attached (page1Ctrl and page2Ctrl).
2- I defined a function in page1Ctrl to go to the page-2.html :
$scope.ons.navigator.pushPage('page-2.html');
which executes page2Ctrl
3- In this page, i have a button which executes a code that returns on page-1.html (with popPage()). This function is attached to page2Ctrl :
function page2Ctrl($scope) {
$scope.functionToPopPage = function() {
// >>> Here I would like to execute a function attached to page1Ctrl
$scope.ons.navigator.popPage();
};
}
4- then, i want to launch a function defined in the page1Ctrl, how could i process it ?
Thanks
You can share controller's function with service. Try to register the function you want to attache to both page1Ctrl and page2Ctrl, then call the shared function from page2Ctrl. The following code is a example.
page1.html
<ons-page class="center" ng-controller="page1Ctrl">
<ons-navigator-toolbar
title="Welcome">
</ons-navigator-toolbar>
<h1>Page 1</h1>
<ons-button ng-click="goToPage2()">Push Page 2</ons-sbutton>
</ons-page>
page2.html
<ons-page class="center" ng-controller="page2Ctrl">
<ons-navigator-toolbar title="Page 2">
</ons-navigator-toolbar>
<h1>Page 2</h1>
<button class="topcoat-button" ng-click="popToPage1()">Pop Page1</button>
</ons-page>
app.js
var myApp = angular.module('myApp', ['onsen.directives']);
myApp.factory('pageService', function(){
return{
foo : function()
alert('foo');
}
}
});
myApp.controller('page1Ctrl', function($scope, pageService){
$scope.goToPage2 = function(){
pageService.foo();
$scope.ons.navigator.pushPage("page2.html");
}
});
myApp.controller('page2Ctrl', function($scope, pageService){
$scope.popToPage1 = function(){
pageService.foo();
$scope.ons.navigator.popPage();
}
});
idea:
You declare a global variable
In the controller you page1Ctrl assigns your function to this variable
And you used in page2Ctrl :)
ex :
var heloWord;
function page1Ctrl($scope) {
heloWord = function() {
console.log('Helo Word');
}
}
function page2Ctrl($scope) {
$scope.functionToPopPage = function() {
heloWord();
$scope.ons.navigator.popPage();
};
}

ng-click error with angular 1.2.0 and 1.2.1

I have some angular code that worked in angularjs 1.2.0-rc.1, rc.2 and rc.3. But it doesn't work in 1.2.0 and 1.2.1.
I have illustrated the problem on http://plnkr.co/edit/KBYFJQ2sZeOJ79Hid1gG
My HTML is
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.2.1" data-semver="1.2.1"
src="http://code.angularjs.org/1.2.1/angular.js"></script>
<link rel="stylesheet" href="style.css"/>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<ul>
<li ng-repeat="menuEntry in menuItems">
<a ng-href="#" ng-click="{{menuEntry.action}}">{{menuEntry.text}}</a>
</li>
</ul>
</body>
</html>
and my angular code is
'use strict';
angular.module('app', [])
.controller('AppCtrl', function ($scope) {
var menuItems = [
{
text: "Log off",
action: 'logoff()'
}
];
var logoff = function () {
alert("logoff called")
};
$scope.menuItems = menuItems;
$scope.logoff = logoff;
});
If I run this code with 1.2.0-rc.3 it runs without error and I get an alert box when I click on the link. But if I run it with 1.2.0 or 1.2.1 I get an error:
Error: [$parse:syntax] Syntax Error: Token 'menuEntry.action' is unexpected, expecting [:] at column 3 of the expression [{{menuEntry.action}}] starting at [menuEntry.action}}].
Can anybody help me with this problem?
The docs for ngClick don't indicate that you can use {{..}} bindings for the callable expression. I think it may just work by accident in older versions, and an implementation change in the newer versions has broken it.
Really this seems a strange way to be hooking your code up anyway. Are you able to replace the action attribute with a real function to call? e.g.
angular.module('app', [])
.controller('AppCtrl', function ($scope) {
$scope.logoff = function () {
alert("logoff called")
};
$scope.menuItems = [
{
text: "Log off",
action: $scope.logoff
}
];
});
Then
<a ng-href="#" ng-click="menuEntry.action()">{{menuEntry.text}}</a>
If you do need to start with a dynamic expression you can call it with $scope.eval. e.g.
var menuItems = [
{
text: "Log off",
action: 'logoff()'
}
];
angular.forEach(menuItems, function(menuItem) {
menuItem.callableAction = function() { return $scope.$eval(menuItem.action); }
});
then
<a ng-href="#" ng-click="menuEntry.callableAction()">{{menuEntry.text}}</a>

Resources