I trying to add a custom filter, but if I use the following code:
angular.module('myApp',[]).filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
But if I do so, I get: "ReferenceError: angular is not defined" in firebug.
The rest of application is working fine, I am using ng-app in a tag div not in tag html, and https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js
You should put the include angular line first, before including any other js file
I faced similar issue due to local vs remote referencing
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="lib/js/ui-grid/3.0.7/ui-grid.js"></script>
As ui-grid.js is dependent on angular.js, ui-grid requires angular.js by the time its loaded. But in the above case, ui-grid.js [locally saved reference file] is loaded before angularjs was loaded [from internet],
The problem was solved if I had both angular.js and ui-grid referenced
locally and as well declaring angular.js before ui-grid
<script src="lib/js/angularjs/1.4.3/angular.js"></script>
<script src="lib/js/ui-grid/3.0.7/ui-grid.js"></script>
Always make sure that js file (angular.min.js) is referenced first in the HTML file. For example:
----------------- This reference will THROW error -------------------------
< script src="otherXYZ.js"></script>
< script src="angular.min.js"></script>
----------------- This reference will WORK as expected -------------------
< script src="angular.min.js"></script>
< script src="otherXYZ.js"></script>
Well in the way this is a single page application, the solution used was:
load the content with AJAX, like any other controller, and then call:
angular.bootstrap($('#your_div_loaded_in_ajax'),["myApp","other_module"]);
As #bmleite already mentioned in the comments, you probably forgot to load angular.js.
If I create a fiddle with angular directives in it, but don't include angular.js I get the exact same error in the Chrome console: Uncaught ReferenceError: angular is not defined
In case you'd happen to be using rails and the angular-rails gem then the problem is easily corrected by adding this missing line to application.js (or what ever is applicable in your situation):
//= require angular-resource
I ran into this because I made a copy-and-paste of ngBoilerplate into my project on a Mac without Finder showing hidden files. So .bower was not copied with the rest of ngBoilerplate. Thus bower moved resources to bower_components (defult) instead of vendor (as configured) and my app didn't get angular. Probably a corner case, but it might help someone here.
I think this will happen if you'll use 'async defer' for (the file that contains the filter) while working with angularjs:
<script src="js/filter.js" type="text/javascript" async defer></script>
if you do, just remove 'async defer'.
If you've downloaded the angular.js file from Google, you need to make sure that Everyone has Read access to it, or it will not be loaded by your HTML file. By default, it seems to download with No access permissions, so you'll also be getting a message such as:
GET http://localhost/myApp/js/angular.js
This maddened me for about half an hour!
Related
I would like to use this library (https://github.com/riichard/boolean-parser-js) (which is really just a function?) in my own project.
My project is contained in a single html file. In one of the functions, I've tried including the following:
var parser = require('boolean-parser');
I get the following error when I include this.
Uncaught ReferenceError: require is not defined
I have installed the library via the terminal, using "npm install boolean-parser". At the same level as my project, I see a file called "node_modules", which contains "boolean-parser".
I'm not sure if this is the right method of referring to the library...
I'm also not sure how to find out what it.
If possible, please explain terminology in your answer(s)-- I have limited background knowledge in this area, as this is essentially my first real web project!
Happy to include code upon request. Feel free to suggest tag additions!
P.S. Could it be a file path problem? Do I need to use something like Browserify?
P.P.S. If I include
<script src="node_modules/boolean-parser/index.js"></script>
then it seems like the library is working, but then I get an error from within it:
index.js:295 Uncaught ReferenceError: module is not defined
at index.js:295
It is because you are making client side project. Here is related question link
Listen, i created simple html page with 2 script tags. First contains src="index.js" which is in the same folder and edited as i said before. Second script tags is:
<script>
console.log(window.module):
</script>
And everything works. Check yourself again.
this is my quote of jquery:
<script src="../js/jquery-1.11.1.min.js"></script>
I have searcher for two hours, this project can work in other pc. In my pc ,it just can't... help!
modal() is not a standard method of jQuery.
You will need to include another library that has a modal() method - such as jQueryUI, or Bootstrap.
If you have included one of those libraries you need to ensure that the URL to the file is correct, and that you have included it after jquery.js.
You already include the bootstrap.main.js but still you have a problem, then, there may be issues of .JS file sequence as the query is the core library file so it is always included a first and other plugins works * (which are depended on jQuery) *
So, My suggestion is to rearrange your .JS files and try once again.
So what am I doing wrong? I included the ng-include and tried every variation and it is not including the file(it keeps returning a 404 in the console), the directory location is as follows:
-App
--Layout
---Partials
----Navigation.tpl.html(File)
--Layout.tpl.html(File)
And the ng-include is located in the layout.tpl.html file:
<div data-ng-include="'layout/partials/Navigation.tpl.html'"></div>
Please note that I am using webpack for this project(that shouldn't matter). I am calling the layout.tpl.html file as the base layout, and the partials are included inside the layout.tpl.html file. Also, I am using vs having a ng-app on the DOM:
angular.element(document).ready(() => {
angular.bootstrap(document, ["app"]);
});
I have worked with angular in the past, and I am at a loss when such a simple task is taking so long time. Also note, when I use the
$templateCache.put('..','..')
and put in html minified string from the navigation.tpl.html with the same directory, it works just fine (but if I use $templateCache.get() or require() from the template location, it doesn't work), but the HTML string is pulling from the cache and I want to be able to update one file vs having to use minified code.
Sorry in advance if I missed something, I am in a rush to get this done, and it should be the simplest thing that is just not working.
Take a look at https://github.com/WearyMonkey/ngtemplate-loader
You should preload your template with the correct key in the $templateCache by requiring it in your bundle.
require('ngtemplate?module=[xx]&relativeTo=/layout/partials/!./layout/partials/Navigation.tpl.html');
That way you can ask for 'Navigation.tpl.html' in ng-include or with templateUrl
I used this code as localhost so that's not the problem.
Used pastebin because this editor was breaking my code for about 10 minutes...
main.js -> http://pastebin.com/gePdrETv
index.html -> http://pastebin.com/ehDCyqN6
route2.html -> http://pastebin.com/4s2gtY4j
route1.html -> http://pastebin.com/RDAGQKPv
I am trying to change the view in index.html in ng-view so that I could see different views (/ change views). But it's not working at all (not even a data bind is working, just showing me the {{ message }})
Thanks in advance.
I think you need to include the following JS as well.
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.js
This is for Angular 1.4.9.
The module ngRoute is defined in this separate JS file, so your Angular application can't even bootstrap I think.
Check your console output, I think you'll see an $injector:modulerr there.
See the documentation which specifically mentions ngRoute.
We have a legacy framework that we're looking to be able to do some major updates to soon. As part of this, we're working at bringing all our library files up to date. During this process, we upgraded angularjs from 1.0.7 to 1.3.13. Suddenly, we're getting a show-stopping error.
Error: [ng:areq] http://errors.angularjs.org/1.3.13/ng/areq?p0=MainCtrl&p1=not%20a%20function%2C%20got%20undefined
The question is: Why does this error happen when we upgrade to the newest library, and how am I supposed to do this now? I will add the most relevant lines of code below, and I can add more as requested, but it's kind of complex and I'm not sure how to break it down to something easy to stick into here.
The error occurs at angular.boostrap() The relevant code shows like so:
angular.module('app',['DataTools','ClientDataTools']);
angular.bootstrap(document, ['app']);
Main Ctrl is defined as such:
function MainCtrl($scope, $compile) {
The file structure is as such:
load.js
run.js
dataTools.js
load / controllers.js
load / config.js
load / ClientDataTools.js
load / libraries.html
The automatically generated html loads up along with the js code found in load.js. This first thing it does is load up libraries.html, which contains the imports for run.js, dataTools.js, controllers.js, and ClintDataTools.js. The code in load.js then calls a function defined in run.js. This function loads config.js and applies the settings there while going through and using jQuery to add angular tags to the form found in the automatically generated html. It then runs the angular.module() and angular.bootstrap() commands.
controllers.js holds the MainCtrl declaration. config.js is just a json string. dataTools.js and ClientDataTools.js holds the directives used by the angular - this error still happens even when removing the directive files, so I don't think they're part of it, but they are included here out of completeness of the issue..
And no, I can't just change the html in the form in the first place. I don't have access to it. It's automatically generated html to which we wish to add intelligent behavior like preventative data checking. It's an automatically generated form that we'd like to work a little more responsively. Please don't recommend just putting the angularjs markup into the html, and please don't ask why we can't touch the original html.
The way of declaring controller with
function MyCtrl() {}
has been deprecated - try declaring like
angular.module("app").controller("MyCtrl", function() {})