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'
});
}
]);
Related
I'm using ocLazyLoad and I have some external angular libraries (Like Chart.js and pascalprecht.translate) and I need to lazy load them in some routes, as you know, for the common angular module dependency injection should be like:
var angularApp = angular.module('myApp',
['oc.lazyLoad', 'pascalprecht.translate', 'chart.js']);
Now, I just need to lazy loading pascalprecht.translate in one of my controllers and also lazy loading chart.js, in another controller, but I still need to add inject them to myApp module but I don't know how to inject and I do not use $stateProvider
I tried this my controller that I needed chart.js:
//Load here.
//$ocLazyLoad.load('./panel/dist/test.js');
angular.module('myApp', ['chart.js', [
'./panel/dist/static/chart.min.js',
'./panel/dist/static/angular-chart.min.js'
]]);
$ocLazyLoad.load('./panel/dist/static/chart.min.js');
$ocLazyLoad.load('./panel/dist/static/angular-chart.min.js');
But I got this error:
angular-chart.min.js:10Uncaught Error: Chart.js library needs to
included, see http://jtblin.github.io/angular-chart.js/
First, you do not need to inject chart.js in your dependency injection, this should be your module:
var angularApp = angular.module('myApp', [ 'oc.lazyLoad' ]);
Now, you want to have access to some libraries from different controllers (let's say routes), as you said you do not use $stateProvider which means you do not use ui-router (which is a third-party library to work with routes and URLs).
This is my suggestion (just a simple solution):
angularApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeController',
resolve: {
store: function ($ocLazyLoad) {
return $ocLazyLoad.load(
{
serie: true,
name: "chart.js",
files: [
"./static/chart.min.js",
"./static/chart-angular.min.js",
]
}
);
}
}
});
$routeProvider.when('/needs-translate', {
templateUrl: 'views/needs-translate.html',
controller: 'translateController',
resolve: {
store: function ($ocLazyLoad) {
return $ocLazyLoad.load(
{
serie: true,
name: "pascalprecht.translate",
files: [
"./static/translate.js"
]
}
);
}
}
});
$routeProvider.otherwise({
redirectTo: '/home'
});
// use the HTML5 History API
$locationProvider.hashPrefix = '!';
$locationProvider.html5Mode(true);
});
By the way, if you are using ui.router, this Github issue would be useful for you
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.
For some reason I cannot get routing working using 1.5.0. This works with angular 1.4.9.
.config([
"$routeProvider", "$locationProvider", function($routeProvider, $locationProvider) {
$routeProvider
.when("/:stepNumber", {
templateUrl: function (urlattr) {
return "/views/" + urlattr.stepNumber + ".html";
}
})
.otherwise({
//Redirect to first step if unknown
redirectTo: "/1"
});
$locationProvider.html5Mode(true);
}
])
The redirect doesn't seem to be happening. Replacing all angular references from 1.5.0 back to 1.4.9 makes everything work as normal.
I am trying to integrate the following angular module:
https://github.com/wongatech/angular-http-loader/blob/master/app/src/demo.html
into my app
However, when I try to integrate it, I get a white screen.
My code is as follows:
/* global app:true */
/* exported app */
'use strict';
/**
* #ngdoc overview
* #name WebAppApp
* #description
* # WebAppApp
*
* Main module of the application.
*/
var app = angular
.module('WebAppApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'angularUtils.directives.dirPagination',
'ui.bootstrap',
'ng.httpLoader'
])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/login.html',
controller: 'loginCtrl',
// controllerAs: 'login'
})
.when('/home', {
controller: 'homeCtrl',
templateUrl: 'views/home.html',
resolve: {
"checkLoggedIn": function($location, $cookies, $rootScope) {
if (!$cookies.get('globals')) {
$location.path('/');
}
}
},
//controllerAs: 'home'
})
.when('/menteeMentors', {
controller: 'menteeMentorsCtrl',
templateUrl: 'views/listMentorsMentees.html',
resolve: {
"checkLoggedIn": function($location, $cookies, $rootScope) {
if (!$cookies.get('globals')) {
$location.path('/');
}
}
},
//controllerAs: 'home'
})
.when('/myGoals', {
controller: 'myGoalsCtrl',
templateUrl: 'views/myGoals.html',
resolve: {
"checkLoggedIn": function($location, $cookies, $rootScope) {
if (!$cookies.get('globals')) {
$location.path('/');
}
}
},
//controllerAs: 'home'
})
.when('/addGoal', {
controller: 'myGoalsCtrl',
templateUrl: 'views/addGoal.html',
resolve: {
"checkLoggedIn": function($location, $cookies, $rootScope) {
if (!$cookies.get('globals')) {
$location.path('/');
}
}
},
//controllerAs: 'home'
})
.when('/signup', {
templateUrl: 'views/signup.html',
controller: 'signupCtrl',
//controllerAs: 'home'
})
.otherwise({
redirectTo: '/'
});
//check browser support
if (window.history && window.history.pushState) {
//$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">
// to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase
// if you don't wish to set base URL then use this
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
});
.config([
'httpMethodInterceptorProvider',
function(httpMethodInterceptorProvider) {
httpMethodInterceptorProvider.whitelistDomain('validate.jsontest.com');
httpMethodInterceptorProvider.whitelistDomain('github.com');
}
]);
I am using yeoman scaffolding for AngularJS
The error from console is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module WebAppApp due to:
Error: [$injector:nomod] Module 'WebAppApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=WebAppApp
at REGEX_STRING_REGEXP (http://localhost:9000/bower_components/angular/angular.js:68:12)
at http://localhost:9000/bower_components/angular/angular.js:1958:17
at ensure (http://localhost:9000/bower_components/angular/angular.js:1882:38)
at module (http://localhost:9000/bower_components/angular/angular.js:1956:14)
at http://localhost:9000/bower_components/angular/angular.js:4362:22
at forEach (http://localhost:9000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:9000/bower_components/angular/angular.js:4346:5)
at createInjector (http://localhost:9000/bower_components/angular/angular.js:4272:11)
at doBootstrap (http://localhost:9000/bower_components/angular/angular.js:1630:20)
at bootstrap (http://localhost:9000/bower_components/angular/angular.js:1651:12)
http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=urbaneWebAppApp&p1=…F%2Flocalhost%3A9000%2Fbower_components%2Fangular%2Fangular.js%3A1651%3A12)
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!