Develop Reference

Angular JS: can we set resolve or promise on controller which did not have route defined?

I am trying to fetch some data from server before controller get render.
I have found many answers for it with respect to routeProvider.
But my main issue is my controller does not bound with any route.
So is there any way to make this possible?
I have controller in following ways...
<!-- HERE I WANT TO BLOCK RENDERING TILL DATA GET LOAD -->
<AppController>
<ng-view>
</AppController>

It sounds like a resolve is what you are looking for, but if you are not using a routing table for this controller, you'll not have this option. Why not just resolve an asynchronous call in your controller, and set scope variables inside the callback. This is what I interpret your desire to await controller "rendering", whereas a resolve through a route table would await controller instantiation. Observe the following...
module.controller('ctrl', function($scope, $http) {
$http.get('/uri').then(function(response) {
// set $scope variables here
});
console.log('executed first');
});
You could also set a variable to prevent the associated view from rendering if your data call is lengthy. This would prevent the UI from "dancing." Observe the following changes to the above example...
<div ng-controller="ctrl" ng-show="resolved"></div>
module.controller('ctrl', function($scope, $http) {
$http.get('/uri').then(function(response) {
$scope.resolved = true; // show rendering
});
});
JSFiddle Link - simplified demo
JSFiddle Link - demo ng-if

One idea will work
in html controller:
<p ng-if="notLoadedContent">Wait</p>
<div ng-if="!notLoadedContent">Content fetched</div>
And in Controller all controller is inside one function will start all, and the controller will be :
fetch(init)
$scope.notLoaded = true;
function init(){
$scope.notLoaded=false;
}
hope it help you

Reload or reinitialize angular form after posting data

I have an angular form to add data in database.I am using angular-fullstack by yeoman.
Now, once data is posted, I can clear ty the form values by assigning an empty object to form scope.
However, I can not add more values without reloading the page.
Also, I have tried this:
var original = $scope.permission;
$scope.reset(original);
$scope.reset= function(original){
$scope.permission= angular.copy(original)
$scope.form2.$setPristine();
$scope.form2.$setUntouched();
}
But has not helped.
Note: $route.reload() is not suitable for me in this case therefore I am trying to find alternatives to do this.

That error seems to be relevant. If I understand correctly you are trying to inject ngRoute module as dependency into your createProjectApp. In that case you should do something like this:
angular.module('createProjectApp', ['ngRoute']);
and make sure you have proper script tag in the header:
<script src="angular-route.js">
Hope this helps.

I'm not sure what your requirements are. But as for $route.reload, I think you're injecting the module incorrectly. There are two things you need to do to get $route.reload() to work. After you've added angular-route.js as a script tag:
1) Change
angular.module('createProjectApp', ['$route'])
to
angular.module('createProjectApp', ['ngRoute'])
According to the documentation, the correct module name is ngRoute
https://docs.angularjs.org/api/ngRoute/service/$route
2) In your controller, you need to include $route as a parameter. Then you can use $reload.route() in that particular controller like so:
createProjectApp.controller('MainController', function ($scope, $route) {
$scope.reload = function(){
$reload.route();
}
}

AngularJS $location.search() not working

It's the first time I'm trying to use the $location service in AngularJS in order to check for query string arguments. I've been reading the docs and trying to play a bit with it in Plunkr to see how to use it, but so far I've failed to get it to retrieve any parameters from the query string.
I've been testing it using this plunk http://plnkr.co/edit/RIFdWa5ay2gmRa6Zw4gm?p=info
var app = angular.module('myApp', [])
.config(function($locationProvider) {
$locationProvider.html5Mode(true);
});
angular.module('myApp').controller('myCtrl', function($scope, $location){
$scope.name = "Andrei";
$scope.url = $location.host();
$scope.path = $location.path();
$scope._params = $location.search();
});
I've read that setting html5Mode(true) on the $locationProvider is required in order to get the $location service to work as "expected" - which I've done, but when setting this nothing works anymore in my plunk (you can set it to false and you'll see the binding are qorking again properly).
Am I missing something regarding the $location service?
Any help or suggestions are appreciated!
Thanks!

In AngualarJS 1.3 $location in HTML5 mode requires a <base> tag to be present so that it knows the path that all of the links are relative to. You can add <base href="/" /> to get it working again.
http://plnkr.co/edit/j9rd1PajNLQVJ8r4c8BZ?p=preview

Originzational MVC and Angular keeping from injecting what I don't need

My problem is I have one ng-app. Does that mean I have to do dependency injection for plugins I may not be using on that given view? Example I bring in ngTagsInput does that mean I have to do it even when the view doesn't call for it? That would mean I have to include that js for every view even if it doesn't use ngTagsInput.
I have a very large MVC .NET application and I am trying to figure out what is he best way to handle bringing in external plugins.
I have some code like so in our Main _Layout template:
<html ng-app="ourApp">
<head>
<!-- all of our includes are here -->
</head>
<body>
<directive></directive>
<anotherdirective></anotherdirective>
#RenderBody()
</body>
</html>
RenderBody is where MVC slides in our views from our mvc routing.That view may look like so:
<script src="~/Scripts/HomeAngular.js"></script>
<div ng-controller="HomeCtrl">
<directive3></directive3>
</div>
App JS:
var app = angular.module('ourApp', ['ngTagsInput']);
IS there a way I can get around having to inject ngTagsInput on every view page even if i don't need it?

There are several different ways to handle Dependency Injection (DI) in angular. In this first example, you simply define ngTagsInput before declaring the controller. If ngTagsInput is a service, for example, you'll need to return an object with methods that allow you to access the data inside of that service.
For example:
app.service('ngTagsInput', function($scope) {
var data = {};
return {
getData = function() {
return data;
},
setData = function(val) {
data = val;
}
};
});
app.controller('HomeCtrl', function($scope, ngTagsInput) {
// ...
$scope.tags = ngTagsInput; // whatever you want to do with it
});
However, there's a problem...
In the example above, if you run that code through a minifier, you'll get $scope turned into some variable (a, b, x, etc...) and angular wont know what to do with that.
In this method, we use an array. The last item in your array is your lambda function for the controller, which takes 1 argument for each previous item in the array:
app.controller('HomeCtrl', ['$scope', 'ngTagsInput', function(scp, ngTagIn) {
// ...
}]);
This code can be run through a minifier just fine, since the dependencies are strings in the array and can be renamed to anything you want inside the function's parameters.
DI also works in directives, factories, filters, and services with the same syntax; not just controllers and modules.
app.directive('HomeCtrl', ['$scope', 'ngTagsInput', function(scp, ngTagIn) {
// ...
}]);

Couldn't you break down your application further into smaller modules instead of just one. Then you can inject the smaller modules into the app module and only inject the ngTagsInput dependency on the modules that actually need it. That's how I typically break up my application by function or area.

Angular not fetching data from factory

Hi i have the following plunker using a factory: plunker
When we click the button next to my academic programs, it gives a panel with the applied science and academic buttons. When we click on one of the buttons, it gives a list of some programs. When we click on one of those programs, it brings another panel which should contain the children of those programs.
I defined these children in a factory(services.js). But it is not bringing those elements from the json file. Where am i going wrong?

your path to your data.json (its currently data.js) file is wrong.
the json in the file is incorrect. You need to wrap all properies with ''.
Your path to bootstrap is wrong so its crashing on $().tooltip()
You had not even plugged up the service call. I added jsonService as a dependancy. JsonService as an injectable:
var app = angular.module('StudentProgram', ['ui.bootstrap', 'jsonService']);
app.controller('mycontroller', function(JsonService, $scope, $modal, $log) {
Then i added to your scope a call to get the data
JsonService.query(function(data){
$scope.degreecategories = data;
console.log(data);
});
Working plnkr . Please next time point more work into your question... you are lucky I am bored.