For some reason, when I load my page with an ng-view on it, said ng-view is commented out when I inspect it in my console, and I have no idea why.
Reading other threads with a similar problem has proven fruitless. See code snippets below. Currently just console logging routeParams as I am a newbie to AngularJS and I want to make sure I get all the values I need and know what to work with. This is in a Rails project, for reference:
Show Page
<div class ="row" ng-view>
</div>
App.js
'use strict';
var myApp = angular.module("summoners-universe", ['ngRoute'])
myApp.config(['$routeProvider', "$locationProvider", function($routeProvider, $locationProvider){
$routeProvider.when("games/:id", {
templateUrl: "timer.html",
controller: 'CountdownController'
})
$locationProvider.html5Mode({ enabled: true, requireBase: false });
}])
controllers.js
'use strict';
myApp.controller('CountdownController', ["$scope", "$http", "$routeParams", function($scope, $http, $routeParams){
console.log($routeParams)
}])
Ah, simple syntax error. I didn't have a leading backslash for that games/:id route! It should look like /games/:id.
Related
I am trying to get rid of the url looking like http://example.com/#/album/0 and have it look more like http://example.com/album/0.
I have the following code
(function() {
var app = angular.module('chp', ['ngRoute', 'projectControllers']);
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/directory.html',
controller: 'ProjectsCtrl'
}).
when('/album/:id', {
templateUrl: 'partials/album.html',
controller: 'ProjectDetailCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
var projectControllers = angular.module('projectControllers', []);
projectControllers.controller('ProjectsCtrl', ['$scope', '$http',
function ($scope, $http) {
$scope.projects = albums;
$scope.filters = { };
}]);
projectControllers.controller('ProjectDetailCtrl', ['$scope', '$routeParams', '$sce',
function($scope, $routeParams, $sce) {
$scope.project = albums[$routeParams.id];
})();
but this is causing my app the break entirely once I add in $locationProvider in the three places shown. Any idea as to why this is not working for me? Also I am including angular-route.js just after jquery and angular.js so that cant be the problem
At a glance it looks all right to me, but you must make sure your server is set up to serve http://example.com/index.html for any route, otherwise it will try to load http://example.com/album/0/index.html before bootstrapping your angular application. What do you see when you enable html5? 404 not found? Console error?
You might also need to add
<base href="/" /> inside <head></head> in your index.html file
I have just started with AngularJS
The following code gives an error in the console.
Unknown provider: $scopeProvider <- $scope <- newActiveOrdersModel . I have researched but it looks like Unknown Provider error can happen for a variety of reasons.It would be nice if anyone could point out where I am going wrong ?
var app;
(function(angular){
app = angular.module('OrdersDashboard',[]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/current/new', {templateUrl: 'orders/partials/new_current', controller: 'newActiveOrdersCtrl'}).
otherwise({redirectTo: '/'});
}]);
app.service('newActiveOrdersModel', ['$scope', '$rootScope',
function($scope, $rootScope){
this.Orders=["This is a test order"];
this.fetchOrders = function(){
console.log("This is a test order");
this.Orders=["This is a test order1111"];
};
}]);
app.controller('newActiveOrdersCtrl', ['$scope', '$rootScope', 'newActiveOrdersModel',
function($scope, $rootScope, newActiveOrdersModel){
$scope.test="Hello World";
}]);
})(angular);
It seems like Angular Js cannot recognize "newActiveOrdersModel".
This just a guess but I don't know why you have $scope listed as a dependency of your service. I think something like this
app.service('newActiveOrdersModel', ['$rootScope',
function($rootScope){..}]
will solve the error. Also I wouldn't include $rootScope unless you absolutely need it. It's generally considered bad practice in Angular to store stuff in the $rootScope.
I'm developing my first AngularJS app.
master.html is the shell/main page which will load child pages and has it's own logic (i.e. users, search, etc).
The following image shows conceptual structure of my project-
My app.js -
var myApp= angular.module('myApp', ['ngRoute', 'ngResource']);
myApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/',
{
templateUrl: '/app/views/blogslist.html'
controller: 'BlogListController'
})
});
I want a controller for master.html also. I know I can use ng-controller anywhere. But How and where I'll configure the controller for this page?
Thanks.
May be you are looking for something like this:
var myApp= angular.module('myApp', ['ngRoute', 'ngResource']);
myApp.controller('masterCtrl', ['$scope', function($scope){
// all your logic here
}]);
myApp.config(function ($routeProvider, $locationProvider) {
.........
});
and you can use ng-controller attribute to the wrapper div or body.
Use Angular UI Router instead of ngRoute. It allows nested views and states - exactly what you need here.
I use Phonegap 3.0 and AngularJS 1.1.5.
I want to remove the 300ms delay on touch devices. Therefore I integrated angular-mobile (see v1.1.5 angular-mobile.js).
In my app.js I have
var myApp = angular.module('myApp', ['ajoslin.mobile-navigate', 'ngMobile'])
.config(function ($compileProvider) {
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
})
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'partials/homeView.html', controller: 'HomeCtrl'});
$routeProvider.otherwise({redirectTo: '/'});
}]);
In my partial:
<a ng-click="showTime()" >Alert</a>
My Controller:
function HomeCtrl($scope, $rootScope, $navigate) {
$scope.showTime = function () {
console.log(Date.now());
};
}
The text is printed, but you see that it is delayed by the 300ms because it does not appear right now in the log.
Can anyone help me with that?
Maybe I'm doing something really wrong ;-)
THanks!
I switched to AngularJS 1.2 and am using the ngTouch directive from the angular code their! That works!
I want to use angular's routing function only to bind views and controllers without indicating template and ng-view.
This is what I have so far, and is working well.
JavaScript
angular.module('myModule', [])
.config([
'$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller:"myCtrl", template:"whatever"
})
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}
])
.controller('myCtrl', function($scope){
angular.bootstrap(document, ['myModue'])
HTML
hello!
<div ng-view></div>
This is what I want, and is not working
JavaScript
angular.module('myModule', [])
.config([
'$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller:'myCtrl'
})
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}
])
.controller('myCtrl', function($scope){})
angular.bootstrap(document, ['myModule'])
HTML
hello!
How can I do this?
The way you are trying to do it seems conflicting with the concept of Single Page Application
However what you want to do is possible in a different way, the Deep Linking cookbook example may help shed some light for you:
http://docs.angularjs.org/cookbook/deeplinking