I generated a project using JHipster And i want to make a few modifications to it. I want the first page to be the login page, a simple one without a header, menu or footer. I saw that in the generated code the components are added from index.
<page-ribbon></page-ribbon>
<div ui-view="navbar" ng-cloak></div>
<div class="container">
<div class="well" ui-view="content">
<!-- Angular views -->
</div>
<div class="footer" ng-cloak>
<p data-translate="footer">This is your footer</p>
</div>
</div>
I don't know what is the best way to modify this to show the login page at first is user isn't logged in. If the user is logged in I want to show the home page of the application
Thanks.
the quickest fix available to solve your problem, is just to open "src/main/webapp/app/home/home.state.js" and add the ROLE_USER authority to data.authorities, like
$stateProvider.state('home', {
parent: 'app',
url: '/',
data: {
authorities: ['ROLE_USER']
},
views: {
'content#': {
templateUrl: 'app/home/home.html',
controller: 'HomeController',
controllerAs: 'vm'
}
},
...
This will automatically route yourself to "accessdenied", but automatically opens the login dialog
a better solution would be to add a login ui to the homeview, if not authenticated, or just to upgrade the login components to a own route.
Related
I have a view that shows a list of users, and i want to open a User Details page, when the user clicks on the link.
It loads the "Users.html" page, when I click on the href, the URL on browser changes, but it doesn't load the template for User Detail, also the console doesn't have any errors.
Here is my ng-repeat code:
<div class="lista-dicas" ng-repeat="user in users | orderBy:'-ID'">
<div class="col-md-12 box-noticia">
<h3 class="titulo"><a ui-sref="app.users.id({id: user.ID})">{{ user.ID }}</a></h3>
<p class="subtitulo">{{ user.Name }}</p>
<p class="tags">{{ user.Tags }}</p>
<hr>
</div>
</div>
My router configs
angular.module('myapp_dicas').config(routeConfig);
function routeConfig($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app.users', {
url: '/users',
templateUrl: '/www/app/users/users.html',
controller: 'UsersController'
})
.state('app.users.id', {
url: '/:id',
templateUrl: 'www/app/users/user-detail.html',
controller: 'UserDetailController'
});
Try to change
url: '/:id',
To
url: '/users/details/:id',
Ok, cause it didn't work, do you have app state? If not, try to change state names to, for example, users and details (just like this, no dots). Cause now, it looks like id state is child of users and it may cause a problem. And URL for details: url: '/users/details/:id', cause it looks natural.
I have been following the AngularJS tutorials on CodeSchool.
So I have views/index.html which contains all of my boilerplate code that is identical for each page. Then my templates for each page are in views/templates/ which I want included in the index.html page. So when the home page loads, it loads the views/index.html and includes the views/templates/index.html.
views/
index.html
templates/
index.html
contact.html
about.html
Currently I have
<div id="menu">
<a id="menu_home" href="/#/index" ng-click="menu.set(0)" ng-class="{current:menu.isSet(0)}">Home</a>
<a id="menu_hire" href="/#/hire" ng-click="menu.set(1)" ng-class="{current:menu.isSet(1)}">For Hire</a>
<a id="menu_info" href="/#/info" ng-click="menu.set(2)" ng-class="{current:menu.isSet(2)}">Info</a>
</div>
<div id="main">
<ng-view></ng-view>
</div>
which works great. So only the required html is requested and inserted into the page.
But my problem is that the URL doesn't change in the browser. So if a user went directly to mysite.com/contact it wouldn't work. How can I load the page correctly if the mysite.com/contact or mysite.com/about pages are accessed directly?
I have also got it working using the ngRoute module, but the same issue remains when a user goes directly to a page.
Thanks.
You should use ngRoute and $routeProvider similar to the following.
var navigationRoutes = angular.module('navigationRoutes', ['ngRoute']);
/**
* Load routes for navigation using ngRoute
*/
navigationRoutes.config(function ($routeProvider) {
$routeProvider
.when('/index', {
templateUrl: 'app/components/index/index.view.html',
controller: 'IndexCtrl'
})
.when('/contact', {
templateUrl: 'app/components/contact/contact.view.html',
controller: 'ContactCtrl'
})
.otherwise({
redirectTo: '/dashboard'
});
});
This way you can also specify a different controller based on the URL.
UPDATE
In your index page if you add -
<div class="view">
<div ng-view></div>
</div>
To your main index.html page the the contents of the $routeProvider selected file will be shown within this div. You just need to make sure that you add the tag for the controller.js files in the index.html page.
You will need to make these settings in the web server to redirect all urls to your index page where you load your angular app which in turn will handles the routes
I'm REALLY frustrated right now. I try to change the state in my ionic app for more than 5 hours now.
Here is what I have.
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.issues', {
url: '/issues',
views: {
'tab-issues': {
templateUrl: 'templates/tab-issues.html',
controller: 'IssuesController'
}
}
})
.state('tab.issue-detail', {
url: '/issues/:vertragsNr',
views: {
'tab-issues': {
templateUrl: 'templates/issue-details.html',
controller: 'IssueDetailsController'
}
}
})
.state('tab.issue-steps', {
url: '/issues/:vertragsNr/steps',
views: {
'tab-issues': {
templateUrl: 'templates/issue-steps.html',
controller: 'IssueStepsController'
}
}
})
when I open the url http://localhost:8100/#/tab/issues/1/steps manually in the browser everything is fine the controller get loaded and everything works as expected.
But when I do
$scope.goto = function(){
$state.go('tab.issue-steps','{vertragsNr:1}')
}
in the IssueDetailsController I see a transition and the IssueStepsController gets loaded but the view doesnt change.
I also tried to do a
ui-sref="tab.issue-steps({ vertragsNr: r.vertragsNr})"
but when I click the button nothing is happening. I see that in the source of the page an href="#/tab/issues/1/steps" gets created on the element but it doesnt change the view.
I also tried
.state('tab.issue-steps', {
url: '/steps',
views: {
'tab-issues': {
templateUrl: 'templates/issue-steps.html',
controller: 'IssueStepsController'
}
}
})
but it still isnt redirecting.
I also tried:
$location.url("tab/issues/1/steps");
which also isnt working
I dont understand why it has to be so complicated to JUST CHANGE A SIMPLE VIEW!
I dont want any subviews in the details view. I just want to open the steps view.
Ok, to clarify, I need to load the steps view into the tabs-issues view which is the content of my tab-control and this is not working from a subview.
I made a plunker with the issue: http://plnkr.co/edit/YK7Fp3vUhEPGZeYtOF9Y?p=info
strange thing is on the second click everything work on the plunker. But the code is exactly the same code as in my application.
I've noticed in that plunker you're still referencing an old version of the framework:
<script src="http://code.ionicframework.com/1.0.0-beta.5/js/ionic.bundle.min.js"></script>
I would change that to the latest stable release:
<link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.min.js"></script>
Then you have to fix the view issue-details.html. You have something like this in that html view:
<div class="list card" ui-sref="tab.issue-detail({ vertragsNr: r.vertragsNr})">
....
</div>
you don't really need
ui-sref="tab.issue-detail({ vertragsNr: r.vertragsNr})"
cause it's basically pushing the page back when redirecting.
Just remove it so that your view looks like this:
<ion-view view-title="Ausgaben">
<ion-content class="padding">
<div class="list card">
<div class="item item-divider">{{r.title}}</div>
<div class="item item-body">
<div>
<div><b>Vertragsbeginn:</b> {{r.rentalBegin}}</div>
<div><b>Objekt:</b> {{r.objekt}}</div>
<div><b>Abholer:</b> {{r.abholer}}</div>
<div class="list">
<button class="item item-icon-left" ng-click="goto()" ng-repeat="m in r.machines" ng-disabled="m.abgabeDatum!==null">
<i class="icon balanced" ng-class="{'ion-checkmark': m.abgabeDatum!==null}"></i>
{{m.title}}
</button>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>
and everything should work as expected.
PS: I've removed hide-nav-bar="true" directive in the view issue-steps.html just to make sure that the navigation works properly. It works anyway even if you add it back.
PPS: As you might have noticed there are a few differences in the way the app looks with the new version 1.1.0 of the framework.
A few things have changed since the beta.
.state("newUtilities", {
url: "/newUtilities",
templateUrl: "app/admin/modules/newUtility/view/newUtilities.html",
controller: "NewUtilitiesController",
resolve: load(['myProject.newUtilities'])
})
From a modal dialog I present a general terms link that should redirect the user to a new page.
I would like to re-use my layout skeleton (background, logo ans basic styles) for the terms page, without the content of the master page (eg. search function, navigation etc). To achieve this I try to inject into a new window the terms template inside the ui-view="main" used for the normal site content (where is loaded the content of the modal dialog, as instance), but I get the error Could not resolve 'terms' from state 'login' (login is the current state where the modal dialog is).
Below the termsPage module with the ui-router state I would like to load:
angular.module('termsPage').config(function ($stateProvider) {
$stateProvider
.state('terms', {
url: '/terms',
views: {
'main': {
controller: 'TermsCtrl as Terms',
templateUrl: '/modules/staticPages/views/termsPage.html'
}
}
});
});
My index.html file:
<!-- Other tags excluded for sake of semplicity -->
<body ng-app="myApp">
<!-- Here I inject all the content -->
<div id="wrapper" ui-view="main">
</div>
Below the app module and view, where the content of the application is correctly loaded. Also the modal dialog from which I would like to redirect to the external page is loaded here.
angular.module('app').config(function($stateProvider){
$stateProvider
.state('app', {
url: '/app',
views:{
'main' : {
controller : 'AppCtrl',
templateUrl: 'modules/app/views/app.html'
}
}
});
});
Below app.html:
<div id="container">
<div class="browser">
<div class="content" ui-view="content" style="position:relative;">
</div>
My goal would be to create a sibling of app.html, injecting in main placeholder the content of my general terms page. Inside the modal dialog controller I use $state.go for the redirection:
$state.go('terms');
In my case the problem was that I did not registered the new module ('termsPage') as dependency in my main module:
angular.module('myApp', ['login','forms','termsPage'], function($urlRouterProvider){ ...}
Now that the module is registered, I can navigate correctly to state 'terms'.
Hopefully the case above might help someone else, getting hints for his/her case.
I'm working on a website that allows you to search for different products, for example laptops. This is my index div:
<div class="content" id="main">
<div id="search-wrap">
<div id="logo"><h1>seach</h1></div>
<form id="search">
<input type="text" placeholder="Search " autofocus ng-model="query"/>
</form>
<div style="border: solid 1px blue" ng-show="query">
<ul ng-repeat="x in [] | range:10">
{{ query }}
</ul>
</div>
</div>
I have not yet implemented angular js on this but I'm thinking about how to do it. I'm not sure how to approach this, since its a complex site. Once a user searches for something, they will get results from a product. Will i have to create a different ng-view?
I'm just going by something i read online:
A page gets one ng-view. Assuming you have a single page application, this means you get one view. Use it wisely. Give some thought to what should be in the view. Is this your main content window or is this more of a navigation? Is the actual content (HTML) of this section highly dynamic? These are important decisions to make early in the development of your application if you have more than one distinct content area on your page.
Sorry if my question doesn't make sense, just not sure what to ask. Any tips will help.
thanks
You better try using ng-view and you would get more idea how it works.
There can be one ng-view in a page and it is tightly integrated with the url. When you change urls in browser, effective you are loading a different view into the ng-view area. These are configured using the $routeProvider.
ng-view is like the central content theme\area. Other views including sub-views for the main view and left nav, top nav footer is loaded using ng-include directive which has capability to compile and load any html chunk from server or locally.
For complex routing needs please have a look at ui-router which supports nested views.
For complex view you can try something like this
$stateProvider
.state('login', {
url: '/login',
controller: 'LoginController',
templateUrl: 'login.tpl.html',
access: 0
})
.state('multiple view', {
url: '/main',
access: 1,
views: {
'#': {
templateUrl: 'view1.tpl.html',
controller: 'view1Controller'
},
'page#dashboard': {
templateUrl: 'page.tpl.html',
controller: 'pageController'
}
}
})
More Info