Hi I was trying to implement a pop up in angular but while doing so I am getting the error Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=PopupDemo&p1=Error%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.9%2Fangular.min.js%3A19%3A463)
The below is the code I have written.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body ng-app="PopupDemo">
<div ng-controller="PopupDemoController">
<a ng-click="open()">Open Popup</a>
</div>
<script>
angular.module('PopupDemo', ['ui.bootstrap']);
angular.module('PopupDemo')
.controller('PopupDemoController',['$scope','$modal',function ($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'first.html',
});
}
}]);
</script>
</body>
I am not sure why I am getting the error and what is the way out..Not getting any sort of help from online resources and angular website..
I do know there is some module which is missing in the file,But not sure how to check for it.
Can someone please help me out..Am getting stuck in this.
Thanks a lot guys
Following code should probably work.
Have added bootstrap.ui js
Changed the Module name accordingly
Code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body ng-app="PopupDemo">
<div ng-controller="PopupDemoController">
<a ng-click="open()">Open Popup</a>
</div>
<script>
var myMod = angular.module('PopupDemo', ['ui.bootstrap']);
myMod.controller('PopupDemoController', ['$scope', '$uibModal', function($scope, $modal) {
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'first.html',
});
}
}]);
</script>
</body>
Try to replace with this code
<script>
var app = angular.module('PopupDemo', ['ui.bootstrap']);
app.controller('PopupDemoController', ['$scope', '$modal', function($scope, $modal) {
$scope.open = function() {
var modalInstance = $modal.open({
templateUrl: 'first.html',
});
}
}]);
</script>
you didnt load the ui.bootstrap module
you can use this cdn
It seems that you also need to add angular bootsrap-ui reference:
For example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.1/ui-bootstrap.js"></script>
Update:
You are missing ui.bootstrap.js file. please include that. It is not suffice to include bootstrap.js.
Also, please use $uibModal instead of $modal
myApp.controller('myController', ['$scope', '$uibModal', function($scope, $uibModal) {
$scope.hi = "hello world";
$scope.open = function() {
var modalInstance = $uibModal.open({
template: '<h1>Hello world</h1>',
});
}
}]);
JQuery js should come before bootstrap js. Could you please try that
Related
Trying to find the issue causing the seconD table not to render and throwing following error:
VM16604 angular.js:13236 Error: not found: .ui-grid-header-cell .ui-grid-cell-contents
I am using Using:
https://www.npmjs.com/package/ui-grid-auto-fit-columns
http://ui-grid.info/
JS:
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning', 'ui.grid.autoFitColumns','ui.grid.resizeColumns']);
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = [data[0]];
});
$scope.gridOptions.columnDefs = [
{ name:'eee' },
{ name:'age' },
{ name:'address.street'}
];
$scope.gridOptions2 = {};
$scope.gridOptions2.data = [{'nameA':'contentA1','nameB':'contentB1'},{'nameA':'contentA2','nameB':'contentB2'}];
$scope.gridOptions2.columnDefs = [{name:'nameA'},{name:'nameB'}];
console.log($scope.gridOptions);
console.log($scope.gridOptions2);
}]);
HTML:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://npmcdn.com/angular-ui-grid#latest/ui-grid.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<script src="https://npmcdn.com/angular-ui-grid#latest/ui-grid.min.js"></script>
<script src="https://npmcdn.com/ui-grid-auto-fit-columns#latest/dist/autoFitColumns.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div>
<div ui-grid="gridOptions"
ui-grid-auto-fit-columns
ui-grid-pagination
ui-grid-resize-columns
class="full-height"></div>
<div ui-grid="gridOptions2"
ui-grid-auto-fit-columns
ui-grid-pagination
ui-grid-resize-columns
class="full-height"></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
plnkr with error:
http://plnkr.co/edit/yXE3AuZEPwjlmlqpFTNq?p=preview
I checked your plunker its related to "ui-grid-auto-fit-columns" in second gridOptions2 once you removed from html, it will start working.
Seems like it is a reported issue which has a workaround by not defining gridOptions synchronously....
https://github.com/Den-dp/ui-grid-auto-fit-columns/issues/10
Now its working, try with following code, I have remove ui-grid-auto-fit-columns derective from your html div and also remove dependancy from module 'ui.grid.autoFitColumns'
<div ng-controller="MainCtrl">
<div>
<div ui-grid="gridOptions"
ui-grid-pagination
ui-grid-resize-columns
class="full-height"></div>
<div ui-grid="gridOptions2"
i-grid-auto-fit-columns
ui-grid-pagination
ui-grid-resize-columns
class="full-height"></div>
</div>
</div>
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pinning',
'ui.grid.resizeColumns','ui.grid.selection', 'ui.grid.resizeColumns']);
app.controller('MainCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = [data[0]];
});
$scope.gridOptions.columnDefs = [
{ name:'eee' },
{ name:'age' },
{ name:'address.street'}
];
$scope.gridOptions2 = {};
$scope.gridOptions2.data = [{'nameA':'contentA1','nameB':'contentB1'},{'nameA':'contentA2','nameB':'contentB2'}];
$scope.gridOptions2.columnDefs = [{name:'nameA'},{name:'nameB'}];
console.log($scope.gridOptions);
console.log($scope.gridOptions2);
}]);
I'm new to angularJS. When I click a button it will show a dialog, the dialog's html code is:
<img id="imgId" ng-src="{{imgSrc}}">
In controller, when I try to access imgId using JavaScript it showing null. Same with the JQuery.
console.log(document.getElementById('imgId')); // null
Here is my code:
angular.module('BlankApp', ['ngMaterial']).
controller('mainController', function($scope, $mdDialog) {
$scope.showCustomDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
template: '{{hello}}<img id="imgId" ng-src="{{imgSrc}}">',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
});
function DialogController($scope, $timeout) {
$scope.hello = "Hello World";
$scope.imgSrc = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcScku8D7qo2hWD-eqb_WKTVjMjjiJFLo7uDQQ4RZWRNw9TJ-j7nYg";
$timeout(function() {
console.log(document.getElementById('imgId'));
console.log(angular.element(document.getElementById('imgId')));
});
}
}
});
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-controller="mainController" ng-cloak>
<md-button ng-click="showCustomDialog($event)" class="md-primary">Show Dialog</md-button>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html>
(plunker)
You need to give the dialog a chance to render, before you can get a reference to it.
Wrap the getElementById calls in a $timeout:
$timeout(function(){
console.log(document.getElementById('imgId'));
console.log(angular.element(document.getElementById('imgId')));
});
Keep in mind that you need to include the $timeout in your controller:
function DialogController($scope, $timeout) {
Here's a working example using your plunker's code:
angular.module('BlankApp', ['ngMaterial']).
controller('mainController', function($scope, $mdDialog) {
$scope.showCustomDialog = function(ev) {
$mdDialog.show({
controller: DialogController,
template: '{{hello}}<img id="imgId" ng-src="{{imgSrc}}">',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true
});
function DialogController($scope, $timeout) {
$scope.hello = "Hello World";
$scope.imgSrc = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcScku8D7qo2hWD-eqb_WKTVjMjjiJFLo7uDQQ4RZWRNw9TJ-j7nYg";
$timeout(function() {
console.log(document.getElementById('imgId'));
console.log(angular.element(document.getElementById('imgId')));
});
}
}
});
<html lang="en">
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-controller="mainController" ng-cloak>
<md-button ng-click="showCustomDialog($event)" class="md-primary">Show Dialog</md-button>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
</body>
</html>
I am troubling with angular js error
angular.js:36 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.19/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.19%2Fangular.min.js%3A18%3A139)
index.php code is
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.17/angular-animate.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/style.css" />
<script src="<?php bloginfo('template_url')?>/angular-animate.js"></script >
<script src="<?php bloginfo('template_url')?>/script.js"></script>
</head>
<body ng-controller="Ctrll">
<p style="color:#000;margin:0"><span>slide:</span>{{slide}} </p>
<button ng-click="showAlerts()" style="float:left">
click to toggle panel
</button>
<!--sliding panel directive-->
<alerts-center ng-if="parentslide"></alerts-center>
</body>
</html>
js code is
angular.module("app",["ngAnimate"])
.controller("Ctrll",function($scope, $timeout){
$scope.parentslide =false;
$scope.showAlerts = function($event) {
$scope.parentslide =true;
$timeout(function(){
$scope.$broadcast('openAlerts');
},1)
}
})
.controller('alertsCtrl', function ($scope) {
$scope.$on('openAlerts', function(event, args) {
$scope.slide = !$scope.slide;
});
})
.directive('alertsCenter', function () {
return {
templateUrl: 'alerts.php',
replace:true,
restrict: 'E',
controller:'alertsCtrl'
};
});
If you working in plunker its fine. If not then the error may be due to
<script data-require="angular.js#1.2.20" data-semver="1.2.19" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script data-require="angular-animate#1.2.17" data-semver="1.2.17" src="http://code.angularjs.org/1.2.17/angular-animate.js"></script>
data-require and data-semver are actually specific implementations by Plunker.
Better to use:
bower install angular-animate
and add the script tag
< script src="/bower_components/angular-animate/angular-animate.js"></script >
finally Dependency injection
angular.module('myApp', ['ngAnimate']);
I'm trying to build a single page blogging site using AngularJS and I have encountered the following error message:
"Uncaught Error: [$injector:modulerr] Failed to instantiate module spBlogger due to:
Error: [$injector:modulerr] Failed to instantiate module spBlogger.posts due to:
Error: [$injector:unpr] Unknown provider: $stateProvider"
I'm not sure why this is happening although the $stateProvider service is already injected. Can you please help me identify why I'm getting this error message?
postModule.js contents:
'use strict'
angular.module('spBlogger.posts', ['spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);
angular.module('spBlogger.posts')
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$stateProvider.state('allPosts', {
url: '/posts',
templateUrl: 'modules/posts/views/posts.html',
controller: 'PostController'
});
$stateProvider.state('singlePost', {
url: '/posts/:id/:permalink',
templateUrl: 'modules/posts/views/singlePost.html',
controller: 'PostDetailsController'
});
}]);
index.html contents:
<!doctype html>
<html lang="en" ng-app="spBlogger">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="modules/posts/css/posts.css">
</head>
<body>
<div class="container">
<br/>
<div class="jumbotron text-center">
<h1>The Single Page Blogger</h1>
<p>One stop blogging solution</p>
</div>
<div ui-view> The angular ui-view should be displayed here!</div>
<div class="row footer">
<div class="col-xs-12 text-center">
<p>The Single Page Blogger
<app-version/>
</p>
</div>
</div>
</div>
</body>
<!-- build:js app/built/app.min.js -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-ui-router/angular-ui-router.min.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-cookies.js"></script>
<script src="lib/angular/angular-translate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="modules/posts/postModule.js"></script>
<script src="modules/posts/js/controllers.js"></script>
<script src="modules/posts/js/filters.js"></script>
<script src="modules/posts/js/directives.js"></script>
<script src="modules/posts/js/services.js"></script>
<!-- endbuild -->
</html>
This is the app.js
'use strict'
angular.module('spBlogger', ['ui.router', 'spBlogger.posts', 'spBlogger.controllers', 'spBlogger.directives', 'spBlogger.filters', 'spBlogger.services']);
angular.module('spBlogger').value('version', 'V1.0');
angular.module('spBlogger').run(['state', function (state) {
$state.go('allPosts');
}]);
controllers.js
'use strict'
angular.module('spBlogger.posts.controllers', [])
.controller('PostController', ['$scope', 'postService', function ($scope, postService) {
$scope.getAllPosts = function () {
return postService.getAll();
};
$scope.posts = $scope.getAllPosts();
}])
.controller('PostDetailsConstroller', ['$stateParams', '$state', '$scope', 'postService', function ($stateParams, $state, $scope, postService) {
$scope.getPostById = function (id) {
return postService.getPostById(id);
};
$scope.closePost = function () {
$state.go('allPosts');
};
$scope.singlePost = $scope.getPostById($stateParams.id);
}])
;
You missed to add a dependency to ui.router in your application module:
angular.module('spBlogger.posts', ['ui.router', 'spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);
Angular UI Router isn't part of official Angular's distribution but it's an optional module developed by a third-party dev team.
I want to dynamically add menu JavaScript file and html to content.html, but it can't do.
I created simple example
demo
I try move "<script src="menu.js"></script>" to menu.html
Your code moves away from the whole idea of writing single page app with angular. I have updated it to give you basic idea of how you would do the routes and share templates and use controller.
Check out the plunkr
html
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="menu.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script data-require="ui-router#*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
<script src="menu.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="menu" ng-include="'menu.html'"></div>
<div ui-view></div>
</body>
</html>
js
angular.element(document).ready(function() {
angular.bootstrap(document, ["app"]);
});
angular.module('app',['moduleContent', 'moduleMenu', 'ui.router']);
var app = angular.module('app');
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: "",
templateUrl: "first.html",
controller: 'firstCtrl'
})
.state('second', {
url: "/second",
templateUrl: "second.html"
})
});
app.controller('firstCtrl', ['$scope', function($scope) {
$scope.page = "first";
}]);
//Conttent module
angular.module('moduleContent',[])
.controller('contentCtrl', contentCtrl);
function contentCtrl(shareData)
{
shareData.currentPage = 0;
}