I have an angular module and config:
var app = angular.module('project', ['ui.bootstrap', 'restangular', 'ngRoute']);
app.config(function($routeProvider, RestangularProvider) {
$routeProvider.
when('/', {
controller:EntryCtrl,
templateUrl:'frontend/partials/entry.html'
})....
My html files, using an index and a partial file:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>bmwpharm admin</title>
<link rel="stylesheet" href="/frontend/css/style.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div ng-app="project">
<div ng-view></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-resource.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.js"></script>
<script src="http://cdn.jsdelivr.net/underscorejs/1.5.1/underscore-min.js"></script>
<script src="http://cdn.jsdelivr.net/restangular/1.1.3/restangular.min.js"></script>
<script type="text/javascript" src="/frontend/app/app.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/frontend/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
</html>
partial/entry.html:
<div class="dropdown">
<a class="btn btn-default" data-toggle="dropdown" href="#">Dropdown<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li>hellooooo</li>
</ul>
</div>
The button and caret is displayed, and the dropdown is closed initially, and will not open when clicked.
Any idea what I am missing?
You are loading the bootstrap.js that has a bound event to close/open the collapse. So both the angular-ui-bootstrap directive and bootstrap.js are trying to close/open the collapse. Remove the bootstrap.js file script reference and see if that fixes your problem. The angular-ui-bootstrap documentation advises against loading the bootstrap.js library.
Here is an example from angular-ui-bootstrap:
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
You see, you didn't use the directive. So your partial should be like this:
<div class="btn-group" dropdown>
<button class="btn btn-default dropdown-toggle" href="#">
Dropdown <b class="caret"></b>
</button >
<ul class="dropdown-menu" role="menu">
<li>hellooooo</li>
</ul>
</div>
please see working example here http://plnkr.co/edit/aM9G0EgL6IcoBED2WOtx?p=preview
update your entry.html to (you've missed dropdown in <div class="button...)
<div class="btn-group" dropdown >
<a type="button" class="btn btn-default dropdown-toggle" >
Button dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a>helloo</a></li>
</ul>
</div>
Related
I am learning AngularJS these days and I am working on my first application which is also connected with a .NET backend. All is going well, except for one thing:
I cannot seem to get ngRoute to work properly.
I have defined my routes in my app.js file like this:
var App = angular.module('netshield', ['ngRoute']).config(function
($httpProvider, $rootScopeProvider) {
});
App.config(['$routeProvider', function ($routes) {
$routes.when("/login", { templateUrl: "login.html", controller:
"AuthController"})
.when("/index", { templateUrl: "/partials/dashboard.html", controller:
"DashboardController"})
.when("/programs", { templateUrl: "/partials/programs.html", controller:
"ProgramController"})
.otherwise({
redirectTo: 'login'
});
}]);
Now each time I visit http://localhost/netshield/index all is well (except for the partial that does not exist so I suppose we're good).
When I visit http://localhost/netshield/programs I get a Not Found error.
My index.html is this:
<!DOCTYPE html>
<html class="fixed" ng-app="netshield">
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>NetShield - Control Panel</title>
<meta name="keywords" content="netshield,licensing,system,net,dotnet,license,authentication,serial,code" />
<meta name="description" content="NetShield - Licensing System">
<meta name="author" content="Nikolas Andreou">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="bootstrap/vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/vendor/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="bootstrap/vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="bootstrap/vendor/bootstrap-datepicker/css/bootstrap-datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="bootstrap/vendor/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="bootstrap/vendor/jquery-ui/jquery-ui.theme.css" />
<link rel="stylesheet" href="bootstrap/vendor/bootstrap-multiselect/bootstrap-multiselect.css" />
<link rel="stylesheet" href="bootstrap/vendor/morris.js/morris.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/theme.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/skins/default.css" />
<link rel="stylesheet" href="bootstrap/stylesheets/theme-custom.css">
<script src="bootstrap/vendor/modernizr/modernizr.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/angular-ui-router.js"></script>
<script src="js/Session.js"></script>
<script src="js/app.js"></script>
<script src="js/services/AuthService.js"></script>
<script src="js/controllers/AuthController.js"></script>
<script src="js/controllers/DashboardController.js"></script>
</head>
<body ng-app="netshield" <!--ng-controller="DashboardController" ng-init="onLoad()"-->>
<section class="body">
<header class="header">
<div class="logo-container">
<a href="../" class="logo">
<!--<img src="bootstrap/images/logo.png" height="35" alt="Porto Admin" />-->
</a>
<div class="visible-xs toggle-sidebar-left" data-toggle-class="sidebar-left-opened" data-target="html" data-fire-event="sidebar-left-opened">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<!-- start: search & user box -->
<div class="header-right">
<div id="userbox" class="userbox">
<a href="#" data-toggle="dropdown">
<figure class="profile-picture">
<img src="bootstrap/images/!logged-user.jpg" alt="Joseph Doe" class="img-circle" data-lock-picture="bootstrap/images/!logged-user.jpg" />
</figure>
<div class="profile-info" data-lock-name="John Doe" data-lock-email="johndoe#okler.com">
<span class="name" ng-model="User">{{User.Username}}</span>
</div>
<i class="fa custom-caret"></i>
</a>
<div class="dropdown-menu">
<ul class="list-unstyled">
<li class="divider"></li>
<li>
<a role="menuitem" tabindex="-1" href="pages-user-profile.html"><i class="fa fa-user"></i> My Account</a>
</li>
<li>
<a role="menuitem" tabindex="-1" ng-click="logout($event)"><i class="fa fa-power-off"></i> Logout</a>
</li>
</ul>
</div>
</div>
</div>
<!-- end: search & user box -->
</header>
<!-- end: header -->
<div class="inner-wrapper">
<!-- start: sidebar -->
<aside id="sidebar-left" class="sidebar-left">
<div class="sidebar-header">
<div class="sidebar-title">
Navigation
</div>
<div class="sidebar-toggle hidden-xs" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
<i class="fa fa-bars" aria-label="Toggle sidebar"></i>
</div>
</div>
<div class="nano">
<div class="nano-content">
<nav id="menu" class="nav-main" role="navigation">
<ul class="nav nav-main">
<li class="nav-active">
<a href="index">
<i class="fa fa-home" aria-hidden="true"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-active">
<a href="programs">
<i class="fa fa-desktop" aria-hidden="true"></i>
<span>My Programs</span>
</a>
</li>
<li class="nav-parent">
<a>
<i class="fa fa-desktop" aria-hidden="true"></i>
<span>My Programs</span>
</a>
<ul class="nav nav-children">
<li>
<a href="programlist">
View Program List
</a>
</li>
<li class="nav-parent">
<a>
Boxed
</a>
<ul class="nav nav-children">
<li>
<a href="layouts-boxed.html">
Static Header
</a>
</li>
<li>
<a href="layouts-boxed-fixed-header.html">
Fixed Header
</a>
</li>
</ul>
</li>
<li>
<a href="layouts-dark.html">
Dark
</a>
</li>
<li>
<a href="layouts-dark-header.html">
Dark Header
</a>
</li>
<li>
<a href="layouts-light-sidebar.html">
Light Sidebar
</a>
</li>
<li>
<a href="layouts-left-sidebar-collapsed.html">
Left Sidebar Collapsed
</a>
</li>
<li>
<a href="layouts-left-sidebar-scroll.html">
Left Sidebar Scroll
</a>
</li>
<li class="nav-parent">
<a>
Left Sidebar Sizes
</a>
<ul class="nav nav-children">
<li>
<a href="layouts-sidebar-sizes-xs.html">
Left Sidebar XS
</a>
</li>
<li>
<a href="layouts-sidebar-sizes-sm.html">
Left Sidebar SM
</a>
</li>
<li>
<a href="layouts-sidebar-sizes-md.html">
Left Sidebar MD
</a>
</li>
</ul>
</li>
<li>
<a href="layouts-square-borders.html">
Square Borders
</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</aside>
<section role="main" class="content-body">
<header class="page-header">
<h2>Dashboard</h2>
<div class="right-wrapper pull-right">
<ol class="breadcrumbs">
<li>
<a href="index.html">
<i class="fa fa-home"></i>
</a>
</li>
<li><span>Dashboard</span></li>
</ol>
<a class="sidebar-right-toggle"><i class="fa fa-chevron-left"></i></a>
</div>
</header>
<div ng-view></div>
</div>
</section>
<!-- Vendor -->
<script src="bootstrap/vendor/jquery/jquery.js"></script>
<script src="bootstrap/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
<script src="bootstrap/vendor/bootstrap/js/bootstrap.js"></script>
<script src="bootstrap/vendor/nanoscroller/nanoscroller.js"></script>
<script src="bootstrap/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="bootstrap/vendor/magnific-popup/jquery.magnific-popup.js"></script>
<script src="bootstrap/vendor/jquery-placeholder/jquery-placeholder.js"></script>
<script src="bootstrap/vendor/jquery-ui/jquery-ui.js"></script>
<script src="bootstrap/vendor/jqueryui-touch-punch/jqueryui-touch-punch.js"></script>
<script src="bootstrap/vendor/jquery-appear/jquery-appear.js"></script>
<script src="bootstrap/vendor/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script src="bootstrap/vendor/jquery.easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.js"></script>
<script src="bootstrap/vendor/flot.tooltip/flot.tooltip.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.pie.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.categories.js"></script>
<script src="bootstrap/vendor/flot/jquery.flot.resize.js"></script>
<script src="bootstrap/vendor/jquery-sparkline/jquery-sparkline.js"></script>
<script src="bootstrap/vendor/raphael/raphael.js"></script>
<script src="bootstrap/vendor/morris.js/morris.js"></script>
<script src="bootstrap/vendor/gauge/gauge.js"></script>
<script src="bootstrap/vendor/snap.svg/snap.svg.js"></script>
<script src="bootstrap/vendor/liquid-meter/liquid.meter.js"></script>
<script src="bootstrap/vendor/jqvmap/jquery.vmap.js"></script>
<script src="bootstrap/vendor/jqvmap/data/jquery.vmap.sampledata.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/jquery.vmap.world.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.africa.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.asia.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.australia.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.europe.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.north-america.js"></script>
<script src="bootstrap/vendor/jqvmap/maps/continents/jquery.vmap.south-america.js"></script>
<script src="bootstrap/javascripts/theme.js"></script>
<script src="bootstrap/javascripts/theme.custom.js"></script>
<script src="bootstrap/javascripts/theme.init.js"></script>
<script src="bootstrap/javascripts/dashboard/examples.dashboard.js"></script>
</body>
</html>
Any idea guys what am I doing wrong? I do not seem to get it to work properly. Any help would be greatly appreciated.
You have to use 'ui.router' instead of 'ngRoute'
Try removing the slashes before the templateUrl path to see if it works
templateUrl: "/partials/dashboard.html"
becomes
templateUrl: "partials/dashboard.html"
Also check if the partials folder is in the same directory as index.html
Also have you include the right ngRoute module in your script tag
Here is a CDN link. Check if this works:
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js
I am new to angularjs,i am working on angularjs Routing using ngRoute.
MasterPage.HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" />
<script src="Script/JS/jquery-3.1.0.min.js"></script>
<script src="Script/JS/bootstrap.min.js"></script>
<script src="Script/Angular/angular.min.js"></script>
<script src="Script/Angular/angular-route.min.js"></script>
<script src="Js/app.js"></script>
</head>
<body ng-app="angualarModule">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" style="text-indent: 3em" href="#">
Dairy Management
</a>
<ul class="nav">
<li class="active">Home</li>
<li>Product Master</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Customer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Customer Master</li>
<li class="divider"></li>
<li>Customer Rate Master</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Distributer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Distributer Master</li>
<li class="divider"></li>
<li>Distributer Rate Master</li>
</ul>
</li>
</ul>
<a class="btn" href="#" style="float:right;">
Logout
</a>
</div>
</div>
</div>
<div ng-view></div>
</body>
</html>
app.js
var angualarModule = angular.module("angualarModule", ['ngRoute']);
angualarModule.config(function ($routeProvider) {
$routeProvider.
when('/Product', {
templateUrl: 'Templates/ProductMaster.html'
});
});
ProductMaster.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Script/JS/jquery-3.1.0.min.js"></script>
<script src="../Script/Angular/angular.min.js"></script>
<script src="../Js/app.js"></script>
<script type="text/javascript">
$(document).ready(function () {
alert('HI');
});
</script>
</head>
<body ng-app="angualarModule">
<h1>Product Master</h1>
</body>
</html>
When i click on ProductMaster link the page is not displayed in ng-view.
There are no errors in console.
In fact alert('HI') is also getting called which is present in ProductMaster.html page.
But ng-view does not display the required page.
Thanks......
The code inside ProductMaster.html is unnecessary, except <h1>Product Master</h1>.
ProductMaster template is just a part of your already included MasterPage.html, and hence having inside another would be redundant.
So, your MasterPage.html should only contain <h1>Product Master</h1>, not the complete html. And it should work. [Supporting Plunk - http://plnkr.co/edit/hvle5ceu9n4cOVPugbdm?p=preview]
Also, make sure if you're using Bootstrap's JS, your jQ version should be less than 3.
ProductMaster.html should be only html (not entire page):
<h1>Product Master</h1>
And to call your JS code use a controller in a route object like it described here $routeProvider
$routeProvider.
when('/Product', {
templateUrl: 'Templates/ProductMaster.html',
controller: 'ProductMasterController', <-- this for JS code
});
Try to change these two lines:
<script src="Script/Angular/angular.min.js"></script>
<script src="Script/Angular/angular-route.min.js"></script>
with these
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
If the routing works, your scripts are missing from Script/Angular/.
And don't use the full html page structure (like body and head tags) in partials.
var angualarModule = angular.module("angualarModule", ['ngRoute']);
angualarModule.config(function ($routeProvider) {
$routeProvider.
when('/Product', {
template: 'ProductMaster.html'
})
.otherwise({
redirectTo: '/form'
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/css/bootstrap.min.css" rel="stylesheet" />
<script src="Script/JS/jquery-3.1.0.min.js"></script>
<script src="Script/JS/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="angualarModule">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" style="text-indent: 3em" href="#">
Dairy Management
</a>
<ul class="nav">
<li class="active">Home</li>
<li>Product Master</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Customer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Customer Master</li>
<li class="divider"></li>
<li>Customer Rate Master</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Distributer Master
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Distributer Master</li>
<li class="divider"></li>
<li>Distributer Rate Master</li>
</ul>
</li>
</ul>
<a class="btn" href="#" style="float:right;">
Logout
</a>
</div>
</div>
</div>
<div ng-view></div>
</body>
</html>
I am working with Angularjs and Angular-Strap and i copy Angular-Strap code sample for DropDown.
Inlined sibling dropdown
I configure every thing right but when i click on button an empty area expands. and new UL add to page and existing UL is invisible.
I try to create an plunker but couldn't add Angular-Starp library to it.
<!DOCTYPE html>
<html id="test" lang="en">
<head>
<meta charset="UTF-8">
<title>{{mainTitle}}</title>
<link rel="stylesheet" href="../style/bootstrap-RTL/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="../style/motion/angular-motion.min.css">
</head>
<body ng-app = "taxeeApp">
<!--a ui-sref="login">Login</a>
<a ui-sref="main">Main</a-->
<div ui-view></div>
<button type="button" class="btn btn-lg btn-primary" data-animation="am-flip-x" bs-dropdown aria-haspopup="true" aria-expanded="false">Click to toggle dropdown
<br>
<small>(using inlined sibling template)</small>
</button>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-download"></i> Some action</li>
<li><a ng-click="$alert('Holy guacamole')"><i class="fa fa-globe"></i> Display an alert</a></li>
<li ng-repeat="i in ['Foo', 'Bar', 'Baz']"><a ng-href="#action{{i}}"><i class="fa fa-chevron-right"></i> {{i}}</a></li>
</ul>
</body>
</html>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/angular/angular.min.js"></script>
<script type="text/javascript" src="../script/angular-strap/dist/angular-strap.min.js"> </script>
<script type="text/javascript" src="../script/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="../script/angular/angular-ui-router.min.js"></script>
<script type="text/javascript" >
angular.module("taxeeApp", ['ui.router','mgcrea.ngStrap.dropdown']) ;
</script>
I am using angular v(1.4.5) and bootstrap v(3) and angular-strap v(2.3.3).
i finally found reason of this problem. i change my Angular-Strap version to v(2.3.6) and all problem resolved.......
I am trying to use UI router but I can't get to open the view of the first page don't know why it won't show the template. It would only show the index.html element. Help would be appreciated I am new to Angular
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Webstie Designing</title>
<!-- Angular Scripts -->
<script src="js/angular.min.js"></script>
<script src ="js/angular-resource.js"></script>
<script src="js/angular-mocks.js"></script>
<script src="js/angular-ui-router.js"></script>
<!-- Application Scripts-->
<script type="text/javascript">"app/app.js"</script>
</head>
<body id="page-top" ng-app="portfolio">
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="#/">Web Designing</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div ui-view></div>
</div>
(function(){
"use strict";
var app = angular.module("portfolio",["ui.router"]);
app.config(["$stateProvider","$urlRouterProvider",
function("$stateProvider","$urlRouterProvider"){
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home",{
url:"/",
templateUrl:"app/Intro.html"
})
}]
);
}());
First thing you need to refer app.js script reference correctly to make portfolio module available for ng-app
<script type="text/javascript" src="app/app.js"></script>
instead of
<script type="text/javascript">"app/app.js"</script>
I just created an AngularJS project with grunt bower and Yeoman. Included Updated version to Angular 1.3.13. I want to use Angular UI bootstrap. I added Nav Bar which is responsive. But while on small screens, the drop down doesn't seem to work. When I click on dropdown the entire menu hides.
here is my index.html
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="webClientApp">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/">Web Client</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
ng-class="!navCollapsed && 'in'" ng-click="navCollapsed=true">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown"><a href="" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown"><a href="" class="dropdown-toggle"
data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</header>
<div class="container">
<div ng-view=""></div>
</div>
<div class="footer">
<div class="container">
<p>
<span class="glyphicon glyphicon-heart"></span> from the Yeoman team
</p>
</div>
</div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
!function(A, n, g, u, l, a, r) {
A.GoogleAnalyticsObject = l, A[l] = A[l] || function() {
(A[l].q = A[l].q || []).push(arguments)
}, A[l].l = +new Date, a = n.createElement(g), r = n
.getElementsByTagName(g)[0], a.src = u, r.parentNode
.insertBefore(a, r)
}(window, document, 'script',
'//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/about.js"></script>
<!-- endbuild -->
</body>
</html>
I'm using all latest versions of JS. Here is my bower.json
{
"name": "web-client",
"version": "0.0.0",
"dependencies": {
"angular": "^1.3.13",
"bootstrap": "^3.3.2",
"angular-animate": "^1.3.13",
"angular-cookies": "^1.3.13",
"angular-resource": "^1.3.13",
"angular-route": "^1.3.13",
"angular-sanitize": "^1.3.13",
"angular-touch": "^1.3.13",
"angular-bootstrap": "0.12.1"
},
"devDependencies": {
"angular-mocks": "^1.3.13"
},
"appPath": "app",
"moduleName": "webClientApp"
}
The nav bar on full screen is working fine. But when I resize the browser size, The responsive bar is working. Menu will show up only on clicking the toggle buton. But when I click on drop down menu, the entire menu hides.
I have followed this StackOverflow Question and I got one Plunker Demo for it. It is working fine there.
But I'm using Latest versions of all files. So mine is not working. Here is my code what I tried in Plnker.
How to Solve this Issue? Thanks.
Your dropdown portion has changed.
Here's a Plunker
<li dropdown>
</b>
<ul class="dropdown-menu">
<li>...</li>
....
</ul>
</li>
UPDATED for AngularJS 1.5+ and angular-ui-ootstrap 2.5+
I tried several options for a working dropdown menu in AngularJS 1.5+ and UIBootstrap in the menu bar - nothing worked and was outdated, so I thought I'd share my solution here, also available in this repo commit.
What I did
Used the normal navbar example from https://angular-ui.github.io/bootstrap/#!#collapse
Combined it with button dropdown functionality as showcased in there from the example on https://angular-ui.github.io/bootstrap/#!#dropdown
The code (please ref to points 1 & 2 above for further guidance)
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ToDoSth</a>
</div>
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>Link 3 <span class="caret"></span></a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
<li role="separator" class="divider"></li>
<li>SubItem 4</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" class="nav-text" uib-dropdown-toggle>Signed in as John Doe <span class="caret"></span></a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li>Profile</li>
<li role="separator" class="divider"></li>
<li>Sign Out</li>
</ul>
</li>
</ul>
</div>
</nav>
Against the latest version of ui.bootstrap, 0.12.1, I think it should be a combination solution on Dropdown and Collapse of ui.bootstrap:
for Dropdown menu item, it use "dropdown" in outer element, and "dropdown-toggle" in inner element to trigger the dropdown action;
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
for the navbar collapse button, in responsive mode, it need to add "Collapse" directive in navbar toggle button and navbar div.
<div ng-controller="CollapseDemoCtrl">
<button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
<hr>
<div collapse="isCollapsed">
<div class="well well-lg">Some content</div>
</div>
</div>
for implementation, please refer to: My Plunker