I am learning angular and wanted to use some modules. I have used a angular module and made it to work on a html page by itself. But When I merged this module into my main html it stopped working. Say for example ng-click is not working. Since this is a third party module and since it did not throw any exception in the console of chrome developer tools I cannot figure out what is the exception or what is causing it not to work
Please advise..
I know this question is generic but if in such scenarios what is the best way to solve the problem
Thanks
Related
I've migrated my angular application from Angular 1.3.15 to Angular 1.5.5. I'm struggling with this for about a day and tried various possible solutions mentioned in the AngularJS Error Reference, checked my code to not contain,
Multiple module definitions for the same moudule
Not contain a controller inside another controller.
Attempting to inject a scope object into anything that's not a controller or a directive.
Also tried checking the dependency issue
Couldn't find any fruitful solution to this, the whole screen seems like broken, like, angular itself hasn't been loaded, things, like interpolations are not resolved to their values.
Help is much appreciated.
Thanks!
The i18nFilter which you are referencing in your application is likely being provided via the angular-localization library.
There are a number of issues raised in the project relating to version compatibility when upgrading the AngularJS version.
I suggest you track down the version you are referencing and upgrade to a supported version for AngularJS 1.5.5
I am currently working on a project using Django and Angular. I am trying to implement Django's Password-Reset app, which seems pretty easy to set up. I followed the instructions and I ran into a peculiar issue that is caused by Angular's routing. I am trying to link to a FormView using
Forgot password?
But it seems that Angular's routing keeps picking up the literal translation of the link
http://127.0.0.1:8000/%7B%%20url%20'password_reset_recover'%20%%7D
This of course causes a routing error to pop up.
Is there anyway I can link to this view without Angular interfering?
Looks like the problem is that Django is not parsing your URL tag in the template. Might want to look into that rather than into Angular
Could you check the a tag in your Developer tools and see what it says? Chances are that it says exactly what the URL is pointing to.i.e. /%7B%%20url%20'password_reset_recover'%20%%7D
Have you added password_reset_recover in your root urls.py?
Hi guys im just setting up a new project for some work im doing trying to get something working quickly to keep momentum up. However i seem to be having a problem with getting Angular Material to load properly. Im using Node and bower to get my modules which seems to be loading them fine.
However when ever im loading up the page my console reports that its hitting an unreachable code after a return statement like the title suggests. this is actually being hit in the angular material js file that is being imported by bower.
I have no idea why this is happening and any help to progress past this point would be brilliant thank you.
EDIT
I possibly have found a fix to the issue I was having. The backend of the web application I was using was controlled by Django and there was a conflict between Angular js and Django in that they were using the same tags to show values for variables. This was stopping Angular Material from instantiating properly. I still get the unreachable code warning but now Material is working as I expect it to.
I hope this helps some people debug the problems they are having when seeing this issue.
Include the minified version of the library. Automatic Semicolon Insertion is different depending on your browser, if the library code has a return statement broken across two lines, it might end up with a semicolon where one shouldn't be. Using the minified version fixes this because the statement won't be broken across lines.
Include this:
<script src="bower_components/angular-material/angular-material.min.js"></script>
Instead of this:
<script src="bower_components/angular-material/angular-material.js"></script>
I'm asking this question coz, the app that I'm testing flows from a non-angular app. I'm my case the whole page is non-angular and it contains a link. On clicking on it opens the new angular view. The problem that I'm facing is that the app is manually bootstrapped. I even added the ng-app under a div and mentioned that as rootElement in the script. However this is throwing an error saying "unable to synchronize with the page. No injector found. The reason maybe that it's not under ng-app. Later when I turn off the synchronization I can't locate elements using their binding values.
I've tried most of the workarounds on net and none of them seems to fix this. Could any of please help
Manually bootstrapped apps are a pain. When you turn off browser synchronization you are telling Protractor that Angular is not and will not ever be present. Because by.binding is Angular-only, and there is no Angular present to bind to, that particular locator isn't going to return an element. I use Protractor for non-Angular apps quite often and it works just fine as long as you don't try to use locators that are Angular-specific. Your options are:
Test all of the non-Angular stuff manually, then the Angular stuff separately
Test everything without the Angular locators
I've run into an issue with an angular app I'm working on. I've defined a controller which adds one variable to the scope. After the page loads, I can see that the scope doesn't have the variable - when I try to inspect it in chrome dev tools, it returns an undefined. I've put a break point in the controller code which initialises the variable and I can see that it is not being hit. I've checked for javascript errors and there are none.
But now I'm stuck - I don't know how to proceed with debugging this issue. Why would a controller that has been specified on the page with an ng-controller directive not be initialised? And what techniques are available for debugging such an issue?
Update: I've already tried batarang - doesn't help. The moment I try to enable inspection in batarang, it reloads the page. I'm able to inspect the scope using techniques specified in ng-book (https://www.ng-book.com/p/Debugging-AngularJS/) but I'm still not making much headway.
Finally figured out the problem: There were 2 issues:
angular auto bootstrap - there were two nested elements in the DOM which were trying to do auto bootstrap. This is not supported according to the documentation.
the angular bootstrap was kicking in before the DOM had finished loading.
So we used requirejs' domready plugin to defer angular bootstrapping till the dom is ready.
Try the chrome extension Batarang, it extends developer tools. Its handy for debugging scopes, models & dependencies.
https://github.com/angular/angularjs-batarang/
https://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfk
UpDate:
Just found this, javascript stack trace Spy-js:
https://github.com/spy-js/spy-js
http://spy-js.com/