My main module definition:
angular.module('app', ['app.animators',
'app.places',
'app.orders',
'app.excursions',
'app.events',
'app.hotel',
'app.controllers',
'app.services',
'angular-img-cropper',
'ui.router',
'templates',
'ngResource',
'ngCookies',
'ui.bootstrap',
'ngImgCrop',
'angularjs-dropdown-multiselect',
'uiGmapgoogle-maps'])
.config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
$urlRouterProvider.otherwise("/admin/home")
$stateProvider.state('admin.services'
url: '/services'
controller: 'ServicesController'
templateUrl: 'services.html'
).state('admin.home'
url: '/home'
templateUrl: 'home.html'
).state('signIn'
url: '/admin/signin'
controller: 'SignInController'
templateUrl: 'signin.html'
resolve:
user: ['authService', '$q', (authService, $q) ->
$q.reject({ authorized : true }) if authService.currentUser()
]
).state('admin.signOut'
url: '/signout'
controller: 'SignOutController'
).state('404'
url: '/404'
templateUrl: '404.html'
).state('admin'
abstract: true
url: '/admin'
template: '<ui-view />'
resolve:
user: ['authService', '$q', (authService, $q) ->
$q.reject({ unAuthorized : true }) unless authService.currentUser()
]
)
$locationProvider.html5Mode(true)
])
Also in index.html is <script src="/assets/angular-cookies/angular-cookies.js?body=1">. I get the error in this module:
angular.module('app.services', []).factory('authService', ['SIGN_IN_ENDPOINT', 'SIGN_OUT_ENDPOINT', '$http', '$cookies', (SIGN_IN_ENDPOINT, SIGN_OUT_ENDPOINT, $http, $cookies) ->
auth = {}
auth.signIn = (credentials) ->
return $http.post(SIGN_IN_ENDPOINT, { user: credentials })
auth.signOut = ->
return $http.delete(SIGN_OUT_ENDPOINT)
auth.currentUser = ->
$cookies.remember_token
auth
]).value('SIGN_IN_ENDPOINT', "#{ location.protocol }//#{ location.host }/sign_in").value('SIGN_OUT_ENDPOINT', "#{ location.protocol }//#{ location.host }/sign_out")
.factory("httpErrorInterceptorModule", ["$q", "$rootScope", "$location", ($q, $rootScope, $location) ->
success = (response) ->
return response;
error = (response) ->
if(response.status is 401)
$location.path('/admin/signin')
return $q.reject(response)
return (httpPromise) ->
return httpPromise.then(success, error)
]).config(["$httpProvider", ($httpProvider) ->
$httpProvider.responseInterceptors.push("httpErrorInterceptorModule")
])
Error is: Error: [$injector:unpr] Unknown provider: $$cookieReaderProvider <- $$cookieReader <- $cookies <- authService
What I do wrong? AngularJS version is 1.2.25.
angular-cookie.js version must have the same version that angular.js
"//code.angularjs.org/X.Y.Z/angular-cookies.js"
where X.Y.Z is the AngularJS version you are running.
If you use angularJs version 1.3 use angular-cookies 1.3.17!
In my project i have the same problem!
So i did a downgrade!
This is because when you initialize module app.services, you forget to inject ngCookies. You only include ngCookies in app, which is a different module.
A quick fix here is changing your module definition to
angular.module('app.services', ['ngCookies']).factory('authService', ...
Related
When I was load state using ui-serf my css, js angular js file not load they give me error Uncaught SyntaxError: Unexpected token < in angular js 1 but in normally means without ui-sref means using states they load my hole html page with css and all file using state.go
my code is
module-
var Fishmart = angular.module('Fishmart', ['oc.lazyLoad', 'ui.router',
'ui.bootstrap', 'LocalStorageModule', 'slickCarousel']);
controller -
Fishmart.controller('productZoomController', ['$scope', 'ApiCall',
'$rootScope', '$state', '$stateParams', '$timeout', 'myStorageService', '
$ocLazyLoad',
function ($scope, ApiCall, $rootScope, $state, $stateParams, $timeout,
myStorageService, $ocLazyLoad) {
var Code = $stateParams.ID;
}]);
my config file is
Fishmart.config(['$ocLazyLoadProvider',
'localStorageServiceProvider','$stateProvider', '$urlRouterProvider',
'$locationProvider',
function ($ocLazyLoadProvider, localStorageServiceProvider, $stateProvider,
$urlRouterProvider, $locationProvider)
{
$urlRouterProvider.otherwise('/index');
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$stateProvider
.state('indexbody', {
url: '/index',
controller: 'indexBodyController',
templateUrl: 'angular_views/Index/indexbody.html',
resolve: {
loadMyFile: function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'Fishmart',
files: ['angular_scripts/controllers/indexBodyController.js']
})
}
}
}).state('menudetails', {
url: '/menudetails/:ID',
controller: 'productZoomController',
templateUrl: 'angular_views/ProductDetails/productzoom.html',
resolve: {
loadMyFile: function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'Fishmart',
files: ['angular_scripts/controllers/productZoomController.js'
, 'assets/css/xzoom.css'
, 'assets/js/xzoom.js']
})
}
}
});
HTML CODE
<a ui-sref="menudetails({ID:data.ProductCode})" href="#" class="btn btn-
outline-primary btn-lg"><span>Order now !</span></a>
please tell me whats wrong
Basically I want to create routes for my angular app from a CMS without a deployment. So I am trying to do something similar to this tutorial: http://gonzalo123.com/2014/06/30/setting-up-states-from-a-json-file-in-angularjs-applications/. Essentially I have json document that has a list of available routes, and I want to be able to access those routes by name. This is what I have:
newco.js:
#newco = angular.module 'newco', [
'ui.bootstrap',
'ngResource',
'ngRoute',
'ngIdle',
'LocalStorageModule',
'checklist-model',
# 'zj.namedRoutes',
'ng.deviceDetector',
'noCAPTCHA',
'feature-flags',
'ui.router',
'Routing'
]
#newco.config(['$provide', '$locationProvider','$httpProvider', '$stateProvider', '$urlRouterProvider', 'routerProvider', ($provide, $locationProvider, $httpProvider, $stateProvider, $urlRouterProvider, routerProvider) ->
$httpProvider.interceptors.push('localeInterceptor');
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$urlRouterProvider.otherwise '/'
routerProvider.setCollectionUrl
return
$stateProvider.state '/',
url: '/'
templateUrl: '/pages/home/index-v3'
$urlRouterProvider.otherwise '/home'
routerProvider.setCollectionUrl
return
]).controller 'NewHomeController', ($scope, router) ->
$scope.reload = ->
router.setUpRoutes()
return
return
routing.js.coffee:
angular.module('Routing', [ 'ui.router' ]).provider('router', ($stateProvider) ->
urlCollection = undefined
#$get = ($http, $state, CMSS3Url) ->
{ setUpRoutes: ->
$http.get(CMSS3Url + '/routes.json').success (collection) ->
_.each collection.routes, (route) ->
$stateProvider.state route,
url: route
templateUrl: '/pages/home/new_index'
controller: 'NewHomeController'
return
return
}
#setCollectionUrl = (url) ->
urlCollection = url
return
return
).run (router) ->
router.setUpRoutes()
return
collection:
{
"routes": [
"/route1",
"/route2",
"/"
]
}
Because I converted from plain js to coffee I am thinking it could be a minification issue but I honestly don't know. Any help is greatly appreciated.
I'm getting unknown state provider: editProvider <- edit <- FooController in my code:
var app = angular.module('myApp', ['ui.router']);
app.handler.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('edit', {
url: '/foo/edit',
resolve: {
values: ['FooService',
function (FooService) {
return FooService.getSomeData();
}]
},
templateUrl: '',
controller: 'FooController'
});
}]);
app.controller('FooController', ['$scope', '$http', '$state', 'FooService', 'edit', function ($scope, $http, $state, FooService, edit) {
console.log(edit.data);
}]);
The error appears inside the controller code - what's wrong?
I am trying to migrate my angularjs 1.2 app (which is working fine now) to angularjs 1.3. But I am getting the below error.
[$injector:modulerr] Failed to instantiate module constructionApp due
to: TypeError: Unable to get property 'push' of undefined or null
reference at Anonymous function (http://localhost/app/app.js:33:5)
Also, this is the code I am having in my app.js
var cmApp = angular.module('myApp',
['xeditable', 'ui.bindonce', 'gantt', 'angularFileUpload', 'ui.bootstrap', 'ui.router', 'ngAnimate', 'wc.Directives']);
cmApp.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
var interceptor = ['$rootScope', '$q', '$location', function (scope, $q, $location) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401 || status == 404) {
$location.path('#/Error');
return;
}
// otherwise
return $q.reject(response);
}
return function (promise) {
return promise.then(success, error);
}
}];
$httpProvider.responseInterceptors.push(interceptor); ***get error at this line
// For any unmatched url, redirect to /home
$urlRouterProvider.otherwise("/Home");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "/app/views/home.html",
controller: "homeController"
})
.state('somepage', {
url: "/somepage/:ID",
templateUrl: "/app/views/somepage.html",
controller: "somePageController"
})
});
Please help me to solve this migration issue.
I have the following in my app.js:
var app = angular.module('app', ['admin', 'ui.compat', 'ngResource', 'LocalStorageModule']);
app.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var home = {
name: 'home',
url: '/home',
views: {
'nav-sub': {
templateUrl: '/Content/app/home/partials/nav-sub.html',
}
}
};
$stateProvider.state(home)
}])
.run(['$rootScope', '$state', '$stateParams', function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
$state.transitionTo('home');
}]);
in admin.js:
angular
.module('admin', ['ui.state'])
.config(['$stateProvider', '$locationProvider',
function ($stateProvider, $locationProvider) {
$locationProvider.html5Mode(true);
var admin = {
name: 'admin',
url: '/admin',
views: {
'nav-sub': {
templateUrl: '/Content/app/admin/partials/nav-sub.html',
}
}
};
var adminContent = {
name: 'admin.content',
parent: admin,
url: '/content', views: {
'grid#': {
templateUrl: '/Content/app/admin/partials/content.html',
controller: 'AdminContentController'
}
}
}
$stateProvider.state(admin).state(adminContent)
}])
I am confused about how to wire up my AdminContentController. Currently I have the following:
app.controller('AdminContentController',
['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
function ($scope, entityService, gridService, gridSelectService, localStorageService) {
$scope.entityType = 'Content';
Can someone verify if this is the correct way for me to set up my module and add it to app. Should I be adding the controller to the app:
app.controller('AdminContentController',
or should this belong to the module 'admin'. If it should then how should I wire it up?
Based on what you have shared, the the controller should be created on admin module such as
var adminModule=angular.module('admin'); // This syntax get the module
adminModule.controller('AdminContentController',
['$scope', 'entityService', 'gridService', 'gridSelectService', 'localStorageService',
function ($scope, entityService, gridService, gridSelectService, localStorageService) {
$scope.entityType = 'Content';
You could also define the controller in continuation of your admin module declaration.
Yes that would work angular.module('admin') works as a getter. So you'll get the same module in each file.