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.
Related
I'm trying to modulise my app using angular-ui-router to define a website with 2 states: main and checkout. The main state should haves multiple "section" tags which im trying to define as ui-view items. I can't tell what's wrong with my routes setup but I get a feeling that the main.html is not being loaded. Any advise on whats wrong with my definition... I could avoid using views for the secions and just use ng-include...
routes.js
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/main');
$stateProvider
.state('main', {
url: '/main',
controller: 'MainCtrl',
templateUrl: 'templates/main.html',
views:{
'home': {
templateUrl: 'templates/main.home.html'
},
'about': {
templateUrl: 'templates/main.about.html'
},
'services': {
templateUrl: 'templates/main.services.html'
},
'shop': {
templateUrl: 'templates/main.shop.html',
controller: 'ShopCtrl'
}
}
})
.state('checkout', {
url: '/checkout',
templateUrl: 'templates/checkout.html',
controller: 'CheckoutCtrl'
});
index.html
<div ui-view id="app-ui-view"></div>
templates/main.html
<section ui-view="home" id="home"></section>
<section ui-view="about" id="about"></section>
<section ui-view="services" id="services"></section>
<section ui-view="shop" id="shop"></section>
Basically the page loads but main or checkout states don't load. How am i nesting things wrong?
By not specifying a parent you map both states to the default ui-view in the index.html. So when accessing main state there won't be any templates linked to the default ui-view, the only one present in the existing html.
so the main state should have this definition:
.state('main', {
url: '/main',
views:{
'': {
controller: 'MainCtrl',
templateUrl: 'templates/main.html',
},
'home#main': {
templateUrl: 'templates/main.home.html'
},
'about#main': {
templateUrl: 'templates/main.about.html'
},
'services#main': {
templateUrl: 'templates/main.services.html'
},
'shop#main': {
templateUrl: 'templates/main.shop.html',
controller: 'ShopCtrl'
}
}
})
I am making a very basic angular app using ui-router, and I have 3 "modules" right now, which are home, login, and register. Here is how I have defined them:
'use strict';
var app = angular.module('exampleApp', [
'ui.router',
'ngAnimate',
'ui.bootstrap'
]);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: './main/home/home.html',
controller: './main/home/home-controller.js'
})
.state('login', {
url: '/login',
templateUrl: './main/login/login.html',
controller: './main/login/login-controller.js'
})
.state('register', {
url: '/register',
templateUrl: './main/register/register.html',
controller: './main/register/register-controller.js'
})
})
However, I think I am doing the controller: portion wrong. I want to define each controller for each "module", and I'm not sure how to go about doing that.
Here's my file structure -
First define your controller.
angular.module('exampleApp').controller('loginCtrl', function () {
// ctrl task goes here.
});
Mapping controller to a route.
$stateProvider.state('login', {
url: '/login',
templateUrl: 'path/to/login.html',
controller: 'loginCtrl'
})
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 creating a web app to help students in science, history and math. When you first land on the site I have a home/landing page. When you click get started I route to /exam/instructions. Each of my steps instructions, math and science our templates that I load into the ui-view="exam-detail". Currently the whole ui-view loads when I navigate to and from instructions through sciences. Ideally I simply want an area for pagination and an area for the subject matter and only want the ui-view="exam-detail" to update with the correct template.
I have not used UI-Router at all and any assistance would be greatly appreciated.
index.html
<div ui-view></div>
state-exam>exam.html
<div class="state-exam">
<nav ui-view="exam-pagination"></nav>
<section ui-view="exam-detail"></section>
</div>
route.js
(function() {
'use strict';
angular
.module('studentPortal')
.config(routeConfig);
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/main/main.html',
controller: 'MainController',
controllerAs: 'main'
})
.state('exam', {
url: '/exam/:step',
abstract: true,
templateUrl: 'app/state-exam/exam.html',
controller: 'ExamController',
controllerAs: 'examController',
})
.state('exam.instructions', {
url: '/instructions',
views: {
'exam-pagination':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
'exam-detail' : {
templateUrl: 'app/state-exam/exam-instructions.html'
}
}
})
.state('exam.math', {
url: '/math',
views: {
'exam-pagination':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
'exam-detail' : {
templateUrl: 'app/state-exam/exam-math.html'
}
}
});
$urlRouterProvider.otherwise('/');
}
})();
There is a working plunker
There is a similar Q & A in fact, with working plunker:
Angular UI Router - Nested States with multiple layouts
Solution here, is to move the static view from child to parent. It won't be reloaded for each child (view is reloaded only if parent state is changed). We will use absolute naming (see included links for more details)
So this is the code adjustment
.state('exam', {
url: '/exam/:step',
abstract: true,
// the root view and the static pagination view
// will be defined here, so we need views : {}
views: {
'':{
templateUrl: 'app/state-exam/exam.html',
controller: 'ExamController',
controllerAs: 'examController',
},
// absolute naming targets the view defined above
'exam-pagination#exam':{
templateUrl: 'app/state-exam/exam-pagination.html'
},
}
})
.state('exam.instructions', {
url: '/instructions',
views: {
// 'exam-pagination':{}, // defined in parent
'exam-detail' : {
templateUrl: 'app/state-exam/exam-instructions.html'
}
}
})
.state('exam.math', {
url: '/math',
views: {
// 'exam-pagination':{}, // defined in parent
'exam-detail' : {
templateUrl: 'app/state-exam/exam-math.html'
}
}
});
Also check this to get more details about absolute view naming
Angular UI router nested views
Angular-UI Router: Nested Views Not Working
The working example is here