Develop Reference

How to use ng-template in angular?

I'm writing a client-side angular app and I have a question related to the way I can use angular's ng-template.
So, I have this navbar:
<nav class="navbar navbar-inverse" >
<div class="container-fluid">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<!--<li class="active">Home</li>-->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Events <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Create Event</li>
<li></li>
</ul>
</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">
</ul>
</div>
</div>
</nav>
Ok, in the last <ul> tag I use ng-include="getTemplate()", where getTemplate is this function:
<script type="text/javascript">
$(function () {
var getTemplate = function () {
return "notauth";
}
})
</script>
Basically, this will return the same template, but I just want this to work before I add more logic to it.
"notauth" template is:
<script type="text/ng-template" id="notauth">
<li><a ui-sref="signup"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a ui-sref="login"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</script>
Note that this is inside my index.html page, because I want my navbar to be the same for all views, but change its template according to user state: if user is logged in use auth template, otherwise use notauth template.
Problem is that this doesn't work and I can't figure out what the problem is.

Declare the function using $scope as follows:
$scope.getTemplate = function () {
return "notauth" ;
console.log("notauth")
}
Then you can call like this:
<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">
This works correctly.

The reason why your function doesn't work is because you define your function in a function (that is automatically called by jQuery) and is thus only available in the scope of that function.
But even if you were to add the getTemplate() to the global (window) scope, it would still not work as Angular looks for it on the current $scope object.
So the only way you can make this work:
<ul class="nav navbar-nav navbar-right" ng-include="getTemplate()">
Is if you somehow get getTemplate() onto the current $scope or the $rootScope. This can be accomplished by for instance the following code:
angular.module('myApplication', [])
.run(['$rootScope', function($rootScope) {
$rootScope.getTemplate = function() {
return 'notauth';
};
}]);
Do note however that while something like this may work, you're much better of creating a component for this functionality which can then have an injectable controller that can actually perform smart logic.

ng-include="'notauth'" works like this, not ng-include="notauth"
So, try to do something like that.
<script type="text/javascript" >
angular.module('app', []).
controller('MainC', function($scope){
$scope.call = function(){
return 'notauth';
}
})
</script>

Is this bug for using AngularJS to fetch data to <li><a href> or not?

I use the AngularJs to fetch the data from mySql database for my navigation bar on HTML5. The problem is I cannot open the link in the sub menu.
Here is my code :
<div id="header-wrapper" class="wrapper">
<div ng-app="myApp" ng-controller="customersCtrl" id="header">
<div id="logo">
<h1>Why Choose a Breeder ?</h1>
<p>Quality Quarantee Knowledge</p>
</div>
<nav id="nav">
<ul>
<li class="current">Home</li>
<li>Holland Lops
<ul>
<li>Bucks</li>
<li>Does</li>
<li>Junior</li>
</ul>
</li>
<li>For Sale</li>
<li>Article
<ul><li ng-repeat="menu in menues">{{menu.Title}}</li></ul>
</li>
<li>Contact us</li>
</ul>
</nav>
</div>
However I cannot open the link in this code (When I click on link, nothing happens):
<ul><li ng-repeat="menu in menues">{{menu.Title}}</li></ul>
But If I remove the ul like this :
<li>For Sale</li>
<li>Article</li>
<li ng-repeat="menu in menues">{{menu.Title}}</li>
I can open the link. I don't know what's wrong. Is it because the order of the navigation bar ? Could you please suggest me, what I'm wrong ?
This is my .js code :
var app = angular.module('myApp', []);
app.controller('customersCtrl', ['$scope','$http',function($scope, $http){
$scope.menues = [];
$http.get("http://www.rhosgobelrabbit.com/getUrl.php")
.then(function (data) {$scope.menues = data.data.records;
}, function (error) {
alert('Error');
});
}]);

You need to use ng-href instead of href. You can read about this in the angularJS docs: Docs
<ul><li ng-repeat="menu in menues"><a ng-href="{{menu.Link}}" target="_self">{{menu.Title}}</a></li></ul>
As long as the ng- aren't placed infront of the href will angular just give you a 404.

How to apply active class in navigation if i used breadcrumb in angular js

I m learning to angular js and read some documents but i have face one problum .
HI i m using a application with navigation as like this
<ul class="nav navbar-nav">
<li ui-sref-active="active"><a ui-sref="dashboard.view">Dashboard</a></li>
<li ui-sref-active="active"><a ui-sref="aboutus">About</a></li>
<li ui-sref-active="active"><a ui-sref="contactus">Contact</a></li>
</ul>
Now my brodcrome is
Home > About > Carrer
My url is myxyz.com/#/aboutus/carrer
than active class is not apply About but if i click to About page than active class is add.
Can u please tell me what I code write.
Thanks .

What I did on your case was I created a function inside a controller with couple of dependencies and then use ng-class,
storeApp.controller('MyCtrl', function($scope, $location, $http) {
$scope.isActive = function(route) {
return route === $location.path();
}
And then used it in my navigation.
<ul class="nav navbar-nav" ng-controller="MyCtrl">
<li class="hvr-underline-from-left">
<a ng-class="{activeClass:isActive('/store')}" href="#/store">SHOP</a>
</li>
<li class="hvr-underline-from-left">
<a ng-class="{activeClass:isActive('/category/0/0')}" href="#/category/0/0">COLLECTIONS</a>
</li>
</ul>
In this example, make sure you have declared activeClass or what ever class name you want in your CSS

Display content on click of navigation menu in angularjs

My html page contain two sections. Left side I have navigation(code is below) and right side is to display contents for respective navigation menu.
On click of each navigation menu, particular section should be rendered on my content part.
I have done it using ng-show/ng-hide by setting flag in my js file. But since I am setting flags for each sections and show/hide , my js code file looks very odd. I know this is not the correct way to do it.
I am new to angularjs. Kindly help me to achieve this efficiently.
HTML code: (only navigation part)
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<div class="collapse" id="Login">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-log-in" href="#" ng-click="LoginScreen()">Login</a></li>
<li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
</ul>
</div>
<li>About</li>
<div class="collapse" id="Contact">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-save" href="#" ng-click="LoadUserDetailsScreen()">LoadUserDetails</a></li>
<li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
</ul>
</div>
</ul>
</div>
JS code:
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
$scope.FlagHomeScreen = true;
$scope.LoadData=false;
$scope.showtable=false;
$scope.showstatus=false;
$scope.FlagLoginScreen = false;
$scope.RegisterScreenFlag= false;
$scope.menuitems =[10,20,30];
$scope.LoginScreen = function(){
$scope.FlagLoginScreen = true;
$scope.FlagHomeScreen =false;
$scope.LoadData=false;
$scope.RegisterScreenFlag=false;
};
$scope.LoadUserDetailsScreen =function(){
$scope.LoadData=true;
$scope.FlagLoginScreen = false;
$scope.FlagHomeScreen =false;
$scope.RegisterScreenFlag=false;
};
$scope.RegisterScreen=function(){
$scope.RegisterScreenFlag=true;
$scope.LoadData=false;
$scope.FlagLoginScreen = false;
$scope.FlagHomeScreen =false;
};
});

You can handle your navigation in your app using ui-router. For your case you need a main template which includes your navigation bar and in each state of your app you want to show a different view.
Here is a fiddle which shows you how you can use ui-router to handle your views. For clarity I only implemented login and user details in the example below. You can add remaining parts yourself, it would be a good practice for you.
Define your states as such:
var myApp = angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('home', {
url: "/",
template: '<div ui-view=""/>' // templates of child states will fill components with ui-view attribute
})
.state('home.userDetails', {
url: "userDetails",
template: '<div>user details</div>',
controller: "UserDetailsCtrl"
})
.state('home.login', {
url: "login",
//templateUrl: "path/to/login.html" // instead of giving inline templates as below, you can include your template into a html file, and use it in your state by templateUrl property
template: '<div>user login</div>',
controller: "LoginCtrl"
})
}])
And you can navigate within your states using ui-sref instead of using ng-show and ng-click.
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li class="active">Home</li>
<div class="collapse" id="Login">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-log-in" ui-sref="home.login">Login</a></li>
<li><a class="glyphicon glyphicon-user" href="#" ng-click="RegisterScreen()">Register</a></li>
</ul>
</div>
<li>About</li>
<div class="collapse" id="Contact">
<ul class="nav nav-pills nav-stacked">
<li><a class="glyphicon glyphicon-save" ui-sref="home.userDetails">LoadUserDetails</a></li>
<li><a class="glyphicon glyphicon-phone-alt" href="#">Contact</a></li>
</ul>
</div>
</ul>
</div>
<div ui-view=""/>
Don't forget to check documentation of ui-router:
http://angular-ui.github.io/ui-router/site/#/api
JSFiddle:
http://jsfiddle.net/7tzXh/48/

Set navigation menu item active in Handlebars partial

Currently, I am repeating code for my navigation menu on every single tab, but I want to use partials so there's no duplicate code.
This is what I am using (below), with the active class on a different list element depending on the file. Instead, I'd like to use a partial {{> fruits-nav}}, but I can't find any information on how I would set the active class depending on which file is including the partial.
<div id="table-nav-tabs">
<ul class="nav nav-tabs">
<li class="apple">apple</li>
<li class="active orange">orange</li>
<li class="mango">mango</li>
<li class="pineapple">pineapple</li>
</ul>
</div>

I think you can even make it slightly simpler and more readable:
<div id="table-nav-tabs">
<ul class="nav nav-tabs">
<li class="{{#if active.apple}}active{{/if}} apple">apple</li>
<li class="{{#if active.orange}}active{{/if}} orange">orange</li>
<li class="{{#if active.mango}}active{{/if}} mango">mango</li>
<li class="{{#if active.pineapple}}active{{/if}} pineapple">pineapple</li>
</ul>
</div>
and while rendering:
active: { pineapple: true }

You can pass data to a partial so you can do this in your partial:
<div id="table-nav-tabs">
<ul class="nav nav-tabs">
<li class="{{#if active_apple}}active{{/if}} apple">apple</li>
<li class="{{#if active_orange}}active{{/if}} orange">orange</li>
<li class="{{#if active_mango}}active{{/if}} mango">mango</li>
<li class="{{#if active_pineapple}}active{{/if}} pineapple">pineapple</li>
</ul>
</div>
and then pull it in like this:
{{> fruits-nav active}}
and just make sure active has he appropriate flag set for the current fruit.
Demo: http://jsfiddle.net/ambiguous/GesND/