I have an AngularJS app that works fine in the browser when served by 'grunt serve'. However, trying to run the app as a Chrome extensions fails. The initial page (the '/' route) displays, but when I press a link to '/#/products/add' I get a 'Webpage not found' error.
No webpage was found for the web address: chrome-extension://acekeiblhdhhbgoagmeegclohfncadjg/#/products/add
Error code: ERR_FILE_NOT_FOUND
Why does the first route work, but the second route fails?
My manifest is bare bones currently, but I've tried various permissions (but the fact that the root route is working makes me think that other routes should work).
{
"manifest_version": 2,
"name": "My app",
"description": "Does stuff",
"version": "1.0",
"permissions": [
"<all_urls>"
],
"browser_action": {
"default_icon": "app/images/icon.png",
"default_popup": "app/index.html"
}
}
The app.js file looks like this:
'use strict';
angular.module('myApp', [
'ngResource',
'ngSanitize',
'ngRoute',
'ngStorage'
])
.config(function ($routeProvider) {
$routeProvider.
when('/products', {
templateUrl: 'views/product_pages/product_list.html',
controller: 'ProductListCtrl'
}).
when('/products/add', {
templateUrl: 'views/product_pages/product_add.html',
controller: 'ProductAddCtrl'
}).
when('/products/:productId', {
templateUrl: 'views/product_pages/product_edit.html',
controller: 'ProductEditCtrl'
}).
otherwise({
redirectTo: '/products'
});
})
.run(function () {
// removed for brevity
});
And the product add controller reads as follows:
.controller('ProductAddCtrl', ['$scope', '$location', 'productPageCollection',
function ($scope, $location, productPageCollection) {
$scope.showError = function(ngModelController, error) {
return ngModelController.$error[error];
};
$scope.processForm = function() {
productPageCollection.add({ 'name' : $scope.product.name });
$location.path('/products');
};
}])
Any ideas?
Your link should point to #/products/add, not /#/products/add. The second option attempts to navigate to the root folder of your extension.
Related
When I follow the direct link /blog/3 on localhost everything works fine.
After publishing to webserver the page constantly reloads and I get 'warning: tried to load angular more than once' in Chrome console.
var app = angular.module("myApp",
[
'ngAnimate',
'ngRoute',
'LocalStorageModule',
'slickCarousel',
'noindex-svg',
'svg-use'
// 'ui.router'
]
);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/", {
controller: "mainController",
templateUrl: "/app/views/dashboard/main.html"
});
$routeProvider.when("/blog/:name", {
controller: "blogController",
templateUrl: "/app/views/blog/blog-details.html"
});
$routeProvider.when("/blog", {
controller: "blogController",
templateUrl: "/app/views/blog/blog-list.html"
});
if (window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
});
I am using asp.net web api 2 and Azure app.
Why does it happen only on the webserver?
I'm using adal.js with ui-router and believe I have everything configured correctly. Unfortunately, when adding requireADLogin to my states, nothing happens and I get the error Failed to load template: ./dashboard.html (HTTP status: undefined undefined)
Auth module
angular
.module('components.auth',
[
'ui.router',
'AdalAngular'
])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', function($httpProvider, adalProvider) {
adalProvider.init({
instance: 'https://login.microsoftonline.com/',
...
// these are components that can be loaded such as nav without needing authentication
anonymousEndpoints: ['./root.html', './app.html', './app-nav.html', './app-sidebar.html']
},
$httpProvider);
}]);
Dashboard module
var dashboard = {
bindings: {
//
},
templateUrl: './dashboard.html',
controller: 'DashboardController'
};
angular
.module('components.dashboard')
.component('dashboard', dashboard)
.config(['$stateProvider', 'adalAuthenticationServiceProvider', function ($stateProvider, adalProvider) {
$stateProvider
.state('dashboard', {
parent: 'app',
url: '/dashboard',
component: 'dashboard',
requireADLogin: true,
resolve: {
}
});
}]);
According to chrome debug tools, the application never even attempts to be redirected to an auth portal:
I have a very simple AngularJs app.
Here my app.js file:
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ui.router',
'myApp.controllers'
]).
config(['$stateProvider', function($stateProvider) {
$stateProvider.
state('home', {
url: "/{Id:[0-9]}",
templateUrl: 'html/home.html',
controller: 'HomeCtrl'
});
}]);
And my controllers.js file:
angular.module('myApp.controllers', []).
controller('HomeCtrl', ['$stateParams', function($stateParams) {
console.log($stateParams.Id);
}]);
The return of the console.log($stateParams.Id) is undefined. While I'm expecting "1" (my Id).
Otherwise if I ask for console.log($stateParams) it returns a function (?!?):
function l(a){function c(a){var b=r({},a,{data:Dc(a.data,a.headers,d.transformResponse)});return 200<=a.status&&
300>a.status?b:m.reject(b)}var d={method:"get",transformRequest:e.transformRequest,transformResponse:e.transformResponse},f=function(a){function b(a){var c;q(a,function(b,d){Q(b)&&(c=b(),null!=c?a[d]=c:delete a[d])})}var c=e.headers,d=r({},a.headers),f,g,c=r({},c.common,c[A(a.method)]);b(c);b(d);a:for(f in c){a=A(f);for(g in d)if(A(g)===a)continue a;d[f]=c[f]}return d}(a);r(d,a);d.headers=f;d.method=Ia(d.method);(a=Mb(d.url)?b.cookies()[d.xsrfCookieName||e.xsrfCookieName]:s)&&(f[d.xsrfHeaderName||
e.xsrfHeaderName]=a);var h=[function(a){f=a.headers;var b=Dc(a.data,Cc(f),a.transformRequest);w(a.data)&&q(f,function(a,b){"content-type"===A(b)&&delete f[b]});w(a.withCredentials)&&!w(e.withCredentials)&&(a.withCredentials=e.withCredentials);return u(a,b,f).then(c,c)},s],k=m.when(d);for(q(x,function(a){(a.request||a.requestError)&&h.unshift(a.request,a.requestError);(a.response||a.responseError)&&h.push(a.response,a.responseError)});h.length;){a=h.shift();var l=h.shift(),k=k.then(a,l)}k.success=
function(a){k.then(function(b){a(b.data,b.status,b.headers,d)});return k};k.error=function(a){k.then(null,function(b){a(b.data,b.status,b.headers,d)});return k};return k}
While I'm expecting {Id: "1"}.
What am I doing wrong???
Just to try I changed my state in the following way:
$stateProvider.
state('home', {
url: "/{Id:[0-9]}",
templateUrl: 'html/home.html',
controller: function($stateParams){
console.log($stateParams);
}
});
}]);
And it works! It returns {Id: "1"} but unfortunately this is not an option for me since what I described here is a small portion of a much bigger and complicated App (so I'd like to have app.js and controllers.js files).
Any suggestion?
I am new using AngularJS, i am trying to implement a router to manage 2 different views.
I have followed the tutorial but i get an error on my javascript console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7-build.2029+sha.80e7a45/$injector/modulerr…Flocalhost%3A3094%2Fbower_components%2Fangular%2Fangular.min.js%3A32%3A188)
This error only happens when i add the APP.config() part of the code.
I can reach the route /views/a.html directly on my browser, and i do have a <div ng-view></div> in my html code (index.html), i don't understand what i am missing...
var APP = angular.module('APP', [ 'ui.bootstrap', 'angularFileUpload', 'ngRoute' ])
//Load Facebook SDK & co...
});
APP.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a', {
templateUrl: 'views/a.html',
controller: 'aCtrl'
}).
when('/b', {
templateUrl: 'views/b.html',
controller: 'bCtrl'
}).
otherwise({
redirectTo: '/a'
});
}
]);
APP.controller('aCtrl', function() {
console.log('CALL A CONTROLLER');
});
APP.controller('bCtrl', function() {
console.log('CALL B CONTROLLER');
});
You have to inject ngRoute into your app:
angular.module('ngViewExample', ['ngRoute'])
Unfortunately the demo app is still using v1.0.6 so you're going to see a lot of inconsistencies. Here's a better example from the documentation:
http://docs.angularjs.org/api/ngRoute.$route
I have a very simple website which uses Angular.js to display its content. I started learning it 2 days ago, and following the official tutorial gave no issues at all.
This is my js file:
var Site = angular.module('Website', []);
Site.config(function ($routeProvider) {
$routeProvider
.when('/home', {templateUrl: 'parts/home.html', controller: 'RouteController'})
.when('/who', {templateUrl: 'parts/who.html', controller: 'RouteController'})
.when('/what', {templateUrl: 'parts/what.html', controller: 'RouteController'})
.when('/where', {templateUrl: 'parts/where.html', controller: 'RouteController'})
.otherwise({redirectTo: '/home'});
});
function AppController ($scope, $rootScope, $http) {
// Set the slug for menu active class
$scope.$on('routeLoaded', function (event, args) {
console.log(args);
$scope.slug = args.slug;
});
}
function RouteController ($scope, $rootScope, $routeParams) {
// Getting the slug from $routeParams
var slug = $routeParams.slug;
var pages = {
"home": {
"title": "Samuele Mattiuzzo",
},
"who": {
"title": "All you'll get, won't blog"
},
"what": {
"title": "Shenanigans about this website"
},
"where": {
"title": "Where can you find me on the net?"
}
};
$scope.$emit('routeLoaded', {slug: slug});
$scope.page = pages[slug];
}
As you can see, it's very simple, it just need to return a page title based on the page slug. In the template (where I load my app with <body ng-controller="AppController">), inside the <ng-view> directive I have one of those partial templates loaded (which is currently working and displaying static content) but I cannot see the content of {{page.title}}.
I have Batarang enabled on my browser and I'm testing my website with web-server.js, but I've read that Batarang has some issues with variables and scopes and always returns undefined, so that's why I added that console.log statement. Doesn't matter what I try to print (args, slug or page, obviously in different parts of the js), it's always undefined.
What am I exactly doing wrong here? Thanks all
None of your controllers are being associated with your "Site".
I believe if you change your free functions to be associated with Site this should get you on the right track. Also, you can simplify your code slightly since the information you're looking for is contained in the $location and not $routeParams.
Site.controller("RouteController", function($scope, $location) {
var slug = $location.path();
var pages = {
"/home": {
"title": "Samuele Mattiuzzo",
},
"/who": {
"title": "All you'll get, won't blog"
},
"/what": {
"title": "Shenanigans about this website"
},
"/where": {
"title": "Where can you find me on the net?"
}
};
$scope.page = pages[slug];
});
Additionally, in your AppController you can watch for $routeChangeSuccess instead of notifying on a location change from your RouteController:
Site.controller("AppController", function($rootScope) {
$rootScope.$on("$routeChangeSuccess", function() { \\do something }
});