cannot get error using angularjs with express.js - javascript

I've a file of index.html that has
<ui-view></ui-view>
in the body and below is my route.js :
var app = angular.module('dashboard', ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home", {
url: "/",
template:"<h1>home</h1>"
})
.state("dashboard", {
url: "/dashboard",
templateUrl: "templates/dashboard.html",
controller: "controllers/dashboardCtrl"
})
}]);
but I get error of Cannot GET /dashboard I wonder why. I did have a folder called templates and has a dashboard.html in it.

Related

Angular.js route is not working

friends, I am new in angular js and I was trying to work with angular Route, but when I click on #/home it gives me some strange URL http://127.0.0.1:3000/#!/home#%2Fhome
But By default, the otherwise condition is working fine http://127.0.0.1:3000/#!/home
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home', {
templateUrl: 'views/home.html'
})
.when('/list', {
templateUrl: 'Views/listing.html',
controller: 'mycontroller'
}).otherwise({
redirectTo: '/home'
})
}]);

you can try with
use $locationProvider
angular.module('myApp', ['ngRoute'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('');
}]);

ngRoute in AngularJS not routing to ashx file

I am trying to route a link to a .ashx service file, but it's not working. It works fine when I redirect to .html files, but when I redirect it to an .ashx, file it gives an error; file does not exist on current directory.
The following is my App.config code:
App.config(function($routeProvider, $locationProvider) {
$routeProvider.caseInsensitiveMatch = true;
$routeProvider
.when("/home", {
controller: "homeController",
templateUrl: "templates/home.html",
})
.when("/api", {
controller: "apiController",
templateUrl: "../ExclusiveAutoSales_Handler.ashx",
})
.when("/filter", {
controller: "filterController",
templateUrl: "templates/filter.html",
})
.otherwise({
redirectTo: "/home"
})
$locationProvider.html5Mode(true);
});

Using $cookies.get in angular config file

So i am trying to access cookies in my angular config file but i keep getting injection errors.
I have looked at many resources but still can not get it to work. please help
here is my routes.js
'use strict';
/**
* Route configuration for the DashApp module.
*/
angular.module('DashApp').config(['$stateProvider', '$urlRouterProvider','$cookies',
function($stateProvider, $urlRouterProvider, $cookies) {
if($cookies.get('email') ===undefined){
console.log('user not logged in');
//this doesnt work, injecting $cookies causes error
}
// For unmatched routes
$urlRouterProvider.otherwise('/');
// Application routes
$stateProvider
.state('index', {
url: '/',
templateUrl: 'templates/dashboard.html'
})
.state('account', {
url: '/account',
templateUrl: 'templates/account.html'
});
}
]);

$urlRouterProvider is causing an error, despite ui-router being injected - angularjs

I'm using ui-router for Angular routing - and the states and the $stateProvider are all working without a hitch.
However, the $urlRouterProvider is causing an error - specifically:
Failed to instantiate module MyApp due to:
TypeError: Cannot read property 'otherwise' of undefined
Here is my config:
angular.module('MyApp', ['ngResource', 'mgcrea.ngStrap', 'stripe', 'ui.router', 'ui.bootstrap', 'ui.bootstrap.datepicker', 'ui.bootstrap.datetimepicker', 'ngAnimate'])
.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){
//This console log is undefined
console.log($urlRouterProvider);
// catch all route
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/',
templateUrl: 'views/home.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.date', {
url: 'date',
templateUrl: 'views/form-date.html'
})
// url will be /form/interests
.state('form.address', {
url: 'address',
templateUrl: 'views/form-interests.html'
})
// url will be /form/payment
.state('form.payment', {
url: 'payment',
templateUrl: 'views/form-payment.html'
});
}]);
What am i missing?

This is wrong
.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider)
It shoud be:
.config(['$locationProvider', '$stateProvider', 'stripeProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider)

Problem is Here
.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){
Solution 1
.config(['$locationProvider', '$stateProvider', ', stripeProvider' '$urlRouterProvider', function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){
// do stuff here
}]);
Solution 2
.config(function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){
// do stuff here
}]);
Happy Helping!

Angulars $routeProvider does not route

I have a $routeProvider in my Angular JS application which won't load the template in the ng-view.
I've set up <html data-ng-app="myApp"> and <section data-ng-view></section.
It does neither load the template (doesn't even make an XHR), nor does it redirect on other paths (like /#/foo/bar/foo/ and it doesn't throw an error.
This is my configuration:
angular.module('myApp', ['myAppFilters'])
.config [
'$routeProvider',
($routeProvider) ->
$routeProvider
.when '/:year/:month',
templateUrl: 'partials/detail.html'
controller: DetailCntl
.when '/:user/:year/:month',
templateUrl: 'partials/detail.html'
controller: DetailCntl
.otherwise
redirectTo: '/'
]
Edit: Here's the compiled JS:
angular.module('myApp', ['myAppFilters']).config([
'$routeProvider', function($routeProvider) {
return $routeProvider.when('/:year/:month', {
templateUrl: 'partials/detail.html',
controller: DetailCntl
}).when('/:user/:year/:month', {
templateUrl: 'partials/detail.html',
controller: DetailCntl
}).otherwise({
redirectTo: '/'
});
}
]);
Edit #2: I found the solution by myself:
I had this line in my factories.coffee which overwrote the config:
angular.module('myApp', []).factory 'api', ($http, $q, $cacheFactory) ->
...
Now I have the config assigned to #myApp and am using #myApp.factory 'api', ... and it's working.

I found the solution by myself: I had this line in my factories.coffee which overwrote the config:
angular.module('myApp', []).factory 'api', ($http, $q, $cacheFactory) ->
...
Now I have the config assigned to #myApp and am using #myApp.factory 'api', ... and it's working.
Thanks for your support.

Categories

Resources