I create packaged chrome application with AngularJS and ui-router. Application has this config to work with url:
app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $routerProvider, $locationProvider) {
$routerProvider.otherwise('/login');
$stateProvider.state('login', {
url: '/login',
controller: 'Login',
templateUrl: "/part/login/index.html"
});
$stateProvider.state('cabinet', {
templateUrl: '/part/cabinet/index.html',
abstract: true
});
$stateProvider.state('cabinet.cars', {
url: '/cars',
templateUrl: '/part/cars/cars.html',
controller: 'CarsList'
});
$stateProvider.state("cabinet.cars.car", {
url: '/:id',
templateUrl: '/part/cars/car.html',
controller: function() {console.log('ok');}
});
}]);
When I try to create link with:
<a ui-sref="cabinet.cars.car({id: 1})">Link</a>
Then I get this link:
<a ui-sref="cabinet.cars.car({id: 1})" href="unsafe:chrome-extension://jnjgkohadplkakigldhhojdfdihgdigf/#/cars/1">Link</a>
As you can see, link contains this part:
unsafe:chrome-extension://jnjgkohadplkakigldhhojdfdihgdigf
And it not work. When I click on it, nothing to do.
Tell me please, how I can create link without origin part of url?
Thank you.
Answer
I am find this answer: https://stackoverflow.com/a/15769779/2114208
It help me to solve problem.
Related
I need to convert this line
$location.url('/im?p=' + peer);
to using $state, I can't seem to properly get it working. I have followed these stack overflow questions but I can't seem to get it right
AngularJs ui-router $location or $state?
Angular ui-router - how to access parameters in nested, named view, passed from the parent template?
my app.js has this state currently as this
$stateProvider
.state('home', {
url: '/home',
abstract: true,
templateUrl: 'templates/home/index.html'
})
.state('home.matches', {
url: '/matches/:p',
templateUrl: 'templates/home/matches.html',
controller: 'AppIMController'
})
})
app.js used to be
$routeProvider.when('/im', {templateUrl: templateUrl('im'), controller: 'AppIMController', reloadOnSearch: false});
This should do it for you. You don't need "peer" url property.
state('home.matches', {
url: '/new?p',
templateUrl: 'templates/home/matches.html',
controller: function($scope, $stateParams) {
$scope.peer = $stateParams.p;
}
})
I have an AngularJS routes file in an ionic project, and I have a very large amount of routes, about a hundred. Is like the one below.
(function() {
'use strict';
angular.module('application').config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'menuController'
})
.state('app.signup', {
url: '/signup',
views: {
'menuContent': {
templateUrl: 'templates/signup.html',
controller: 'signupController'
}
}
})
.state('app.home', {
url: '/home',
views: {
'menuContent': {
templateUrl: 'templates/home.html',
controller: 'homeController'
}
}
})
.state('app.user', {
url: '/user',
views: {
'menuContent': {
templateUrl: 'templates/user.html',
controller: 'userController'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/signup');
});
})();
However, I want to do better to solve a high percentage of code duplication, which is shown on the sonar. I saw a model here https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#style-y270 but I do not know how to get my code to this structure, or a way that can reduce the percentage of duplication, how can I do?
Let's be honest: what you are trying to fix is a perfectly valid code. This is some kind of configuration - so no wonder why SonarQube detects it as copy-paste. But this does not mean that you should fix something.
Instead, I would suggest you to configure SonarQube to ignore this specific file. You can do it in the administration settings of your project in SonarQube: "Analysis Scope > Duplications".
Please read the "Narrowing the Focus" documentation page to know more about this.
I am using angularjs ui-router for a cordova app. I am trying to reuse a ui-view template (left-panel) for multiple states. This ui-view is for almost all the states except one state. I tried to refer many tutorials but still not able to implement what I want. Here is my code in app.js:
var angularApp = angular.module('angularApp', [
'ui.router',
]);
angularApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('root', {
abstract: true,
views: {
'left-panel': {
templateUrl: 'templates/common-left-panel.html',
},
}
})
.state('root.home', {
url: '/',
views: {
'container#': {
templateUrl: 'templates/home.html',
}
}
})
.state('root.settings', {
url: 'settings',
views: {
'container#': {
templateUrl: 'templates/settings.html',
}
}
})
.state('root.category', {
url: 'category/:catId',
views: {
'container#': {
templateUrl: 'templates/category-nodes.html',
controller: 'ListCatNodesCtrl'
}
}
})
});
This is in index.html
<div ui-view="left-panel"></div>
<a ui-sref="root.settings">Settings</a>
<div ui-view="container"></div>
With this code, the home page is rendered properly. But when I click on the settings link, there isn't any change in screen or url. In rendered DOM, I get <a ui-sref="root.settings" href="#settings">Settings</a>. The same holds for category page as well. Basically I am developing an android app using cordova and angularjs. Loads of thanks in advance.
I am working on a MEAN application and I don't know how can I make my ui-router work as expected.
I have an index.html template where i load all my javascript and css that my application needs to work like angular, jquery, angular-ui-x, bootstrap and inside the index's body i have set an ui-view.
The first state I'm using is login, that uses all index's body ui-view. When users is logged in succesfully, it redirects to a home.html page (state: home) which also is using all index's body. Home has a sidebar a header and a content. Inside home's content i'm placing a nested ui-view.
I want every content that comes next inside home's ui-view. And if it's possible i want to make home abstract so i dont have to do home.state1, etc.
To clarify things i have draw an image (I know, my mspaint level is impressive).
And here are my states:
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("login");
$stateProvider
.state('login', {
url: '/login',
templateUrl: '../views/login.html',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'myApp',
files: [
'js/controllers/LoginCtrl.js',
'css/login.css'
]
}]);
}]
}
})
.state('home', {
url: '/home',
templateUrl: '../views/home.html',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([{
name: 'myApp',
files: [
'js/controllers/homeCtrl.js',
'css/template.css'
]
}]);
}]
}
})
});
Here is an exemple of multiple states with some statics parts (menus etc...)
See it working in this plunker
Here are the states definitions :
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl'
})
//This is not a real view so we put it abstract
//This will manage the menus
.state('app', {
abstract: true,
templateUrl: 'app.html',
controller: 'AppCtrl'
})
.state('app.home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeCtrl'
})
.state('app.greetings', {
url: '/greetings',
templateUrl: 'greetings.html',
controller: 'GreetCtrl'
})
});
Hope it helped, if you have any other question feel free to ask.
EDIT : I personally prefer to call the abstract state "app" cause it symbolize the application view.
I'm trying to implement login using Angular.js with Laravel as a back end. I'm using an abstract state for handling the layout. There are 2 abstract states: 1 for public pages and 1 for admin pages. The problem is when I login, when I use $state.go('admin.dash') or $window.location.href = '#/admin/dash' it redirects me to the page but the sidebar isn't loaded. It only loads when I access the page directly or do a full page refresh on the browser.
Here's what my loginController looks like:
(function(){
angular.module('starter.controllers')
.controller('LoginController', ['$scope', 'UserService', '$state', '$window', LoginController]);
function LoginController($scope, UserService, $state, $window){
var me = this;
me.loginUser = function(user){
UserService.login(user).then(function(data){
$window.location.href = ('#/admin/dash'); //also tried $state.go
});
};
};
})();
And here's what the app configuration for the states look like:
.config(function($stateProvider, $urlRouterProvider) {
.state('home', {
url: "/home",
abstract: true,
templateUrl: "templates/layouts/tabs.html"
})
.state('home.login', {
url: '/login',
views: {
'home-login': {
templateUrl: 'templates/tab-login.html',
controller: 'LoginController'
}
}
})
.state('admin', {
url: "/admin",
abstract: true,
templateUrl: "templates/layouts/admin-menu.html"
})
.state('admin.dash', {
url: '/dash',
views: {
'menuContent': {
templateUrl: 'templates/admin/dash.html'
}
}
});
So basically I'm trying to redirect from the home state to the admin state. When I checked on chrome dev tools the HTML is actually loaded, but I don't know why the sidebar just wont show up:
Here's a screenshot when I use $state.go or $window.location.href:
And here's how it looks like when I access it directly: