Here i have soo many factory Pages assiging Urls in Every page is difficulty for me could you please Help me how can i put all urls at One Place And access in all page Like
app.factory('Fac1',function($http){
var hostUrl:'http:loaclhost:4200'
}
and second factory is
app.factory('Fac2',function($http){
var hostUrl:'http:loaclhost:4200'
}
soo on
Please Help me how can i put This HostUrl in one Place
you can use constant variable for your url's.
var app = angular.module('myApp',[]);
in another file you can add all your urls
app.constant("urlConstant", {
Url_Base: 'http://localhost:4200/',
Url_EmployeeList: 'getEmployeeList'
});
now inject this urlConstant to all your factory just like below
app.factory('Fac1',['$http','urlConstant',function($http,urlConstant){
var hostUrl: urlConstant.Url_Base;
var getEmployeeListurl: urlConstant.Url_Base + urlConstant.Url_EmployeeList;
}]);
Related
I'm using AngularJS and I would like to redirect a user when he clicks a button on /page1 to /page2. I currently use AngularJS routing for this using ngRoute which works all fine. However, in addition to the redirection, I would also like to pass some data from page1 to page2 to pre-populate some of the HTML on page2. I know that in order to pass such data, I can either specify it in the path parameter,e.g.
/page2/<param1>/<param2>
or as a query string parameter, e.g.
/page2?<key1>=<value1>&<key2=value2>
In both ways, I can retrieve the query string or path params in /page2 using $route.current.params
However, I do not want to do either of the above as I do not want to expose my data on the URL to the user. Is there a way in AngularJS that the parameters can be passed to /page2, such that they are "hidden" from the URL?
Thanks
You can use a service to store data that will survive route changes. Services are singletons that persist through the entire life of the app.
app.service("appData", function() {
var myData;
this.set = function(data) {
myData = data;
};
this.get = function() {
return myData;
};
}
In a controller:
app.controller("viewCtrl", function($scope,appData) {
$scope.myData = appData.get();
//
appData.set(newData);
});
For more information, see AngularJS Developer Guide - Creating Services.
when I navigate to URL of my app:
http://localhost/RealSuiteApps/RealHelp/-1/Inbox/Detail?wonum=XXX
I want to get the value of wonum
Below is the constructor of my controller, I tried to use $location service as defined in angular documentation, but it doesnt work, what is the problem?
constructor(private dataService: DataService, private $location) {
var params = $location.search();
var wonum = params.wonum;
this.getWorkOrderDetail(wonum);
}
Please note, the URL above is a link from one page to another, but it is not angular routing.
UPDATE
Adding # after Detail and before the question mark solves the issue
http://localhost/RealSuiteApps/RealHelp/-1/Inbox/Detail#/?wonum=BCB18405240
I suspect if its an angular application. Because an angular application will always append a # to the url and that is how angular maintains state of url's. $location.search() method will yield results only if the url is hash based.
The problem here is that i need to somehow get the information of the user when he logs in. So what is happening is that when he register all goes fine he goes to another page and it says "Welcome" + username And it does it correctly! But when i do it with the login page the username becomes undefined. Im preety sure i like somehow need to store my data in a factory but stumbled on how to. Thats what i think but may not be true. Anways...
Here is the plunker: http://plnkr.co/edit/qB3Gkeq5ji1YQyy0kpGH
Thank you so much for your help!
Use FirebaseAuth
in your controller you're using firebase array not Auth. This is an extract of the correct way to auth with firebase.
// define our app and dependencies (remember to include firebase!)
var app = angular.module("sampleApp", ["firebase"]);
// inject $firebaseAuth into our controller
app.controller("SampleCtrl", ["$scope", "$firebaseAuth",
function($scope, $firebaseAuth) {
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
var auth = $firebaseAuth(ref);
}
]);
Here is a link to the Docs with the exact tutorial. I would advise following it all the way through to learn firebase.
I am making a page that is extracting some information from the server and showing it on the interface. I am using angular js for this. So I have made a controller that has $http.get() method which gets data from the server and then the data binding is used to bind data to the html page. I am using this controller...
mission_vision_mod.controller('mission_visionCtrl', ['$scope','$http', function($scope, $http) {
$scope.visiontext = "Here is the content of vision";
$scope.bkclr = ['bk-clr-one','bk-clr-two','bk-clr-three','bk-clr-four'];
$scope.progressbar = ['progress-bar-warning','progress-bar-danger','progress-bar-success','progress-bar-primary'];
$scope.missioncount = ['col-md-0','col-md-12','col-md-6','col-md-4','col-md-3','col-md-2.5','col-md-2'];
$http.get('m_id.json').success(function(data){
$scope.missions = data;
$scope.len = data.length;
});
}]);
Now i want to make a page that allows the users to edit this info, this page also requires the same above code (code inside the controller). I also have to make a different controller for the new page to send whatever data that has been edited to server.
How do i use the above code for both the pages while i have to make a new controller for the second one for editing purpose. I want to use the same code for both the controllers.
I would suggest moving that code to a Service, then inject and use that service in each of the controllers where you need this functionality.
Services are often the best place to add code that is shared between multiple controllers or if you need a mechanism to pass data betweeen controllers.
Hope this helps!
Service/factory/value are meant for this , please refer the below example hope you get a better idea .
var app = angular.module('myApp',[]);
//controller
app.controller('myCtrl',myCtrl);
//inject dependencies
myCtrl.$inject = ["$scope","httpService"];
function myCtrl($scope,httpFactory){
$scope.data = httpFactory.getData;
}
//factory : http factory
app.factory('httpFactory',httpFactory);
//inject dependencies
httpFactory.$inject = ["$http"];
function httpFactory($http){
var datas = [];
return {
getData:function(){
$http.get('url').success(function(data){
datas.push(data);
}).
error(function(){
console.log('error');
});
return datas
}
}
}
I've just started learning Angular and following the tutorial here - http://docs.angularjs.org/tutorial/step_00
I'm downloaded the seed example from GitHub and it works great. I have a question though - if a partial view requires an external js file to be referenced, does it need to be added to the index.html file at the beginning? I want the app to be as lean as possible and only want to include the js references that are required for the present view. Is it possible to load the js files dynamically based on a view?
This just worked for me. Figured I would post it for anybody else seeking the lightest-weight solution.
I have a top-level controller on the page's html tag, and a secondary controller for each partial view.
In the top-level controller I defined the following function…
$scope.loadScript = function(url, type, charset) {
if (type===undefined) type = 'text/javascript';
if (url) {
var script = document.querySelector("script[src*='"+url+"']");
if (!script) {
var heads = document.getElementsByTagName("head");
if (heads && heads.length) {
var head = heads[0];
if (head) {
script = document.createElement('script');
script.setAttribute('src', url);
script.setAttribute('type', type);
if (charset) script.setAttribute('charset', charset);
head.appendChild(script);
}
}
}
return script;
}
};
So in the secondary controllers I can load the needed scripts with a call like the following…
$scope.$parent.loadScript('lib/ace/ace.js', 'text/javascript', 'utf-8');
There's a slight delay before the objects contained in the external script are available, so you'll need to verify their existence before attempting to use them.
Hope that saves somebody some time.
I just tried the https://oclazyload.readme.io/. It works out of the box.
bower install oclazyload --save
Load it in your module, and inject the required module in controller:
var myModule = angular.module('myModule', ['oc.lazyLoad'])
.controller('myController', ['$scope', '$ocLazyLoad', '$injector',
function($scope, $ocLazyLoad, $injector) {
$ocLazyLoad.load(
['myExtraModule.js',
'orAnyOtherBowerLibraryCopiedToPublicFolder.js'
])
.then(function() {
// Inject the loaded module
var myExraModule = $injector.get('myExtraModule');
});
}
]);