I was trying to use bootstrap-ui module but I have the following error:
angular.min.js:6Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=delyApp&p1=Error%3A…%20q%20(http%3A%2F%2Flocalhost%3A8080%2Fscripts%2Fangular.min.js%3A7%3A355)
I've this file:
index.html
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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" href="#">Delivery Online</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">
<li>
Listado de deliverys
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div ng-view></div>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/ui-bootstrap-tpls-2.0.1.min.js"></script>
<script src="app/route.js"></script>
<script src="app/controller.js"></script>
and in the route.js I injected the ui.bootstrap module:
var app = angular.module("delyApp", ["ngRoute"], ['ui.bootstrap']);
app.config(function ($routeProvider) {
$routeProvider
.when("/agregar", {
templateUrl: "agregar.html",
controller: "controller"
})
.when("/deliverys", {
templateUrl: "deliverys.html",
controller: "controller"
})
.otherwise({
templateUrl: "deliverys.html",
controller: "controller"
});
});
But it's currently not working.. giving the modulerr error... any idea? I guess that the js files are in the correct order. Thanks
There is an issue with injection,
Change the code ,
From
var app = angular.module("delyApp", ["ngRoute"], ['ui.bootstrap']);
To
var app = angular.module("delyApp", ['ngRoute','ui.bootstrap']);
Related
I'm setting up a page using angular.js and am using angular-ui-router and am running into a pretty basic issue which i can't seem to figure out. I have required the proper CDN's and I believe I have setup the angular correctly but am running into a an error:
> angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=portfolioApp&p1=Err…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.5%2Fangular.min.js%3A21%3A19)
My app.js is as follows:
> angular.module('portfolioApp', ['ui.router','ui.bootstrap']).config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider)
>{$urlRouterProvider.otherwise('/');
> $stateProvider
> .state('main', {
> url: '/',
> views: {
> '/': {
> templateUrl: '/views/main.html'
> }
> }
> }); $locationProvider.html5Mode({
> enabled: true,
> requireBase: false
> });
>}]);
my index.html file which is located within the main folder of my app:
<!DOCTYPE html>
<html>
<head>
<title>Tammer Galal</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script> -->
<script src="/js/app.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/style/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.css">
</head>
<body ng-app='portfolioApp' class="portfolioBody">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<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" href="index.html">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Github Repositories<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Repos</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div ui-view><div>
<!-- <footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer> -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to load a basic home partial which i have named partial-home.html which is within my public/views/partials directory path.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 text-center">
</div>
<div class="col-xs-12 text-center">
<img class="img-rounded me" id="firstPicture" src="/img/me.jpg">
</div>
<div class="col-xs-12 text-center">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div>
<h3 class="siteHeader"><strong>Rock Paper Scissors!</strong></h3>
<img class="img-rounded" id="rpsPic" src="/img/rps.jpg">
<p class="siteDescrip">Play a game of Rock, Paper, Scissors! Created utilizing: <br /><strong>HTML, CSS3, Javascript, and jQuery</strong></p>
</div>
</div>
<div class="col-sm-4 col-md-4">
<h3 class="siteHeader"><strong>Face Check</strong></h3>
<img class="img-rounded" id="faceCheckPic" src="/img/faceCheckPic.jpg">
<p class="siteDescrip">A facial and emotional recognition app Created utilizing: <br /><strong>HTML, CSS3, Javascript, jQuery, AJAX, and 3 APIs</strong><br /><strong>Co-Creators: Long Phan and Evan Bates</strong></p>
</div>
<div class="col-sm-4 col-md-4">
<h3 class="siteHeader"><strong>RU Fly?</strong></h3>
<img class="img-rounded" id="faceCheckPic" src="/img/rufly.jpg">
<p class="siteDescrip">RU Fly is a Rutgers Web Flyer, where students can add their favorite restaurants and leave reviews, so everyone knows the best place to eat! Adding upcoming events soon!<br /><strong>HTML, CSS3, Javascript, Node.js, MySQL, Sequelize, Express, JawsDB</strong></p>
</div>
</div>
</div>
I really cannot figure out what it is i have done wrong and am thinking about starting from scratch. Any help would be greatly appreciated.
I tried to reproduce this error. Everything works fine, but when I added 'ui.bootstrap' module in app 'portfolioApp', same error message displayed. Also, I am not seeing any reference for 'ui.bootstrap' module in your 'index.html'. Try to remove 'ui.bootstrap' or add reference of this module in 'index.html'.
I am learning angularJS and i am using the book, "Learning Web Development with Bootstrap and AngularJs" and i am trying to create a ng-click functionality to a button. but nothing happens when i click it. this is my controller.js...
function AppCtrl($scope){
$scope.clickHandler = function(){
window.alert('Clicked!');
};
}
this is my view...
<html ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<title>Contacts Manager</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Contacts Manager</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
<ul class="nav navbar-nav">
<li class="active">Browse</li>
<li>Add Contact</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<input type="text" class="form-control" placeholder="Search">
</form>
</div>
</nav>
<div class="col-sm-8">
<button ng-click="clickHandler()">Click Me</button>
</div>
</body>
</html>
what am i doing wrong???
You need to create a module, and make the controller on the module. You then need to tell angular to bootstrap the module as the root of the application (using ng-app directive). I would reccomend taking another look at the exaple you are following.
Here's a short snippet setting up a button with a click-handler:
angular.module('myApp', [])
.controller('AppCtrl', function($scope){
$scope.clickHandler = function(){
window.alert('Clicked!');
};
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<button ng-click="clickHandler()">Click Me</button>
</div>
Inject $window, and call it. You have not dome that
Hi i start to use angularjs v1.4.7 and angular-route v1.5.0 to develop a spa.
The structure on in my project is:
- static
-- js
---- libs
------ angular.min.js
------ angular-route.min.js
---- app.js
- web
-- views
----- ... my views ...
-- index.html
Im getting this error in the browser console:
Uncaught Error: [$injector:modulerr]
My index:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<link rel="stylesheet" href="../static/bootstrap-3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/app.css" />
<title>
JM2
</title>
<script type="text/javascript" src="../static/js/libs/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../static/js/libs/angular.min.js"></script>
<script type="text/javascript" src="../static/js/libs/angular-route.min.js"></script>
<script type="text/javascript" src="../static/js/app.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button"
class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#navbar"
aria-expanded="false">
<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="#">
JM2
</a>
</div>
<div class="collapse navbar-collapse"
id="navbar">
<ul class="nav navbar-nav">
<li role="presentation">
<a href="#">
Home
</a>
</li>
<li role="presentation">
<a href="#builds">
Builds
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li role="presentation">
<a href="#admin">
Admin
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div ng-view></div>
</div>
</body>
</html>
My app.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider'], function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: 'homeController'
})
.when('/builds', {
templateUrl: 'views/builds.html',
controller: 'buildsController'
})
.when('/admin', {
templateUrl: 'views/admin.html',
controller: 'adminController'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('homeController', function($scope) {
});
app.controller('buildsController', function($scope) {
});
app.controller('adminController', function($scope) {
});
Why am I having this error? I had read some questions and all you say is the problem of import of angular-route but I have imported.
Thank you very much in advance.
The dependencies mentioned are incorrect. You need to pass an array with the name of the dependencies as strings and the function as the last element in array with the dependencies in the same sequence.
Change app.config(['$routeProvider'], function($routeProvider) {
to
app.config(['$routeProvider', function($routeProvider) {
// ^ Removed ]
...
...
}]); // <----- Add ] here
I have php function calling 2 variables for controlling active links. I don't know is it written correctly and how to call it in my other script.
My function is in functions.php and my navigation is in nav.php. I includ both in index.php.
Function:
function active_links() {
// stranice = Active //
if (isset($_GET['poslovni_korisnici'])) {
$active1 = 'class="active"';
} else {
$active1 = '';
}
if (isset($_GET['korisnici'])) {
$active2 = 'class="active"';
} else {
$active2 = '';
}
}
nav.php
<body>
<!-- start body -->
<nav class="navbar navbar-default">
<!-- start nav -->
<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" href="index.php">POSLOVNA STATISTIKA</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">
<li ' . $active . '>Poslovni korisnici <span class="sr-only">(current)</span>
</li>
<li ' . $active . '>Korisnici
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
index.php:
<?php
require_once 'functions.php';
$dbh = connect_to_database();
$active = active_links();
include 'includes/head.php';
include 'includes/nav.php';
end active_links() with
return(array($active1,$active2));
then
$active = active_links();
$active will be an array with 2 variables to use:
$active[0] and $active[1]
I'm working on one of my first projects in AngularJS, and I'm using ng-view with $routeProvider for my templating, but I've run into a small problem. On a few of my pages (landing, login, and registration) I don't want the navbar to show; but I want the navbar to show on all my other views. What are my options in fixing this problem using AngularJS?
The link below includes the index.html, login.html, and my $routeProvider
index.html
<body ng-app="hello">
<!-- FIXED NAVBAR -->
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">hello</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Add Group</li>
<li>Upload File</li>
<li class="active">Notifications</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div ng-view></div>
</div>
</body>
login.html
<div class="container">
<form ng-controller="AdminUserCtrl" class="form-signin" role="form" method="post">
<h2 class="form-signin-heading">Please sign in</h2>
<input type="email" class="form-control" id="inputUsername" placeholder="Email address" ng-model="login.email" required autofocus>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" ng-model="login.password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember Me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="logIn(login.email, login.password)">Sign In</button>
<p style="text-align: center; margin-top: 5px;"><a style="text-align: center;" href="#/register">Register A New Account</a></p>
</form>
$routeprovider
hello.config([ '$locationProvider', '$routeProvider',
function($location, $routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/login.html',
controller: 'AdminUserCtrl',
access: { requiredLogin: false}
}).
when('/feed', {
templateUrl: 'views/feed.html',
controller: 'FeedListCtrl',
access: { requiredLogin: true}
otherwise({
redirectTo: '/'
});
}]);
The hack I'm currently thinking of to fix this is taking out the html code for the navbar out of the index and only adding it in the pages I need it, but i was wondering if there is another fix?
The navigation bar and other components that are separate from ng-view should have their own controllers. You can communicate information to these controllers from controllers within the view using a service. Properties of this service can be bound to the navigation views and their display can be updated based on the values of the properties. For example.
app.factory("navBarService", function () {
return {show: true};
});
app.controller("NavBarController", function (navBarService) {
this.show = navBarService.show;
});
app.controller("SomeControllerYouRouteToController", function (navBarService) {
navBarService.show = false;
});