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.
Related
I am using UI-router to control the states of a single page application. I have a big chain of states that I narrowed to these:
$stateProvider
.state('app', {
url: "/",
abstract: true
})
.state('app.main', {
url: "/main",
abstract: true
})
.state('app.main.users', {
url: "/users",
abstract: true,
controller: 'UsersController',
controllerAs: 'uc'
})
.state('app.main.users.list', {
url: "/list",
templateUrl: "list.html",
});
Imagine that this app.main.users is an abstract state for a CRUD which will use the same controller for all the operations.
The problem is that the "list.html" file from the child controller cannot see the values from the controller.
I have put up a plunkr sample to the issue: Plunkr
Here is the full code:
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('app', {
url: "/",
abstract: true
})
.state('app.main', {
url: "/main",
abstract: true
})
.state('app.main.users', {
url: "/users",
abstract: true,
controller: 'UsersController',
controllerAs: 'uc'
})
.state('app.main.users.list', {
url: "/list",
templateUrl: "list.html",
});
})
myapp.controller('UsersController', usersController);
function usersController() {
console.log("UsersController instantiated");
var vm = this;
vm.user = 'username';
}
If you have any idea, please let me know. I can't find a solution to this.
Thanks!
I've solved the problem.
I was missing some things in the concept of the states. First of all I needed an on my app.main state so it could render the app.main.users state. Also my controllers declaration was wrong.
This Plunkr is working with the desired scenario.
Thanks for the help.
Im writing a mobile app using Ionic framework, it has two languages: English and Spanish, I want to be able to switch the nav-view (as a template), to show in English or Spanish depending on the user selection language.
I'm trying to do this on my StateProvider definition, here is part of my code:
(function(){
'use strict';
angular
.module('app.core')
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'app/auth/login/login.html',
controller: 'LoginCtrl',
})
.state('loginEs', {
url: '/loginEs',
templateUrl: 'app/auth/login/loginEs.html',
controller: 'LoginCtrl',
})
.state('tabs', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tabsEs', {
url: '/tabEs',
abstract: true,
templateUrl: 'templates/tabsEs.html'
})
.state('tabs.dashboard', {
url: '/dashboard',
views: {
'tab-dash': {
templateUrl: 'app/dashboard.html',
//controller: 'SignupCtrl',
}
}
})
.state('tabsEs.dashboardEs', {
url: '/dashboard',
views: {
'tabEs-dash': {
templateUrl: 'app/dashboardEs.html',
//controller: 'SignupCtrl',
}
}
})
.state('tabs.adults', {
url: '/adults',
views: {
'tab-dash': {
templateUrl: 'templates/tab-adults.html',
//controller: 'DashCtrl'
}
}
})
.state('tabs.adultsEs', {
url: '/adultsEs',
views: {
'tab-dash': {
templateUrl: 'templates/tab-adultsEs.html',
controller: 'customersCtrl'
}
}
})
.state('passwordResetForm', {
url: '/passwordResetForm',
templateUrl: 'app/auth/login/passwordResetForm.html',
controller: 'PasswordResetCtrl',
});
$urlRouterProvider.otherwise('login');
}]);
})();
When the state is tabsEs.dashboardEs it display correctly my navbar in spanish from templates/tabsEs.html. But I have been struggling some days to do the same when state change to tabs.adultsEs, but is not working, allways shown templates/tabs.html (english).
Does anybody see the error, or give me a tip to do this?
Regards,
Victor
Don´t duplicate your templates, use a plugin like angular-translate to add internationalization to your app. Explore the docs, it's really simple.
I need to handle dynamic params in angular ui-router and load templates according also if someone use link to come on my site, he should be able to reach at desired page. I need to use it for multiple parameters and get the value form server to related values.
.state('home', {
url: '/:shop',
views: {
"mainbox": {
templateUrl: "app/shop/main.html",
controller: "shopMainCtrl",
controllerAs: "shop"
}
// xyz.com/wallmart should be landed here
}
})
.state('course', {
url: '/:shop/:area',
views: {
"mainbox": {
templateUrl: "app/area/nav.html",
controller: "areaNavCtrl",
controllerAs: "areaNav"
}
//xyz.com/wallmart/california should be landed here
}
})
.state('area.food', {
url: '/food',
views: {
"mainboxcontent": {
templateUrl: "app/area/food.html",
controller: "foodMainCtrl",
controllerAs: "food"
}//xyz.com/wallmart/california/food should be landed here
}
}).state('area.cloths', {
url: '/cloths',
views: {
"mainboxcontent": {
templateUrl: "app/area/cloths.html",
controller: "clothsCtrl",
controllerAs: "cloths"
}
//xyz.com/wallmart/california/cloths should be landed here
}
})
.state('buy', {
url: '/:shop/:area/:buy',
views: {
"mainbox": {
templateUrl: "app/buy/buynow.html",
controller: "buyMainCtrl",
controllerAs: "buyNow"
}
//xyz.com/wallmart/california/iphone should be landed here
}
})
https://github.com/angular-ui/ui-router/wiki
templateProvider is something you may try.
stackoverflow: Angular UI Router: decide child state template on the basis of parent resolved object
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 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.