(angularJS 1.2.5 & ui-router 0.2.7)
Please help its 4 in the morning and its been 2-3hrs since i'm stuck with this, flipped the code multiple times but cudn't make it run.
In my index.html, I have the following code:
<div class="well sidebar-nav sidebar-slide">
<ul class="nav nav-list" style="font-size:17px">
<li class="nav-header">Demand Type</li>
<li><a ui-sref="add14" data-toggle="tab">ADD-14</a></li>
<li><a ui-sref="cash_purchase" data-toggle="tab">Cash Purchase</a></li>
<li><a ui-sref="local_purchase" data-toggle="tab">Local Purchase</a></li>
</ul>
</div>
<div class="hero-unit" ui-view></div>
In my app.js, I have the following code:
var ODS = angular.module('ODS', ['ui.router','ngAnimate']);
//Define Routing for app
ODS.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider
.when('/add14', '/add14/create_order')
.when('/cp', '/cp/create_order')
.when('/lp', '/lp/create_order')
.otherwise("/intro");
$stateProvider
.state('intro', {
url: "/intro",
templateUrl: "templates/core/intro.html"
})
.state("add14", {
url: '/add14',
templateUrl: 'templates/core/add14.html'
})
.state("add14.create_order", {
url: "/create_order",
templateUrl: "templates/ADD14/add14.create_order.html"
})
.state("add14.own_demand", {
url: "/own_demand",
templateUrl: "templates/ADD14/add14.own_demand.html"
})
}]);
In my add14.html, I have following code:
<a ui-sref=".create_order">Create</a></button>
<a ui-sref=".own_demand">Own Demand</a>
<div ui-view></div>
In my add14.create_order.html & add14.own_demand.jsp i have sample code to print.
Thank You for your patience!
Did you ever get this figured out? I'm running into a similar problem - I find that using <a href='#/url'> seems to work, but I can't access my states via ui-sref either. I've also noticed that the rendered html doesn't auto-generate an href corresponding to the state as the documentation said it would. Fairly confused why it's not working myself.
Heads up: try to make sure you add the "ng-app" directive to your body tag (in your main template), otherwise, it seems angular-ui-router stuff, such as the ui-sref directive, will not be called.
Example:
<html ng-app="myApp">...</html><!-- Nope. Don't do this -->
<html>...<body ng-app="myApp"></body></html><!-- Do this instead -->
You are using both $stateProvider and $urlRouterProvider. try just using $stateProvider instead of both as that could be where your error is. And you don't have controllers for each of your states. Hope this helps you.
Related
I come from Angular9 and am really used to it, and I have been asked to work a bit on an AngularJS project, which I have never experienced. So I am really struggling with the whole app structure.
My issue is simple: I have a sub-navbar.html template directly injected in my root.html template using ng-include, and I would like to condition the display of one section of this sub-navbar with 'ng-if' (not just hide the section, I don't want it there at all).
I have a backend call which sends me a boolean according to whether the connected user can see the section or not.
The problem I have is that my section is actually never active even when the boolean is 'true'.
Things I tried:
Change the priority of the ng-if and 'ng-controller' directives ---> Broke the app
Add a new 'subnavbar-controller' and declare it as a .state in the app.js ---> Didn't work
Create a custom directive ---> Can't figure out hw the work apparently, didn't work
I unfortunately can't copy all my code, but here are the main pieces I'm working on:
app.js: (I wrote nothing concerning this '$rootScope.adminSection' in the '.run()' function and also tried the same approach directly calling the service without the '$onInit')
$urlRouterProvider.otherwise("/orders");
$stateProvider
.state('root', {
abstract: true,
url: '',
views: {
'': {
templateUrl: "view/root.html",
controller: ['$rootScope', 'AdministratorService', function ($rootScope, AdministratorService) {
const vm = this;
vm.$onInit = function() {
AdministratorService.getAdminSection().then(function (result) {
$rootScope.adminSection = result;
}
)
};
}]
}
}])
root.html:
<div ui-view="root_header"></div>
<div class="row" style="min-height: 600px">
<div class="col-md-2">
<br/>
<div ng-include="'view/subnavbar.html'"></div>
</div>
<div class="col-md-10">
<div ui-view></div>
</div>
</div>
<div ng-include="'view/footer.html'"></div>
subnavbar.html:
<ul class="nav nav-pills nav-stacked" role="tablist">
<li></li>
<li ui-sref-active="active"><a ui-sref="root.contracts"></a><div class='arrow' aria-hidden='true'></div>
</li>
<li ng-if="$rootScope.adminSection" ui-sref-active="active"><a ui-sref="root.administrator">
</a><div class='arrow' aria-hidden='true'></div></li>
<li ui-sref-active="active"><a ui-sref="root.users"></a><div class='arrow' aria-hidden='true'>
</div></li>
</ul>
Any help welcome, thanks in advance !
There are several ways this can work. The reason it is not working now is that $rootScope in the template is not defined. Try, in your template, to replace $rootScope.adminSection with just adminSection.
ngInclude directive creates a new scope which inherits from $rootScope. Therefore, variables in $rootScope should be directly accessible from the template.
With angular, I have my index.html setup as follows.
<html><head>...</head>
<body ng-app="someappname">
<header>
<img src="images/hdr_logo.png" alt="...">
</header>
<main>
<!-- this is where the active view will be placed -->
<ui-view></ui-view>
</main>
</body></html>
And I have my ui-router setup as follows.
$stateProvider
.state('index', {
templateUrl: 'index.html',
controller: 'IndexController',
abstract: true
})
.state('index.login', {
url: '/login',
templateUrl: 'partials/login.html',
controller: 'LoginController',
})
Currently, my login.html has nothing but text... simply looks like this.
This is my login page
However, when I run the application I see that my header logo is being displayed twice. Upon further investigation, I can see that my <ui-view></ui-view> actually re-includes the entire index.html again (as well as the text). So there is index.html which has another copy of index.html within the ui-view. My display has the logo displayed twice followed by the text, "This is my login page".
Why is the index.html being included within my ui-view, instead of just the partial?
After much toil and trouble, it seems that problem was to do with the keyword abstract not being functional in the versions that I was using. Since, whether I added or removed abstract the result was the same. However, after I upgraded my angular and ui-router version... everything works!!!
So I am trying to display multiple views in angular to help fix the footer problem I am having with this site I am building. I want to make sure that what I have been reading about and trying to mimic is making sense. This is what I have so far.
index.html
<!--Do not code below this line-->
<main ng-view="header"></main>
<main ng-view="body"></main>
<main ng-view="footer"></main>
routes.js file
angular.module('appRoutes', ['ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
views: {
'header': {
temmplateUrl: 'app/views/header.html'
},
'body': {
templateUrl: 'app/views/body.html'
},
'footer': {
templateUrl: 'app/views/footer.html'
}
}
})
I have it working where I have just one view and have my header and footer inside the index.html file but I saw that you can have multiple views and really just switch out the "body" view with other pages.
Any advice would be much appreciated. Thank you
To display multiple views you could use only ng-include.
See https://docs.angularjs.org/api/ng/directive/ngInclude for more ngInclude details.
Here is a example: (notice the wrap in single quotes)
<div id="header">
<div ng-include="'header.html'"></div>
</div>
<div id="content" ng-view></div>
<div id="footer">
<div ng-include="'footer.html'"></div>
</div>
Use ngRoute with ng-view to define a region (e.g div#content) where will be changed the dynamic content (as partial html).
See https://docs.angularjs.org/api/ngRoute/directive/ngView for more ngRoute details.
Good luck!
You can have just one ng-view.
You can change its content in several ways: ng-include, ng-switch or mapping different controllers and templates through the routeProvider.
Alternatively, use ui-router
this is quite simple i think, i have a navbar with my tabs that need to be displayed on all my html pages, i have a .html page for each tab. How can i make it so that i dont have to copy the navbar code into every html page (trying to avoid copying the code since this is messy and a lot of work if i gotta change something).
Im trying to avoid PHP in my project, id prefer Java or AngularJS
Heres the relevant part of the index.html
<ul class="nav nav-pills nav-justified">
<li class="active">Home</li>
<li>Maschinen/Tätigkeiten</li>
<li>Personen</li>
</ul>
Angularjs provide you two different solutions for achieving this.
1) Make a directive for you nav-bar
https://docs.angularjs.org/guide/directive
You can place your nav-bar's code into the directive html file, en call your nav-bar everywhere you need id with the directive's balise. Something like this :
<my-nav-bar></my-nav-bar>
2) Using angular ui-rooter
I think that is the better choice here. You will have a main html file with a <ui-view></ui-view>. When you change of page, only the content of the ui-view is changed. So you have to place your nav-bar outside the ui-view.
You have an example of what you can do here :
https://angular-ui.github.io/ui-router/sample/#/about
PS : don't forget to had the angular-ui-rooter js file to your project if you want to try this solution.
Hope this help.
A+
You can use php or another backend language to make a header file and include that in your other pages.
Alternatively, you can use something like Jade and use their includes.
See here: http://jade-lang.com/reference/includes/
I also think using angular-ui-router for this will be the best.
You can create one <div ui-view></div> for your app and then create an abstract state that will load your base template with your header in it. Something like this could be your base template:
<ul><li>...</li>...</ul>
<div ui-view="content"></div>
Then in every child state of base you can add your content to the named view 'content'.
With ui-sref-active="active" it's easy to highlight the currently active link.
Please have a look at the demo below or this fiddle.
angular.module('demoApp', ['ui.router'])
.config(routeConfig);
function routeConfig($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('base', {
url: '/',
abstract: true,
templateUrl: 'partials/base.html'
})
.state('base.home', {
url: '',
views: {
'content': {
templateUrl: 'pages/home.html',
controller: function() {
console.log('home controller');
}
}
}
})
.state('base.machines', {
url: '/machines',
views: {
'content': {
templateUrl: 'pages/machines.html',
controller: function() {
console.log('machines controller');
}
}
}
})
.state('base.persons', {
url: '/persons',
views: {
'content': {
templateUrl: 'pages/persons.html',
controller: function() {
console.log('persons controller');
}
}
}
})
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<div ng-app="demoApp">
<div ui-view></div>
<script type="text/ng-template" id="partials/base.html">
<ul class="nav nav-pills nav-justified">
<li ui-sref-active="active"><a ui-sref="base.home">Home</a></li>
<li ui-sref-active="active"><a ui-sref="base.machines">Maschinen/Tätigkeiten</a></li>
<li ui-sref-active="active"><a ui-sref="base.persons">Personen</a></li>
</ul>
<div ui-view="content"></div>
<!-- here you could add a footer view -->
</script>
<script type="text/ng-template" id="pages/home.html">
home
</script>
<script type="text/ng-template" id="pages/machines.html">
machines
</script>
<script type="text/ng-template" id="pages/persons.html">
persons
</script>
</div>
After trying all I can imagine, and reading several posts here, I think I need your help!
I have a webapp based on node and express on the server and Angular on the client. I am using angular routing.
BASIC INFO
I have the routing set up like the following:
mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'initial.ejs',
controller: 'controllerInitialView'
})
.when('/home/post', {
templateUrl: 'post.ejs',
controller: 'controllerAddPost'
})
.... other /home/something routes ..
.otherwise({
redirectTo: '/home'
});
}
]);
The html template is organized as follows:
<div class="container-fluid">
<div class="row">
<!-- Left Columns: With links to views -->
<div class="col-xs-2 home-bd-dx">
<ul>
<li>
Post
</li>
...
<li>
Logout
</li>
</ul>
</div>
<!-- Central Columns: Here the views are inserted -->
<div class="col-xs-10">
<div ng-view></div>
</div>
</div>
</div>
The issue is with the Logout link. I have a server serverapp.get('/logout') link which uses passport.js to logout the user. However, I cannot manage to reach that link. Whatever I try transforms my /logout, into /home/logout, and it is handled by Angular rather than by the server.
QUESTION
So here is the question: how can I create links to endpoint routes in Angular without Angular router intercepting them?
ADDITIONAL INFO IF NEEDED
The express server is has a route serverapp.get('/home/*') which delegates these routes to Angular.js by returning the template I sketched above.
I tried with and without a <base href="/home"> tag in the <head> with no luck
I tried creating a route '/home/logout', and then having the angular $window.location.href="/logout"; in the controller of /home/logout. No luck also in this case.
If I understand you correctly, what you're trying to do is disabling deep linking for certain URLs. You can do that by adding target="_self" to the <a> tag.
Try this:
Logout
Now the URL the link is pointing to will be handled by the server instead of Angular.