Develop Reference

angularjs can't find the html using data-ng-view

I am trying to develop an application using angularjs+mvc+api.as you can see here my angular js module and controller :
//home-index.js
var myApp = angular.module('myApp', []);
myApp.config([function ($routeProvider) {
$routeProvider.when("/", {
Controller: "homeIndexController",
templateUrl:"templates/t.html"
});
$routeProvider.otherwise("/");
}]);
myApp.controller('homeIndexController', homeIndexController);
function homeIndexController($scope,$http) {
$scope.data2 = [];
$scope.busy = true;
$http.get("/api/default").
then(function(result) {
//success
angular.copy(result.data, $scope.data2);
}, function() {
//error
}).then(function() {
$scope.busy = false;
});
}
As you can i create a routing .so if the user enter this url http://localhost:20713/Home/Index/#/ the angular should load the t.html in my templates folder .
I have a view that the t.html should be injected to it ,as you can see here :
#{
ViewBag.Title = "Home Page";
}
<div data-ng-view=""></div>
here is the content of t.html file :
Hi this is a test
But when i call this url http://localhost:20713/Home/Index/#/ nothing happens!!and the page is empty and the message Hi this is a test doesn't exist in it .why ?
The resource of my page in the browser

Inject ngRoute module on your myApp module
var myApp = angular.module('myApp', ['ngRoute']);
And specify array inline annotations properly
myApp.config('$routeProvider', [function ($routeProvider) {
$routeProvider.when("/", {
Controller: "homeIndexController",
templateUrl:"templates/t.html"
});
$routeProvider.otherwise("/");
}]);

I just change the reference of angular js
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
and every thing works fine .why ?

Try
<div ng-app="myApp">
<div ng-view></div>
</div>
and also change
Controller: "homeIndexController"
to
controller: "homeIndexController",

Angular JS Controller Not Being Instantiated

I have this angular app that I am running off only one webpage of my site.
I have a main application that uses another module I made as a dependency.
The problem I am having is that nothing inside my controller is being ran. Why won't my controller run?
My route does bring in the view however so I know that the module is working.
I got rid of my data service to be certain that it was not it.
The console.log before the function outputs, but nothing in the function runs.
I also have no console errors.
app.js:
(function(){
'use strict';
var dependencies = [
'ghpg',
'ngRoute'
];
angular.module('blogger', dependencies)
.config(Config);
Config.$inject = ['$locationProvider']
function Config($locationProvider){
$locationProvider.hashPrefix('!');
}
if (window.location.hash === '#_=_'){
window.location.hash = '#!';
}
//bootstrap angular
angular.element(document).ready(function(){
angular.bootstrap(document, ['ghpg']);
});
})();
module:
(function(){
'use strict';
var dependencies = [ 'ngRoute' ];
angular.module('ghpg', dependencies)
.run(init)
init.$inject = ['$rootScope','$location' ];
function init($rootScope, $location){
var vm = this;
}
})();
View:
<div class="container-fluid" data-ngController="blogController as vm">
<h2> Articles </h2>
<div class="post-listing" data-ng-repeat=" post in vm.data">
<p> {{ post }} </p>
</div>
</div>
Controller:
(function(){
'use strict';
angular
.module('ghpg')
.controller('blogController', blogController);
blogController.$inject = ['$scope'];
////
console.log("In controller file");
function blogController($scope){
console.log('running controller');
var vm = this;
vm.data = blogContent.getContent();
console.log(vm.data);
}
})();
I am wondering if it has something to do with bootstrapping my application? (But it all still works even without the explicit ng-app, so I am thinking that my bootstrapping does work)
My next best guess is that my controller in my html is not being set correctly, but every time I mess with it I either get the same result or an error in the console, and it still doesn't work.

blogController.$inject = ['$scope','blogController']
you're trying to inject your controller into your controller. Change it to
blogController.$inject = ['$scope'] and function blogController($scope).
Did you mean to write? blogController.$inject = ['$scope','blogContent']
I see you're calling a method on blogContent and I don't see it injected anywhere.
Edit
data-ngController should be data-ng-controller.

Preload an angular route for instant viewing

I am relatively new to angular and here is what I am trying to do:
I am trying to pre-compile angular templates into a view so that they can be shown instantaneously when the navigation event to the view occurs.
I am trying mock some kind of a navigation controller behavior for my app where the views preload or stack up and don't show in the SPA until their routes are active.
I did some research and $templateCache might not be something that would work for me since it seems to be only prefetching the template, viz. the uncompiled view (as per my limited understanding of angular), but what I am looking for is the "compiled version"; that is, the result of a $scope applied to a template.
Currently, the app's templates and controllers are linked through $routeProvider and ng-view constructs.
Minimal code skeleton:
JS:
var app = angular.module('airfiApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: ''
})
.when('/shop', {
templateUrl: 'views/shop.html',
controller: 'ShopController'
})
.otherwise({
redirectTo: "/index.html"
}))
});
app.controller('ShopController', ['ImageFetchService', function(ImageFetchService) {
ImageFetchService.get().then(function(images) {
$scope.images = images;
});
}]);
app.factory('ImageFetchService', ['$q', '$http', function($q, $http) {
var def = $q.defer();
//basically get product docs with id products:name-of-product
var couchdbURL = 'http://username:password#localhost:5984/db_name/_all_docs?startkey="products"&endkey="products\uffff"';
$http.get(couchdbURL).then(function() {
//do some processing and send back array of objects called 'images'
/* images =
[
{
... product information... ,
src: http://couchurl/db_name/product1/attachment_name
},
{
... product information... ,
src: http://couchurl/db_name/product2/attachment_name
}
.
.
.
]
*/
def.resolve(images)
});
}]);
HTML:
//index.html
<!DOCTYPE html>
<html>
<head>
<script src="/Scripts/angular.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<!-- some home page html -->
<section ng-view> </section>
</body>
</html>
//shop.html
<div ng-repeat = " img in images">
<img ng-src="img.src" alt="img.productName" />
</div>

I really don't think you need to compile the template manually - angular will do this for you. If you really insist, you can compile any template against any scope using $compile:
$compile( element.contents() )( scope );
What I really think you're after is loading of inline template. This question shows how it is done.

A couple things you can do to easily speed up how fast a view is rendered, first thing is you can pre-load the data by calling a pre-load method in a service, during the run phase of the App. Example
//service that has a preload function that stores an http result in memory
app.service('myService', function($http){
var data;
this.getData= function(){
return $http.get('dataUrl')
.success(function(data, status, headers, config) {
return data;
})
};
// calls get data and stores result in memory
this.preloadData = function(){
this.getData().then(function(data){
data = data;
});
};
// returns in memory result
this.getPreloadedData = function(){
return data;
};
});
// call preload in run block
app.run(function(myService){
// preloads data from service
myService.preloadData();
});
// get data from in memory
app.controller('TestCtrl', function($scope, myService) {
$scope.data = myService.getPreloadedData();
});
The second thing you can do is store the template in $template cache rather than fetching it form a http request, you can do this in the run block as well, and if you using gulp or grunt there are some great plug ins that provide a better way of doing this
app.run(function($templateCache){
// cache template
var tempalate = '<h2>hello world</h2>'
$templateCache.put('test.html', tempalate);
});
here is a plunk that goes into better detail and shows more examples
http://embed.plnkr.co/DSeWLVNoV2Fe0SJI3Bwa/preview
This does exactly preload the route but it will help performance :)

Why is the binding not working for $scope in controller?

I'm new to Angular.
I am having problems dealing with variables back and forth between my controller and html.
In my controller not only I want to read $scope, but I also want to use it in a function I have in my services.
This is my factory:
angular.module('myApp.services', [])
.factory('hotels', function($http){
return{
search: function(city, callback){
$http({
method: 'GET',
url: 'http://myhotels.com/hotels/?city='+city+
cache: true
}).success(callback);
}
};
})
controller:
angular.module('myApp.controllers', [])
.controller('SearchHotelsController', ['$scope', 'hotels', function($scope, hotels){
$scope.hotelCity = "";
hotels.search($scope.hotelCity, function(hotelResults){
$scope.hotelResults = hotelResults;
});
}])
and in the html I don't have a button to call the function. It is supposed to be called when I get the scope variable (hotelResults):
<input class="form-control" type="text" ng-model="hotelCity">
<a ng-href="#/searchResults"><button>Search</button></a>
and when it routes to that page, which uses the same controller, I get:
{{hotelResults.name}}
================================================================
I also tried declaring $scope.hotels = {hotelCity: "sf"}; in th controller , then put this in html: <input type="text" ng-model="hotels.hotelCity"> and in my controller to call $scope.hotels.hotelCity in the function, but still they are not connected! no matter what the user puts in the input, I get 'sf' for my hotelCity.
Please someone shed a light on this for me, thanks!

I am also new-bie to angular, and looking at your question, i am not fully aware what you are actually looking for but what i have understood and came up with this. Might help.
<html ng-app="myApp">
<head><title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
</head>
<body>
<div class="test-wrap" ng-controller="myHotels">
<input type="text" name="h" ng-model="hotelcity" />
<button ng- click="search()">Search</button>
<p>List of Hotel's</p>
<ul>
<li ng-repeat="h in hotel | filter:hotelcity">{{h.name}}</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var myApp = angular.module('myApp',[]);
myApp.controller('myHotels', ['$scope', function($scope) {
$scope.hotel = [{"name":"Test1 hotel"},{"name":"Test2 hotel"},{"name":"Test3 hotel"}];
$scope.search = function(){
console.log($scope.hotelcity);
}
}]);
</script>

I finally decided to pass my data through my url and then get it with $routeParams in my controller.
I didn't figure out the problem with my code, and I kind of expected Angular to be this smooth with passing variables back and forth, but I guess this particular situation is a javascript issue with different scopes and function arguments.
I also learned about the Closure concept of javascript which didn't help me either!
Solution: I put a button at the bottom of the page inside an tag;
<a ng-href="#/searchResults/{{hotelCity}}"><button>Search</button></a>
then in routeProvide in my app.js file:
$routeProvider.when('/searchResults/:city', {templateUrl: 'partials/second.html', controller: 'secondController'});
then in controller:
hotels.search($routeParams.city, function(hotelResults){
$scope.hotelResults = hotelResults;
});
[make sure to declare $routeParams in your controller next to $scope]

Testing on angular $resource query shows error of ngResourceProvider not found

<script src="/library/angularjs/1.2.0-rc.3/angularjs.js"></script>
<script src="/library/angularjs/1.2.0-rc.3/angular-route.js"></script>
<script src="/library/angularjs/1.2.0-rc.3/angular-resource.js"></script>
<script>
var app= angular.module('myApp', ['ngRoute', 'ngResource']);
app.service('Greeter', ['$resource',function($resource){
return $resource(
'http://123.com/processor.php',
{callback: 'JSON_CALLBACK'},
{
query: {method:'JSON_CALLBACK',isArray:true}
});
}]);
app
.controller('MyCtrl', ['$scope', 'Greeter',
function($scope,Greeter){
alert("yes");
$scope.greet = function(){
alert("greetttt");
Greeter.query({name:this.name}, function(response){
alert(response.greeting);
});
};
}]);
</script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
Your name:
<input type="text" name="name" value="World"/>
<button ng-click="greet()">greet</button>
</div>
</div>
The PHP file simply throw out a JSON array, but I saw chrome inspectors tells me that:
Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- Greeter
I wonder if there is any syntax error? As the PHP do throw out a valid JSON array.
Thanks
Update1----
I update the code shows that I loaded the resource and angular in the right order.
After Bielski's fix, still, there is error shows (same error)
Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- Greeter
Update 2
After runTarm fix, The only trouble now seems the way I reference Greeter is not correct...
ReferenceError: Greeter is not defined
at Scope.$scope.greet (http://123.com/index-query.php:21:5)
which represent this line:
Greeter.query({name:this.name}, function(response){
Update 3
After suggested adding Greeter ad resource, still, the error of below will appear:
TypeError: undefined is not a function
at Scope.$scope.greet (http://123.com/index-query.php:21:13)
Seemingly something is wrong between these 3 lines
$scope.greet = function(){
alert("greetttt");
Greeter.query({name:this.name}, function(response){

You have to include the ngResource in your module's dependency list like this:
var app = angular.module('myApp', ['ngRoute', 'ngResource']);
Another thing is about the greet() function, when you bind a function in ng-click like this:
<button ng-click="greet()">
Angular will look for the greet() function in the controller's scope, but you define the greet() in the controller instance itself.
One way is to move the greet() function into the $scope like this:
app
.controller('MyCtrl', ['$scope', 'Greeter',
function($scope, Greeter){
alert("yes");
$scope.greet = function(){
alert("greetttt");
Greeter.query({name:this.name}, function(response){
alert(response.greeting);
});
};
}]);

The $resource provider isn't being loaded and/or referenced correctly. Two things:
First, you need to make sure that the file 'angular-resource.js' is being loaded in your page, and that it appears in the list of scripts to be loaded BEFORE you load your app.
Second, try setting your service up like this:
app.service('Greeter', ['$resource', function($resource){
return $resource(
'http://123.com/processor.php',
{callback: 'JSON_CALLBACK'},
{
query: {method:'JSON_CALLBACK',isArray:true}
});
}]);
This will give you protection from minification errors and it is sometimes eaiser to spot which providers are missing using this format.

You forgot to add Greeter to the controller function's arguments
app
.controller('MyCtrl', ['$scope', 'Greeter',
function($scope, Greeter){
alert("yes");
$scope.greet = function(){
alert("greetttt");
Greeter.query({name:this.name}, function(response){
alert(response.greeting);
});
};
}]);