I'm using the ngClip plugin to attempt to add a "copy to clipboard" option to my web app. I am also using the ui-router in my module config. The problem is that when I add the ngClipProvider dependency to my .config, the $urlRouterProvider becomes undefined. When I remove it, $urlRouterProvider is an object again. Below is my code:
var app = angular.module('app',['ui.router', 'ui.date', 'ngAnimate', 'angular-loading-bar', 'orders-directives', 'orders-controllers', 'orders-services', 'orders-factories', 'ngClipboard']);
//Config
app.config(['ngClipProvider', function($stateProvider, $urlRouterProvider, ngClipProvider){
$urlRouterProvider.otherwise('/');
$stateProvider.state('/', {
url: '/',
templateUrl: 'templates/admin-view.html',
controller: 'ordersController as ordersCtrl'
}).state('order', {
url: '/order/:ordernum?id',
templateUrl: 'templates/order-details.html',
controller: 'orderDetailsController as orderCtrl'
}).state('export', {
url: '/export',
templateUrl: 'templates/review-export.html',
controller: 'reviewExportController as reviewExportCtrl'
});
//ngClipProvider.setPath("../plugins/ZeroClipboard/ZeroClipboard.swf");
}]);
If I remove the "['ngClipProvider .....]" section and the "ngClipProvider" from the function parameters, everything works. As is above, $urlRouterProvider is null.
You are messing with inline dependency injection array , missed to add '$stateProvider', '$urlRouterProvider' before 'ngClipProvider'
app.config(['$stateProvider', '$urlRouterProvider', 'ngClipProvider',
function($stateProvider, $urlRouterProvider, ngClipProvider){
//code here...
}])
Related
We are continuing the development of our website that uses AngularJS on the frontend, and Yii 1.1 on the backend.
Our application allows users to create their own community groups
When a user clicks on a group called "ABC Group" (who's ID is 9), the url is
http://ourwebsite.com/#/app/group/9/content/list
We want to change this however to look like:
http://ourwebsite.com/abcgroup/
we are using ui-router
Any ideas how to do this?
Also, why does angular use the "#" at all?
You have to inject $locationProvider and set the property html5Mode true as follow:-
$locationProvider.html5Mode(true);
Eg:-
angular.module('myModule', [])
.config(['$routeProvider', '$locationProvider', function($routeProvider,
$locationProvider) {
$routeProvider.
when('/contact', {templateUrl: 'xyz/contact.html', controller: mycontroller})
.otherwise({redirectTo: '/home.html'});
$locationProvider.html5Mode(true);
}]);
Even you can check the answer here
if you are using ui-router you can do the same with $stateProvider
angular.module('myModule', [])
.config(['$stateProvider', '$locationProvider', function($stateProvider,
$locationProvider) {
$stateProvider
.state("contact",
{
url: "xyz/contact",
views: {
'content': {
templateUrl: "Views/xyz/contact.html",
controller: "contactController"
}
}
})
$locationProvider.html5Mode(true);
]);
How to user otherwise on stateProvider similar like angular UI router provider otherwise
angular.module('myApp', ['ui.router'])
.config(['$urlRouterProvider','$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider
.otherwise('/');
$stateProvider
.state('home',{
url : '/',
template: 'path_to_template',
controller: 'homeCtrl'
})
}])
With Yeoman I created an angular-fullstack project using the ui-route. And now I would like to know how the change the main view to login.html. So normally when you start the application you first get the main view where you can chose to login or register. What I want is when the application start the page starts direct on the login.html
Via this post -> How to change/set the main view using Yeoman with Angular Fullstack , I tried the following:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
$stateProvider
.run(function ($state) {
$state.go('login');
});
})
But when I implement this code then the main view page just goes blank and when I surf to http://localhost:900/login then I get a 304
You can make login the default route:
$urlRouterProvider
.otherwise('/login');
For those who might come across the same issue as me. I found the solution. So basically I just go to the main.js and change the code to
'use strict';
angular.module('zazzleToolPlannerApp')
.config(function ($stateProvider) {
$stateProvider
.state('main', {
url: '/login',
templateUrl: 'app/account/login.html',
controller: 'MainCtrl'
});
});
And in the app.js of the folder app you just change the following code
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
})
TO:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.otherwise('/login');
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
})
There is the following code:
angular.module('app', ['app.animators', 'app.events', 'app.hotel', 'app.controllers', 'app.services', 'ui.router', 'templates', 'ngResource', 'ngCookies', 'ui.bootstrap', 'ngImgCrop', 'angularjs-dropdown-multiselect']).config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
$urlRouterProvider.otherwise("/404")
$stateProvider.state('signIn'
url: '/admin/signin'
controller: 'SignInController'
templateUrl: 'signin.html'
)
$locationProvider.html5Mode(true)
])
It works good, but I change it to the following code:
angular.module('app', ['app.animators', 'app.events', 'app.hotel', 'app.controllers', 'app.services', 'ui.router', 'templates', 'ngResource', 'ngCookies', 'ui.bootstrap', 'ngImgCrop', 'angularjs-dropdown-multiselect']).config(['$httpProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider', ($httpProvider, $locationProvider, $stateProvider, $urlRouterProvider) ->
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
$urlRouterProvider.otherwise("/404")
$stateProvider.state('admin.signIn'
url: '/admin/signin'
controller: 'SignInController'
templateUrl: 'signin.html'
).state('admin'
abstract: true
)
$locationProvider.html5Mode(true)
])
It doesn't work, i.e. I enter the address 'http://localhost/admin/signin', browser is loading, but I don't get 'signin.html' template. I need to use 'admin' state in order to use a 'resolve' function for all child states (my example is not complete). What's the trouble ? Thanks in advance!
Almost each parent should have a template - the one which will be a target for its child. There is a working plunker.
So just adding this line to the parent definition: template: "<div ui-view></div>" - will make that code working:
.state('admin', {
abstract: true,
template: "<div ui-view></div>"
})
What happened is - child does have its target, the anchor where it could be injected.
There could be other solution, e.g. child is targeting the root ui-view="" ... but above solution is appropriate... See View Names - Relative vs. Absolute Names, check this answer and its plunker with more examples of absolute name targeting
Check it in action here
I am new with Angularjs
and I want to use angular-translate
here is the site
http://pascalprecht.github.io/angular-translate/
I refer it document , and I got the error
Uncaught TypeError: Cannot call method 'useStaticFilesLoader' of undefined from remoteApp
here is my code
app.js
angular.module('remoteApp', ['ui.bootstrap', 'ui.router', 'ngResource', 'truncate',
'pascalprecht.translate'])
.config(['$translateProvider', function ($routeProvider, $stateProvider, $urlRouterProvider,
$translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'languange/locale-',
suffix: '.json'
});
$translateProvider.preferredLanguage('en');
$translateProvider.useLocalStorage();
$stateProvider
.state('index', {
url: "",
views: {
"viewA": {
templateUrl: "views/main.html",
controller: 'MainCtrl'
},
"viewB": {
templateUrl: "views/appList.html",
controller: 'MainCtrl'
},
"viewC": {
templateUrl: "views/appTree.html",
controller: 'ApptreeCtrl'
}
},
})
.state('applicatoion', {
url: "/applicatoion",
views: {
"viewA": {
templateUrl: "views/main.html",
controller: 'MainCtrl'
},
"viewB": {
templateUrl: "views/appList.html",
controller: 'MainCtrl'
},
"viewC": {
templateUrl: "views/appTree.html",
controller: 'ApptreeCtrl'
}
}
})}]);
I have no idea about it ,
please help
Right now this is how you are calling .config
config(['$translateProvider', function ($routeProvider, $stateProvider, $urlRouterProvider,
$translateProvider) {
// ...
}]);
.config has its parameters ( dependencies ) injected by AngularJS, there are two ways to call config;
1 - Pass in a function and AngularJS will read the parameter names and find the matching dependencies.
2 - Pass in an array, of which the last item is a function, and the other items are names of dependencies, if you use this, AngularJS will not read the function's parameter names. The reason this exists is so you can minify your code; because minifying would change the parameter names, and AngularJS uses those names to find dependencies.
What you have now is you specify only one dependency, '$translateProvider', which means the first parameter being passed to the function is the translateProvider, and the other parameters end up being undefined, because you didn't ask for more dependencies.
What you can do is either let AngularJS read your dependency names like this
config(function ($routeProvider, $stateProvider, $urlRouterProvider, $translateProvider) {
// ...
});
Or you can specify all of the dependencies, matching the function parameter list like this, allowing you ( only if you do this consistently ) to minify your code without breaking it.
config(['$routeProvider', '$stateProvider', '$urlRouterProvider', '$translateProvider',
function ($routeProvider, $stateProvider, $urlRouterProvider, $translateProvider) {
// ...
}]);