I have an angular app with the content of the body containing a directive called layout as shown below.
<body>
<div layout></div>
</body
The layout directive contains other directives and is shown below
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- begin #page-container -->
<div id="page-container" class="fade in page-sidebar-fixed page-header-fixed">
<div header-directive ng-show="1==0"></div>
<div leftnav-directive ng-show="1==0"></div>
<div data-ng-view="">
</div>
<div footer-directive ng-show="1==0"></div>
</div>
I am writing an interceptor for authentication to secure the app. The following line makes the page not load
angular
.module('myapp')
.config(function ($httpProvider) {
$httpProvider.interceptors.push('authInterceptorService'); // if i comment this line out it works
});
If I move the content of the layout directive into the index.html the page loads fine.
<body>
<div id="page-loader" class="fade in"><span class="spinner"></span></div>
<!-- begin #page-container -->
<div id="page-container" class="fade in page-sidebar-fixed page-header-fixed">
<div header-directive ng-show="1==0"></div>
<div leftnav-directive ng-show="1==0"></div>
<div data-ng-view="">
</div>
<div footer-directive ng-show="1==0"></div>
</div>
</body
The reason I am using the directives so I can hide/show the top nav and side nav menus and instead show the login screen (template). SO I can check in the directive code to see if the user is logged in and if they are I would show the other directives.
This is the interceptor that I am using
Any idea if what is going on and how can I resolve it?
Thanks.
EDIT:
I created a plunker but I cannot seem to make it work. It does not recognize the module helo created in app.js. Please check it here
Related
Right now I am planning on using this on every page, but it is not loading the nav and I'm not sure why.
<!-- This is in my main HTML that I want nav in-->
<div id="nav-placeholder"></div>
<script>
$(function(){
$("#nav-placeholder").load("NavBar.html");
});
</script>
<!-- this is the NavBar.html file-->
<header>
<div class="header-row">
<div class="header-column d-lg-none">
<div class="header-row">
<h1 class="font-weight-semibold text-7 mb-0">
<a href="index.html" class="
text-decoration-none text-color-light
custom-primary-font
">Dynamic</a>
</h1>
</div>
</div>
</div>
</header>
it's not a terrible practice, depending on what components you are going to use inside this method. E.g., Navbars and footers, no problem.
Have a look on this question: How to separate html text file into multiple files?
I have a template wit three sections one is the top navigation followed by left navigation and the content section which is the right div or element
<nav>top navs goes here </nav>
<div class="container>
<div class="row">
<div class="col-md-3" id="left-nav">
left navs goes here
</div>
<div class="col-md-9" id="content">
<!--Content goes here-->
<router-outlet></router-outlet>
</div>
</div>
The problem i am having right now is the <router-outlet></router-outlet> which is supposed to replace the HTM inside the div with an id of content doesn't do so. instead it grabs all the HTML of the same template and place it inside <div class="col-md-9" id="content">Content goes here</div>. Why duplicate the same template is this the normal behavior or there is something wrong with my implementation?
If you are changing just one part of your page one router-outlet is enough.
On the place that router-outlet is, component is injected. What component is injected is defined by your routing configuration.
Also change:
<div class="col-md-9"> id="content">
to
<div class="col-md-9" id="content">
On my index page, when I add a Hangouts button like below it is drawn & works as expected.
<body ng-app="sampleApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-12 m-body">
<div class="m-header-text">
Hello Friend
</div>
<g:hangout render="createhangout"></g:hangout>
<div>
<!-- Insert html view templates here -->
<ui-view></ui-view>
</div>
</div>
</div>
<!-- So on -->
</body>
But when I place it inside a template, which is displayed based on url route, then only the Hangouts button is not drawn & cannot be seen in UI.
<script type="text/ng-template" id="/home.html">
<div class="col-md-12 m-Grid m-rowBg m-border">
<div ng-repeat="peers in lop">
Hey {{peer.username}}
Call Peer <g:hangout render="createhangout"></g:hangout>
</div>
</div>
</script>
Could you please tell me why is it not being drawn
&
what should I do to get the button displayed? It would be of great help !
Using AngularJS.
I had the same issue, and found a solution using Angular directives.
The problem rendering button with Google tag markup is that the rendering executes when the platform.js script loads, which is before Angular loads the template.
So a solution is to call Google API render function after Angular loaded the template. I did it creating an Angular custom directive with a link function :
hangoutButton.directive('hangoutButton', function() {
return {
restrict: 'E',
template: '<div id="hangout-button"></div>',
link: function (scope, element, attrs) {
gapi.hangout.render('hangout-button', {'render': 'createhangout'});
}
};
});
Then you can display it in a template with the custom element :
<div class="col-md-12 m-Grid m-rowBg m-border">
<div ng-repeat="peers in lop">
Hey {{peer.username}}
Call Peer <hangout-button></hangout-button>
</div>
</div>
I solved this by using the angular controller to render with javascript instead of in html markup. Try something like this:
<body ng-app="sampleApp" ng-controller="MainCtrl">
<div class="row">
<div class="col-md-12 m-body">
<div class="m-header-text">
Hello Friend
</div>
<div id="placeholder-div"></div>
<div>
<!-- Insert html view templates here -->
<ui-view></ui-view>
</div>
</div>
</div>
<!-- So on -->
In your controller:
myApp.controller('MainCtrl', ['$scope', function($scope) {
gapi.hangout.render('placeholder-div', { 'render': 'createhangout' });
}]);
Try removing the / from id="/home.html"
All samples of ng-view directive shows that it must being used like follows
<div class="header">
</div>
<ng-view></ng-view>
I think a little while taking a shower and the doubt below comes to play with the need of lazily load all content with help of resolves in ng-view plus ng-switch and ng-include. Something new, without an AMD solution to templating like requirejs!text plugin and angularjs providers. The idea is change the subview thru the links inside of ngView. The view template will being something like that:
<div>
Item Profile
status
View1
</div>
<div ng-switch="view">
<div ng-switch-when="item-profile">
<div ng-include="'item-profile.html'">
</div>
<div ng-switch-when="status">
<div ng-include="'status.html'">
</div>
</div>
<div ng-switch="subView">
<div ng-switch-when="1">
<div ng-include="'sub-view1.html'">
</div>
<div ng-switch-when="2">
<div ng-include="'sub-view2.html'">
</div>
<div ng-switch-when="3">
<div ng-include="'sub-view3.html'">
</div>
</div>
And the index.html will looks like:
<body>
<ng-view></ngview>
</body>
And the route configuration:
angular.module('app', ['ngRoute']).config([
'$routeProvider',
function (rp){
rp.when('/:view/:subView', {
template: 'view.html',
controller: [
'$scope',
'$route',
function (s, r) {
s.subView = r.params.subView;
s.view = r.params.view;
}
]
});
}
]);
But for some reason this does not work, follow the code on plunkr
Sounds like you need ui-router, specifically its nested/sub-views and named views.
I have used the pager of AngularJS with Server Side coding. Basically what happens is when user clicks on NEXT the group of 5 records is displayed.
Now as the application is used in Tablets, i need swipe effect for this.
<section class="recent" style="margin: 20px 0;">
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12 text-center" data-ng-init="recentUsers(1)">
<button type="button" class="rc-buttons" data-ng-repeat="user in recentusers">
{{user.firstname}}
</button>
<pager style="margin-top: -28px;" total-items="recenttotalItems" page="recentcurrentPage" items-per-page="recentitemsperpage" max-size="maxsize" on-select-page="recentUsers(page)" class="pagination-sm"
previous-text="<<" next-text=">>"></pager>
</div>
</div>
</div>
</section>
How to implement swipe effect in AngularJS?
For handling swipes, you can use the ngTouch module's ngSwipeLeft and ngSwipeRight.
Since it is a separate module, you need to include the script separately:
<script src=".../angular-touch.min.js"></script>
You, also, need to include the module as a dependency to you main module:
angular.module('yourApp', ['ngTouch']);
Then you can use it to like this:
<div ng-swipe-right="doSomething()" ng-swipe-left="doSomethingElse()">
...
</div>