ui-sref: how to generate link without origin in chrome app - javascript

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

How to convert this line from using ng-router to ui-router

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;
}
})

How I can write better routers of angular

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.

Use same ui-view template for multiple states

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.

Nested views on UI Router in MEAN Application

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.

Angular.js redirecting from one abstract state child to another

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:

Categories