The angular project I am working on is adding a configuration file to it. The configuration file is loaded as a JSON, it contains strings that will be replacing the static strings that are currently used in the current version of the project. There is multiple modules where the JSON's data needs to be used, what would be the best way to make the JSON file global throughout the project? I was thinking about loading it separately in each module using a HTTP GET, but I need the JSON to be loaded before everything else.
Thanks.
You probably can use a service. define a object on the scope and on that define the JSON. create a function which returns the JSON and inject it wherever the need arises. Implementation maybe like:
app.service("commonService", ["$log", function($log){
this.myConfiguration = {
id:"0",
name:"abc"
};
this.mystatic = function(){
return myConfiguration;
}
}
Now you can inject it and use in a controller as:
app.controller("mycontroller", function($scope, commonService){
$scope.static = commonService.myStatic();
//other code here
});
you can use value:
// create the module as usual
angular.module("myapp",[/*...*/]);
// on any other app point, set your json:
angular.module("myapp").value("myjson",{/*...*/});
If you don't need is before you do any routing you could use a service. This is what a config service could look like:
(untested)
app.service('ConfigService', function ($q, $http) {
// loads the config file
this.loadConfig: function() {
var deferred = $q.defer();
if(angular.isDefined(this.config) && this.config.length){
deferred.resolve(this.config);
}
$http.get('config.json')
.success(function(response) {
this.config = response;
deferred.resolve(this.config);
})
.error(function(){
deferred.reject('Could not load "config.json" file');
});
return deferred.promise;
};
// returns a config setting
this.get: function(key){
// if the config is not loaded yet, load it and call self
if(!angular.isDefined(this.config) || !this.config.length){
this.loadConfig().then(function(){
return this.get(key);
})
}
// config is loaded. Return requested key
if(angular.isDefined(config[key])){
return config[key];
}else{
console.error( 'Could not load config value: ' + key );
return false;
}
};
});
Related
I have two modules namely 'users' and 'groups', and have different routes in both of them. Now I want to use them in some other module, I am trying to require both the modules but getting error as required is not defined. How can I resolve it?
Here is my code:
appGroup.js
let myNinjaAppforGroup = angular.module('myNinjaAppforGroup',['ngRoute']);
//injected ngRoute module as a dependency in the above statement
myNinjaAppforGroup.config(['$routeProvider',function($routeProvider)
{
//code executes before application runs
$routeProvider
.when('/group/home',{
templateUrl:'views/home.html', //which view to be rendered if user visits this url
})
.when('/group/directory',{
templateUrl:'views/directory.html',
controller:'NinjaController'//it will be the controller for the mentioned route
}).otherwise({
redirectTo:'/group/home'
});
}]);
myNinjaAppforGroup.run(function()
{
//code executes when application runs
});
myNinjaAppforGroup.controller('NinjaController',['$scope','$http',function($scope,$http){
//scope is the glue between controller and view. Its also a dependency
$scope.message="Hey Angular!";//this is accessable in views
$scope.removeNinja = function(ninja)
{
let removedNinja = $scope.ninjas.indexOf(ninja);
$scope.ninjas.splice(removedNinja,1);
}
$scope.addNinja = function()
{
$scope.ninjas.push({
name:$scope.newNinja.name,
rate:parseInt($scope.newNinja.rate),
belt:$scope.newNinja.belt,
available:true
});
$scope.newNinja.name="";
$scope.newNinja.rate="";
$scope.newNinja.belt="";
}
$http.get('model/ninjas.json').then(function(response){
$scope.ninjas=response.data;
//console.log(response); for checking the object received
//whatever data we are getting from the http service is being saved here.
})
}]);
module.exports = myNinjaAppforGroup;
`and appUsers.js`
let myNinjaAppforUsers = angular.module('myNinjaAppforUsers',['ngRoute']);
//injected ngRoute module as a dependency in the above statement
myNinjaAppforUsers.config(['$routeProvider',function($routeProvider)
{
//code executes before application runs
$routeProvider
.when('/user/home',{
templateUrl:'views/home.html', //which view to be rendered if user visits this url
})
.when('/user/directory',{
templateUrl:'views/directory.html',
controller:'NinjaController'//it will be the controller for the mentioned route
}).otherwise({
redirectTo:'/user/home'
});
}]);
myNinjaAppforUsers.run(function()
{
//code executes when application runs
});
myNinjaAppforUsers.controller('NinjaController',['$scope','$http',function($scope,$http){
//scope is the glue between controller and view. Its also a dependency
$scope.message="Hey Angular!";//this is accessable in views
$scope.removeNinja = function(ninja)
{
let removedNinja = $scope.ninjas.indexOf(ninja);
$scope.ninjas.splice(removedNinja,1);
}
$scope.addNinja = function()
{
$scope.ninjas.push({
name:$scope.newNinja.name,
rate:parseInt($scope.newNinja.rate),
belt:$scope.newNinja.belt,
available:true
});
$scope.newNinja.name="";
$scope.newNinja.rate="";
$scope.newNinja.belt="";
}
$http.get('model/ninjas.json').then(function(response){
$scope.ninjas=response.data;
//console.log(response); for checking the object received
//whatever data we are getting from the http service is being saved here.
})
}]);
module.exports = myNinjaAppforUsers;
Now I have another file as app.js, I want to require these two files there, how can this be done?
Require doesn't work in browser.Basically require is a node_module by which we can access other modules or files.So please if you are using it on browser side then try other things like import or self.import or injecting.
Doc: http://requirejs.org/docs/download.html
Add this to your project: http://requirejs.org/docs/release/2.2.0/minified/require.js
and take a look at this http://requirejs.org/docs/api.html
I have been trying to inject $log in to a component created by a require statement for some client Angular.
var App = require('./app/containers/App');
var Header = require('./app/components/Header');
require('angular-ui-router');
var routesConfig = require('./routes');
import './index.css';
angular
.module('app', ['ui.router'])
.config(routesConfig)
.controller(App.App, ['$log'])
.service('todoService', todos.TodoService)
.component('app', App)
.component('headerComponent', Header);
The code for header is
module.exports = {
template: require('./Header.html'),
controller: Header,
bindings: {
todos: '='
}
};
/** #ngInject */
function Header(todoService) {
this.todoService = todoService;
}
Header.prototype = {
handleSave: function (text) {
if (text.length !== 0) {
this.todos = this.todoService.addTodo(text, this.todos);
}
}
};
~
The code for App is
module.exports = {
template: require('./App.html'),
controller: App
};
function App($log) {
this.log = $log;
$log.error('Hello from App');
}
I can inject $log as dependency for App as I have access to the controller. But attempting the same task for Header is difficult,because Header is created by require which does not seem to allow access to the controller function.
What I like to know is there a way round this?
I am trying to find a way of logging information from any possible javascript function in header.js.
I have seen any alternatives other than using $log to log information in a client side application
My solution so far has been to say in code written in the require block.
var ing = angular.injector(['ng']);
this.$log = ing.get('$log');
this.$log.error('I am a message');
I think this is the wrong way of doing things, it gives me what I want, but I expect it will break at some point. I find having access to $log is useful for debugging only. Its not sort of thing I need for any production code.
All I was trying to do was to get access to the $log angular wrapper. Turns out all I had to do was add $log to the argument list.
function Header(todoService,$log) {
$log.log('I am a log message');
this.todoService = todoService;
}
I am bit of a Angular 1.5 newbie and I had assume that you had to inject the $log to get the right response. Just declare it seems to be a bit of a kop out.
My restangular call has a baseUrl set in a config file to http://localhost:3000/. So a call like
Restangular.all("awards").customPOST(award)
Calls at baseUrl+"awards"
Now when I write a test for this, i have to write:
httpBackend.expectPOST("http://localhost:3000/awards")
But later if this baseUrl changes, I will have to change it in a lot many .expect() methods.
Is there anyway to set a baseUrl for the expect method, in a config file somewhere?
So that the expect method something like-
httpBackend.expectPOST(baseUrl + "awards");
So that any change in the baseUrl does not require any change in the expect() method?
You can create an angular.constant and then inject that constant wherever it is required.
var app = angular.module('app', []);
app.constant('Configuration', {
BASE_URL: 'http://localhost:3000/'
});
app.factory('RestApiService', function($http, Configuration) {
var awardApi = Configuration.BASE_URL + '/awards';
return {
getAwards: fucntion() {
return $http.get(awardApi);
};
};
});
I'm new to Sails and don't know exactly where to put the initialisation of an object to be unique in all the app. After reading the docs I assumed that I can have it in the global sails object, but not sure if is the better place.
I'm using the new Appcelerator ArrowDB to store my users and objects. Docs talk about declare the appropriate vars and use it, with the APP_KEY.
var ArrowDB = require('arrowdb'),
arrowDBApp = new ArrowDB('<App Key>');
function login(req, res) {
var data = {
login: req.body.username,
password: req.body.password,
// the req and res parameters are optional
req: req,
res: res
};
arrowDBApp.usersLogin(data, function(err, result) {
if (err) {
console.error("Login error:" + (err.message || result.reason));
} else {
console.log("Login successful!");
console.log("UserInfo: " + JSON.stringify(result.body.response.users[0]));
}
});
}
But I will need to use constantly that arrowDBApp var to create, update, delete objects in the database, so I think the best way is to initialize it in the starting script app.js and share across the app.
I tried it, but I was not able to store it in the sails var, it seems that this var is not available (or lose its config) until sails.lift() is executed.
This code (app.js file) shows nothing in the console:
// Ensure we're in the project directory, so relative paths work as expected
// no matter where we actually lift from.
process.chdir(__dirname);
// Ensure a "sails" can be located:
(function() {
var sails;
try {
sails = require('sails');
} catch (e) {
console.error('To run an app using `node app.js`, you usually need to have a version of `sails` installed in the same directory as your app.');
console.error('To do that, run `npm install sails`');
console.error('');
console.error('Alternatively, if you have sails installed globally (i.e. you did `npm install -g sails`), you can use `sails lift`.');
console.error('When you run `sails lift`, your app will still use a local `./node_modules/sails` dependency if it exists,');
console.error('but if it doesn\'t, the app will run with the global sails instead!');
return;
}
// Try to get `rc` dependency
var rc;
try {
rc = require('rc');
} catch (e0) {
try {
rc = require('sails/node_modules/rc');
} catch (e1) {
console.error('Could not find dependency: `rc`.');
console.error('Your `.sailsrc` file(s) will be ignored.');
console.error('To resolve this, run:');
console.error('npm install rc --save');
rc = function () { return {}; };
}
}
// My own code
var APP_KEY = 'mykey';
var ArrowDB = require('arrowdb');
sails.arrowDBApp = new ArrowDB(APP_KEY);
console.log("Hi" + JSON.stringify(sails));
// Start server
sails.lift(rc('sails'));
console.log("Finish");
})();
No "HI" and no "Finish" are printed. If I try to use sails.arrowDBApp in another controller, it is undefined.
Tips are welcome.
It's not advisable to modify app.js unless you really need to.
The usual space to save all configuration information (e.g. the APP_KEY) is in the config directory in your project root.
One-time initializations (e.g. ArrowDB initialization) can be added to config/bootstrap.js.
Update
In config/arrowdb.js (you need to create this file yourself):
module.exports.arrowdb = {
APP_KEY: 'yourappkey',
ArrowDBApp: null
};
In config/bootstrap.js:
var ArrowDB = require('arrowdb');
module.exports.bootstrap = function(next){
sails.config.arrowdb['ArrowDBApp'] = new ArrowDB(sails.config.arrowdb['APP_KEY']);
next(); // Don't forget to add this
};
In your controller:
'task': function(req, res, next) {
sails.config.arrowdb['ArrowDBApp'].usersLogin(...);
// and so on.
// You could also add something like
// var ADB = sails.config.arrowdb['ArrowDBApp'];
// at the top in case you need to use it on and on.
}
Use config/bootstrap.js to initialize something before Sails lifted. Sometimes if we want to put something in global variable, this approach is good to use, like define/ override native Promise with Bluebird Promise.
Use api/services to put some method or other things that you will use regularly in your code (controllers, models, etc.), like Mail Service, that handle sending email within your application.
Use config at config folder to predefined something at sails.config[something]. It can be an object, function, or whatever in order to become configurable, like put Twitter API Key to use Twitter REST API.
To achieve what you wanted, I'll try to use service and bootstrap.js. Try this example.
Create service file at api/services/ArrowDBService.js
Put with this code:
var ArrowDB = require('arrowdb'),
arrowDBApp = new ArrowDB('<App Key>');
module.exports = {
arrowDBApp : arrowDBApp,
login : function (req, res) {
var data = {
login: req.body.username,
password: req.body.password,
// the req and res parameters are optional
req: req,
res: res
};
arrowDBApp.usersLogin(data, function(err, result) {
if (err) {
console.error("Login error:" + (err.message || result.reason));
} else {
console.log("Login successful!");
console.log("UserInfo: " + JSON.stringify(result.body.response.users[0]));
}
});
}
};
Now you can use it by sails.services.arrowdbservice.login(req,res) or simply ArrowDBService.login(req,res) (notice about case sensitive thing). Since I don't know about ArrowDB, so you may explore by yourself about login method that your example provide.
I have a WebService that query a SQL database. In a sql table, I store some javascript and I want to use it in a webpage using RequireJS.
I try this :
var url = "http://localhost:64952/breeze/app/Objectss?$filter=Id%20eq%201&$select=Script";
require([url], (test) => {
debugger
arguments[0];
});
The server respond correctly :
http://i.stack.imgur.com/05lE7.png
But I'm not sure RequireJS is able to load script like this.
I try something else :
var req = breeze.EntityQuery.from("Commands")
.where("Id", "eq", "1")
.select("Script");
dataservice.manager.executeQuery(req)
.then((res : breeze.QueryResult) => {
if (res.results[0]) {
require([(<any>res.results[0]).Script], (hekki) => {
debugger
});
}
});
Doesn't work too...
Do you have any idea to help me please ?!
Create a requirejs plugin responsible for loading dependencies via the breeze api you've put together...
breezeloader.js:
define({
load: function (name, req, onload, config) {
// load the script using the breeze api you've put together...
var query = breeze.EntityQuery
.from("Commands")
.where("Id", "eq", name)
.select("Script");
dataservice.manager.executeQuery(query)
.then((queryResult: breeze.QueryResult) => {
var text = queryResult.results[0].Script;
// Have RequireJS execute the JavaScript within
//the correct environment/context, and trigger the load
//call for this resource.
onload.fromText(text);
});
}
});
express dependencies that should be loaded with the breeze loader using the requirejs plugin syntax:
require(['breezeloader!1', 'jquery', 'foo'], function (hekki, jquery, foo) {
...
});