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()"/>
Related
I have written an angular js program and I have written the controller in a different file but I am getting the error saying that controller is not registered. can someone let me know why i am getting this.
<html ng-app>
<head>
<title>The angular book libraty</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="header-wrapper" ng-controller="HeaderCntrl">
<span class="logo pull-left">{{appDetails.title}}</span>
<span class="tagline pull-left">{{appDetails.tagline}}</span>
<div class="nav-wrapper pull-left">
<ul class="nav nav-pills">
<li class="active">Book</li>
<li>Kart</li>
</ul>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
And the controller code, that is written in the separate js file.
var HeaderCntrl = function($scope){
$scope.appDetails = {
title : "BookKart",
tagline : "The collection of a million books"
};
}
Your controller is just a function. You need to use a module to create it. An example from ng docs:
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
And then
<div ng-controller="GreetingController">
{{ greeting }}
</div>
order of injected js file is wrong
change this
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
to
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
this demo is your post. just change order of injected file.
Demo
I was following an old module for reference without being aware of it and the app was working fine in the guide I was using, I guess it is deprecated now. I used following code to get the proper output.
<html ng-app="myApp">
<head>
<title>The angular book libraty</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="header-wrapper" ng-controller="myCtrl">
<span class="logo pull-left">{{ title }}</span>
<span class="tagline pull-left">{{tagline}}</span>
<div class="nav-wrapper pull-left">
<ul class="nav nav-pills">
<li class="active">Book</li>
<li>Kart</li>
</ul>
</div>
</div>
<script src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
the external js file I used for the controller is as follows.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.title = "BookKart";
$scope.tagline = "We have a million book with us";
});
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);
}]);
I'm new to angular and i'm trying to convert a responsive template into angularJS, I created 2 directives for (header, footer) and view to display content of each template.
the problem exists in the home template where the slide show is in as the page loads completely but without the camera slide show.
Updated
that's the last working simplest version of my code
Here is my main page:
<head>
<!--CSS-->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/camera.css">
<!--JS-->
<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.1.1.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.mobilemenu.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/camera.js"></script>
<script src="js/jquery.ui.totop.js"></script>
<script type="text/javascript" src="js/jquery.mobile.customized.min.js"> </script>
</head>
<body ng-controller="MainController">
<!--header-->
<header-dir></header-dir>
<!-- content -->
<div ng-view></div>
<!-- footer -->
<footer-dir></footer-dir>
<!-- scripts -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- SPELLS -->
<script src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="app.config.js"></script>
<script src="Controllers/MainController.controller.js"></script>
</body>
app.config.js file
var app = angular.module("levariApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Views/home.template.html',
controller: 'MainController'
});
});
and MainController.controller.js file
angular.module("levariApp")
.controller('MainController', function($scope){
})
.directive("headerDir", function(){
return {
templateUrl: 'Views/header.template.html'
};
}).directive("footerDir", function(){
return {
templateUrl: 'Views/footer.template.html'
};
});
I really don't know what i'm missing, hope you guys can help
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
Can anyone please let me know why my template in htmlpage1.html is not rendering?
Code in main.js:
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
});
htmlpage1.html:
<div>this is my template</div>
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div data-ng-include data-ng-src="'HtmlPage1.html'"></div>
</body>
</html>
Make sure the filename and template name you provide in index.html are the same - it's case sensitive -> rename your html file to HtmlPage1.html. You can set the template file in data-ng-include, like so <div data-ng-include="'HtmlPage1.html'"></div>
Here's a working example:
http://jsbin.com/casoza/1/edit