I am using ngimgCropfor uploading my image but when I click on browse the pop up box does not appear. Whats wrong with it?
My controller
categoriesControllers.controller('PartialsController', ['$scope', '$http', '$rootScope', '$routeParams', '$ngImgCrop','$location', function ($scope, $http, $rootScope, $routeParams, $ngImgCrop, $location) { $scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);}]);
My app.js
var myApp = angular.module('myApp', [
'ngRoute', // we are telling angular that we are using ngRouting feature that enables deeplinking first
'vsGoogleAutocomplete',
'categoriesControllers',
'ngImgCrop' ]);
My createbusiness file
<div class="form-group form-group-icon-left">
<div>Select an image file: <input type="file" id="fileInput" /></div>
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage"></img-crop>
</div>
<div>Cropped Image:</div>
<div><img ng-src="{{myCroppedImage}}" /></div>
</div>
and in last my index file
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>EventOber | Every event to be rated</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="Salons, Stylsts, Weave Suppliers, Lashes" />
<meta name="description" content="Discuss Salons, Stylists, Weave Suppliers, Lashes that you know">
<meta name="author" content="Centangle">
<link rel='shortcut icon' type='image/x-icon' href='/images/favicon.ico' />
<meta name='viewport' content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600' rel='stylesheet' type='text/css'>
<link href="css/angular-input-stars.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/mystyles.css">
<!--Angular files -->
</head>
<body>
<div id="fb-root"></div>
<div class="global-wrap">
<div ng-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-animate.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.js"></script>
<!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>-->
<script src="js/ng-img-crop.js" type="text/javascript"></script>
<link href="css/ng-img-crop.css" rel="stylesheet" type="text/css"/>
<script src="js/vs-google-autocomplete.min.js" type="text/javascript"></script>
<script src="js/angular-input-stars.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/controllers.js" type="text/javascript"></script>
<script src="https://code.angularjs.org/1.5.8/angular-cookies.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/slimmenu.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/bootstrap-timepicker.js"></script>
<script src="js/nicescroll.js"></script>
<script src="js/dropit.js"></script>
<script src="js/ionrangeslider.js"></script>
<script src="js/icheck.js"></script>
<script src="js/fotorama.js"></script>
<script src="js/typeahead.js"></script>
<script src="js/card-payment.js"></script>
<script src="js/magnific.js"></script>
<script src="js/owl-carousel.js"></script>
<script src="js/fitvids.js"></script>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<!--Include map api key after jquery -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBN1h8nKcMtDVt2iboiKpmMFvVjxTsnrOI&libraries=places"></script>
<!-- include map api key after jquery -->
</body>
</html>
I am getting this error when I write ngImgcrop in controller function
Error: [$injector:unpr] http://errors.angularjs.org/1.4.4/$injector/unpr?p0=%24ngImgCropProvider%20%3C-%20%24ngImgCrop%20%3C-%20PartialsController
I am following this demo Here
The readme of ngImgCrop states, that you should include ngImgCrop into application dependencies rather than to controller dependencies.
This should resolve the angular unknown provider error.
Check that Image Crop is a directive for AngularJS and you are getting error:
Error: $injector:unpr Unknown Provider
Unknown provider: $ngImgCropProvider <- $ngImgCrop <- PartialsController
Because you are trying to inject $ngImgCrop in your PartialsController and that service do not exist.
PartialsController:
Remove that $ngImgCrop dependency and should work:
categoriesControllers.controller('PartialsController', ['$scope', '$http', '$rootScope', '$routeParams','$location', function ($scope, $http, $rootScope, $routeParams, $location) {
$scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
}]);
Related
I'm getting the next error message when i click on an href:
Unexpected condition on http://127.0.0.1:8887/#/home: Could not find value for language
I'm using ngRoute. This is my index:
<!DOCTYPE html>
<html lang="en" ng-app="pagoApp">
<meta charset="UTF-8">
<title>Paga-Facturas</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/componentes/css/paga-stilos.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<head>
<base href="/">
</head>
<body>
<ul>
<li>Home</li>
<li>List</li>
</ul>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-popover.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular-route.min.js"></script>
<script src="app/xml2json.js"></script>
<script src="app/pagapp.js"></script>
<script src="app/componentes/listado-componente/pago-components.js"></script>
<script src="app/componentes/listado-componente/home-component/home-component.js"></script>
<!--<script src="app/componentes/autorizar-componente/autorizar.js"></script>-->
<script src="app/factory/pago-factories.js"></script>
<script src="app/routes/routes.js">
</body>
</html>
And my routes file:
(function(){
'use strict';
angular
.module('pagoApp')
.config(config);
config.$inject = ["$routeProvider", "$locationProvider"];
function config($routeProvider, $locationProvider){
$routeProvider
.when('/home',{
template: '<home></home>',
controller: 'homeCtrl',
})
.when('/list',{
template: '<paga-facturas></paga-facturas>',
controller: 'payCtrl'
})
.otherwise({
redirectTo: '/home',
});
$locationProvider.html5Mode(false);
}
})();
When i click on Home or List, shows the metioned message, and redirect me to my Index of current directory. Anyone knows why i'm getting this error message?
I am new to Angular. I am trying to run the app on the server and I am getting this as an error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
TypeError: $stateProvider.state is not a function
My app.js is
angular.module('starter', ['ngRoute','ui.router', 'ngAnimate','controllers', 'services'])
.config(['$urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('college', {
url: '/college',
templateUrl: 'html/colleges.html',
controller: 'collegeCtrl'
})
$urlRouterProvider.otherwise('/college');
}]);
My index.html page goes like the following
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js">
</script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!--controllers -->
<script type="text/javascript" src="controllers/collegeCtrl.js"></script>
<!--Services -->
<script type="text/javascript" src="services/httprequestService.js">
</script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body ng-app="starter">
<div class="content">
<div ui-view ng-class="transition">
default content
</div>
</div>
</body>
</html>
colleges.js
angular.
module('controllers',[]).
controller('collegeCtrl', function ($scope,$state) {
});
I really don't understand what is going wrong. I have googled the error for the solution but it didn't work out.
You can try this
<html lang="en" ng-app="starter">
Try this:
.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
...
}
Whatever you inject should be in the same order or else it can be a dependency injection mismatch sort of problem
New to angular. Maybe I'm dense, but not sure anyone else is seeing the same problem I'm having despite my checks for the prescribed naming errors. I've used the convention Ctrl as shorthand for controller.
My Chat Controller ChatCtrl.js is as follows
angular.module("blocChat")
.controller("ChatCtrl", function($scope, Message, Room) {
$scope.roomName
$scope.rooms = Room.all
$scope.goToRoom = function(room) {
$scope.selectedRoom = room
console.log($scope.selectedRoom)
$scope.messages = Message.getByRoomId($scope.selectedRoom.id)
}
$scope.message = function() {
}
});
My Index.html is as follows:
<!DOCTYPE html>
<html ng-app="blocChat">
<head lang="en">
<meta charset="UTF-8">
<title>Bloc Chat Project</title>
<link rel="stylesheet" href="/styles/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700,300">
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" type="text/css" href="styles/normalize.css">
<!-- <link rel="stylesheet" href="/styles/landing.css"> -->
<link rel="stylesheet" href="/styles/home.css">
<link rel="stylesheet" href="/styles/room.css">
<link rel="stylesheet" type="text/css" href="/styles/style.css" />
</head>
<body class="home" ng-controller="ChatCtrl">
<!-- <ng-include src="'/templates/home.html'"></ng-include> -->
<h1>Bloc Chat</h1>
<h2>{{ roomName }}</h2>
<ul><li ng-repeat="room in rooms"><a ng-click="goToRoom(room)">{{ room.name }}</a></li></ul>
<h1>Room: {{ selectedRoom.name }}<h1>
<h2>Room Html<h2>
<div><li ng-repeat="message in messages"> {{ message.text }} </li></div>
<script data-require="angular.js#1.6.1" data-semver="1.6.1" src="https://code.angularjs.org/1.6.1/angular.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- ui's -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<!-- firebase -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<!-- css -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css"></script> -->
<!-- app scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-cookies.js"></script>
<script src="/scripts/app.js"></script>
<script src="/scripts/controllers/ChatCtrl.js"></script>
<script src="/scripts/controllers/HomeCtrl.js"></script>
<script src="/scripts/controllers/RoomCtrl.js"></script>
<script src="/scripts/controllers/UsernameCtrl.js"></script>
<script src="/scripts/factory/Message.js"></script>
<script src="/scripts/factory/Room.js"></script>
</body>
</html>
This happened around the time I created the following file, but I've been advised this is probably just coincidence, UsernameCtrl.js:
angular.module("blocChat", ['ui.bootstrap'])
.controller("UsernameCtrl", function($scope, $uibModal) {
$uibModal.open({
controller: "ModalCtrl",
templateUrl: "/templates/username.html"
})
})
.controller("ModalCtrl", function($uibModalInstance, $scope) {
$scope.user = {
username: "John",
password: "test"
}
})
.run(function($uibModal) {
$uibModal.open({
controller: "ModalCtrl",
templateUrl: "/templates/username.html"
})
})
My code in app.js:
angular
.module('blocChat', ['firebase', 'ui.bootstrap'])
.config(function($locationProvider) {
var config = {
apiKey: // Firebase API key
authDomain:// Firebase Auth domain ("*.firebaseapp.com")
databaseURL: // Firebase Database URL("https://*.firebaseio.com")
storageBucket: "bloc-chat-117d5.appspot.com",
messagingSenderId: "324260113714"
};
firebase.initializeApp(config);
})
my overall code is here: https://github.com/seanbode/bloc-chat
I've tried it with and without the [] in ChatCtrl.js when I call angular.module("blocChat"). I appreciate any advice you can give me as I understand I have a lot to learn in the ways of coding. Thank you.
You are declaring the same module twice
Without the second argument anguler.module('moduleName') is a getter. But with the dependency injection argument it is a setter.
Change:
angular.module("blocChat", [])
To
angular.module("blocChat")
Or move the dependency injection to this declaration since order of script loading has this one loading first
I'm trying to add an image to a sample web page. But whenever I use ng-src in img tag, the image is not showing on the page (the image is visible if I use 'src' in place of 'ng-src').
Here is my Html and JavaScript file.
Javascript & HTML :
/**
* Module
*
* Description
*/
angular.module('myModule', [])
.controller('myCtrl', ['$scope', function($scope){
$scope.clicked = "";
$scope.clickMe = function() {
$scope.clicked= "Image Clicked";
};
}]);
<html ng-app="mainModule">
<head>
<title>Testing For Image Click</title>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body class="container" ng-controller="myCtrl">
<div>
<img ng-src="bluegem.jpg" ng-click="clickMe()"/>
</div>
</body>
Thanks in advance.
There are 2-3 problems in this code
1. myModule and mainModule(your app.js is creating a module named myModule but in your html you are using mainModule)
2. order of mentioned files (angular.js should be mentioned before app.js
Here I am adding the code
<html ng-app="myModule">
<head>
<title>Testing For Image Click</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
Latest compiled and minified JavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> -->
</head>
<body class="container" ng-controller="myCtrl">
<div>
<img ng-src="{{image}}" ng-click="clickMe()"/>
</div>
</body>
And
angular.module('myModule', [])
.controller('myCtrl', ['$scope', function($scope){
$scope.clicked="";
$scope.image = "bluegem.jpg"
$scope.clickMe=function()
{
$scope.clicked="Image Clicked";
};
}]);
Change the markup so that the ng-src binds to a variable and not a URL as you had it setup before:
<img ng-src="{{imageURL}}" ng-click="clickMe()"/>
I'm trying to separate my existing code to different files. I declared ng-app in a js file same as below:
define(['routes-admin', 'services/dependencyResolverFor'], function (routes, dependencyResolverFor) {
var app = angular.module('app', ['ngRoute', 'formly', 'xeditable', 'toaster', 'ngAnimate', 'ui.bootstrap']);
app.config([
'$routeProvider',
'$locationProvider',
'$controllerProvider',
'$compileProvider',
'$filterProvider',
'$provide',
'$httpProvider',
function ($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
$httpProvider.interceptors.push('middleware');
])
return app;
});
and html code is like this:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8"/>
<title>title</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
<link href="css/style-blue1.css" rel="stylesheet" id="style_color"/>
<link href="css/jstree-themes/default/style.min.css" rel="stylesheet">
<link href="lib/toaster/toaster.css" rel="stylesheet">
<script type="text/javascript" src="lib/intro.js"></script>
</head>
<body ng-app="app">
<div id="navbar">
</div>
<div id="container">
<button class="btn" ng-click="functions()">funvtions</button>
</div>
<script type="text/javascript" src="lib/require.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.min.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="app/factories/MainViewFactory.js"></script>
<script type="text/javascript" src="app/controllers/MainViewController.js"></script>
<script type="text/javascript" src="lib/jstree.min.js"></script>
</body>
</html>
in the scripts segment I included app.js which is the js file above. but after running the code , it makes error : failed to instantiate app.
help me in this
That's classic issue when dependencies aren't fulfilled
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.min.js"></script>
you load angular route after app so the dependency injection fails
although you should load jQuery before angular, then angular.element will use jQuery selectors