So, I'm working on an Angular application and I have been having problems regarding compatibility between ngSanitize and ngDragDrop. ngDragDrop can be found at http://ganarajpr.github.io/angular-dragdrop/ and ngSanitize at https://docs.angularjs.org/api/ngSanitize/service/$sanitize.
The very moment I include ngSanitize on my app module, the angular code stops working entirely.
I have a test file called compatibility.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset='utf-8'>
<script src="compatibility.js"></script>
<script src="angular/angular.min.js"></script>
<script src="angular-resource/angular-resource.min.js"></script>
<script src="angular/angular-sanitize.min.js"></script>
<script src="angular/draganddrop.js"></script>
</head>
<body>
{{3+1}}
</body>
</html>
And another called compatibility.js
var app = angular.module("MyApp", ["ngDragDrop","ngSanitize"]);
app.controller("Controller", [ '$scope', '$sce', function($scope, $sce) {
}]);
I haven't the foggiest idea why it isn't working and I'm not sure what to do. Supposedly, evaluating {{3+1}} should return a 4 when the code is run, but it doesn't. I've worked with both ngSanitize and ngDragDrop separately, and the problem only shows when I try to use both simultaneously.
Try moving your compatibility.js file down to be under the angular.min.js.
Or just put it at the bottom like this:
<script src="angular/angular.min.js"></script>
<script src="angular-resource/angular-resource.min.js"></script>
<script src="angular/angular-sanitize.min.js"></script>
<script src="angular/draganddrop.js"></script>
<script src="compatibility.js"></script>
PS. I don't think there is any compatibility problems.
Related
I am following the phoneCat tutorial[https://docs.angularjs.org/tutorial/] and decide to create a similar structured app. but I keep getting $injector:modulerr Error when I try to include a module I created.
files are arranged like this
The way I started my app is use npm package http-sever with command http-server ...\app.
Another thing I noticed is that if I use http-server command directly(rather than npm start suggested in tutorial) to start app in the app folder it also gives me error message. I am now pretty confused about this.
This is my app.module.js
'use strict';
angular.module('dota2Hero', [
'ngRoute',
'core'
]);
If I remove 'core' from dependency array, the code compiles.
Here is my index.html
<!doctype html>
<html lang="en" ng-app="dota2Hero">
<head>
<meta charset="utf-8">
<title>Dota2 Database</title>
<script src="//code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="core/hero/hero.module.js"></script>
<script src="core/core.module.js"></script>
<script src="app.module.js"></script>
<script src="core/hero/hero.service.js"></script>
<script src="app.config.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
and my core.module.js
'use strict';
angular.module('core',['core.hero']);
You need to change the order in which you load the references, load the core.module.js before loading app.module.js
<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.1/angular-resource.min.js"></script>
<script src="core/hero/hero.module.js"></script>
<script src="hero-grid/hero-grid.module.js"></script>
<script src="core/core.module.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="core/hero/hero.service.js"></script>
<script src="hero-grid/hero-grid.component.js"></script>
I am only a few days into AngularJS, and have been having trouble trying to print out this simple message. I have 2 files, one is "index.html" and the other is "app.js". They are mind-numbingly simple:
<!--index.html:-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Testing Angular</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="maryCtrl">
<p>{{mary}}</p>
</div>
</body>
</html>
<<!--end of index-->
//app.js:
var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {
$scope.mary = 'had a little lamb.';
});
//end of app.js
The output on the page should be "had a little lamb." but I get "{{mary}}" instead. What really pisses me off is that I have a separate computer where it works just fine. I figure I must have a character wrong or am missing an extension, but I find that hard to believe since I just downloaded Visual Studio 2015 on this machine which has AngularJS and Angular-intellisense pre-loaded. Any help or criticism would be greatly appreciated.
you need a reference to the angular.js code.
make sure it is at the top of your script references.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
The link I provided is for a copy of the code that is hosted on a Google CDN. There are tons of benefits for using the CDN as opposed to having a local copy of angular.js on your computer (as long as you aren't trying to test your code offline).
You can find the CDN link on angularjs.org; Just click on the big blue download button and you will see options for obtaining the most recent version or legacy versions of angular.js
as #Pankaj Parkar commented, you should have angular.js file referenced before your app.js file:
<!--index.html:-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Testing Angular</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="maryCtrl">
<p>{{mary}}</p>
</div>
</body>
</html>
<<!--end of index-->
//app.js:
var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {
$scope.mary = 'had a little lamb.';
});
//end of app.js
you can download it from https://github.com/angular/angular.js
I just started with VS2015 ASP.Net5 using Angular. I get an error when using the angular retrieved by Bower:
Error: [ng:areq] Argument 'TextController' is not a function, got undefined
http://errors.angularjs.org/1.4.3/ng/areq?p0=TextController&p1=not%20a%20function%2C%20got%20undefined
This is my html code:
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8"/>
</head>
<body ng-controller="TextController">
<p>{{SomeText}}</p>
<!--does not work-->
<script src="lib/angular/angular.js"></script>
<!--works-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"> </script>-->
<script>
function TextController($scope) {
$scope.SomeText = "Go";
}
</script>
</body>
When I use the Angular Google provides it works like a charm.
Below is a what a picture of what was generated using Bower in VS
What am I missing?
UPDATE
This is the working version thanks to Claies:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8"/>
</head>
<body ng-controller="TextController">
<p>{{SomeText}}</p>
<!--does not work-->
<script src="lib/angular/angular.js"></script>
<script>
angular.module('myApp', []).controller('TextController', function ($scope) {
$scope.SomeText = "Go";
});
</script>
</body>
</html>
Your controller cannot be global in the latest release of Angular, and, even if it should, you should try to modularise your design anyway.
Declare a module:
angular.module('myApp', [])
and register the controller onto the module:
angular.module('myApp')
.controller('TextController', function() { /*...*/ })
Finally, add the module to the ng-app directive:
<html ng-app="myApp">
I am having issues trying to show a partial html on my index.html file (Nothing is displayed).
Please see my index.html code:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
<link rel="stylesheet" href="css/animations.css"/>
<link rel="stylesheet" href="css/bootstrap.css"/>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/animations.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</head>
<body>
<li>
Show People
</li>
<div ng-view></div>
</body>
</html>
Then I try to load people.html that is on partials directory, using routing on app.js:
'use strict';
// Declare app level module which depends on filters, and services
var myApp = angular.module('myApp', ['ngRoute', 'filters', 'services', 'directives', 'controllers']);
myApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/people', {
templateUrl : 'patials/people.html',
controller : 'PeopleController'
}).otherwise({
redirectTo : '/people'
});
}]);
If I replace the ng-view part on my index.html with my template file content, everything displays fine, so I dont think I have an issue on my controller declarations.
Can you take a look and help me figuring out what's wrong?
Thanks!
You are using var myApp = angular.module('myApp', []); inside your controller. If you add an array as a second parameter in angular.module, the module is automatically created as a new one and overrides the previous one with the same name, so the config is not working anymore, because in your code it is defined on a different module.
Just change the code in the PeopleController definition from
var myApp = angular.module('myApp', []);
to
var myApp = angular.module('myApp');
and it should work
edited plunk:
http://plnkr.co/edit/bK9vHSPxKmijhlLPS5C5?p=preview
EDIT: i arranged the files so the JS file is the last one.. but its still not working
The result when I open this up in firefox is simply {{message}}
I've named the files: html.html and js.js
HTML file
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>
Javascript file
var app = angular.module('app', []);
abc.controller('abc', function($scope){
$scope.message = 'booya';
});
Your controller should be defined as:
app.controller('abc', function($scope){
$scope.message = 'booya';
});
You have mentioned abc.controller. It seems where the issue is
You need to load js.js after angularjs, which means that your should look like:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"> </script>
<script src="js.js", type='text/javascript'></script>
You dont have a body or a ngController. And you should change the order of your js files, as follows:
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js.js", type='text/javascript'></script>
</head>
<body ng-controller="abc">
{{message}}
</body>
</html>