Summary
While working on an angular based single page app (Ushahidi's v3 frontend), we stumbled over the following issue.
It occurs only in Chrome, not in Firefox (can't say anything about other browsers right now).
The problem is that an element (in our case: the login button) is not positioned correctly when we move its html into an directive (scenario 2), while it looks as expected when using the HTMl directly inside of the main page template (scenario 1).
The rendered HTML of the whole page is in both scenarios the same.
Reproducing both scenarios
You can reproduce both scenarios easily within about 3 minutes via the following steps (first getting the app running, then describing how to see both scenarios):
Quick app setup
needs only to be done once for both the working and not working state
Prerequisites
have node/npm installed
have gulp and napa installed
(sudo) npm install -g gulp napa
git clone https://github.com/spaudanjo/platform-client.git
cd platform-client
git fetch origin fix_T1107_chrome_layout_bug:fix_T1107_chrome_layout_bug
git checkout fix_T1107_chrome_layout_bug
(sudo) npm install
bower install
napa install
gulp --node-server --mock-backend
open Chrome with http://localhost:8080
Working state (scenario 1, without using directives)
git checkout ca99fdeb4613265063c0f481588c2e34ecd109ed
refresh Chrome
make sure that the top right menu looks like expected (the Login button is on the same line as "Create" and "Workspace")
Not working state (scenario 2, using directives)
git checkout 5fe22a68aea3c8cbf1497dc2c3c7f3d83ab822f3
refresh Chrome
make sure that you recognize the layout issue (the Login button is not placed correctly; see attached screenshot)
Changed files
To easily see the affected files, here is the diff of the commit which moves the directives HTML back again to the main template:
https://github.com/spaudanjo/platform-client/commit/ca99fdeb4613265063c0f481588c2e34ecd109ed
Any hints/ideas?
Related
I am trying to build an application using d3js in WebStorm because I read that it is the best way to organize your AngularJS project.
However, when I start a new project, select AngularJS project there supposed to be a "hello world" example ready where you have your index.html pointing to view1 and then you click view2. But what happens in my case is that when I click run index.html view1 doesn't appear even when I click on the link leading to it or to view2.
Is there a configuration missing ? Do you know how I can correct that ?
Have you done a bower install to download all the dependencies your project needs ?
I have a working (in development) Angular app and I've just got my Grunt distribution script working how I want it to, however when run my app through Grunt and then run it from the distribution folder I just get a blank page, no errors, no logging in console, no missing files in the network tab in Chrome etc, it appears everything loads but nothing happens.
I've run into this issue before during development and thrashed around until it worked, however this is now much more complex due to the minified files in distribution etc.
I'd like to properly diagnose this blank page issue but I'm not sure where to start, it appears that Angular is simply not bootstrapping at all after processing to dist mode.
It appears there is no such thing as a very verbose diagnostic mode for Angular, I've switched to the uniminified and there is nothing reported at all.
I checked the minified html file and my ng-app tag is still there on the html element as it should be so that's not the issue.
Also if I drop to console I can type angular and get back the output for it, so it's there, just not doing anything.
Where to start?
Start with Chrome devtools open when you load the page.
Add $log.debug statements at the top of all your services and controllers.
app.js will not work without the
['paramname1', 'paramname2', function(paramname1, paramname2) {
version (all the other files minify fine with out it.)
I just created a basic sencha app by
sencha generate app --name AndroidDemo --path ../demo
and I viewed it in browser and everything is perfect.
I then followed the instructions here: http://www.sencha.com/blog/android-setup-for-sencha-touch/
and compiled the app with Sencha Cmd and when the emulator opens I only get a blue loading screen.
I also tried compiling/building the app with phonegap on phonegap build site and the build finishes successfully and after loading the app in my andoid device, again I only see the loading page and it stays on this page and the app does not launch.
I'm completely clueless. Need your help friends.
Thanks,
In your app code may be miner syntax error or other error so while app run in emulator check log cat or other option run or app in chrome and check console log. Because loading screen display in case of error as my expression with this.
i'm having the exact same problem..
(currently on windows, btw)
while it's not exactly a solution,
a workaround that i did (out of desperation to see the rest of my app on the emulator):
is to just install it directly to the emulator using the "adb" command.
haven't tried this on a mac, but i'm guessing it's almost the same thing?
after building the app using "sencha" cmd, open cmd/terminal to the build directory.
-assuming you did not change the output location, the apk will be created in your
project root folder under this folder:
"build\native-package-mobile\MYAPPNAME\packager.json\"
make sure the emulator is already running
run the following in command/terminal at the folder where the apk is located:
adb install -r MYAPPNAME.apk
wait for awhile and it should say successfully installed.
run the app in the emulator and hopefully it will go beyond the loading screen.
I don't know why this issue is happening though.
(only started tinkering with android dev/sencha yesterday and it seems to be doing all in it's power to prevent me from running my app. haha)
please share if you find the correct fix for this :)
This usually happens when you build your version and you did not imbed all needed components.
For example, when you use ...
Ext.Image
... in your code.
While running without ...
Sencha app build xxx
... Sencha will grab the component from the touch/src components folder.
But at the time you build the app, it cannot reference to that folder any longer and Sencha will stall.
Please open the console and look out for a warning like this:
[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.MessageBox';
consider adding 'Ext.MessageBox' explicitly as a require of the
corresponding class
You need to add these to the requires section of either App.js or a class where you use the item (here Ext.Messagebox).
Another way to find out what is happening is to run the build code inside the browser and look into the console (so instead of localhost/myapp/index.html you run localhost/myapp/build/{package}/{myapp}/index.html).
There is one other thing that might happen. It’s the scope of async operations.
Like this:
Ext.defer(function() {this.log(‘all good’);}, 500);
this is not the scope of your class.
You need to use:
Ext.defer(function() {this.log(‘all good’);}, 500, this);
Or you might even use ...
Ext.bind()
...to bind the scope to the function.
I am trying to get a login modal showing when I click on login.
I am using bootstrap3, angularJS1.2 and angular-ui0.6
When I click on login, the transparent background of the modal shows but the popup never appears. When I check in the console, I can actually see the code populated but never manages to display it.
I am guessing that it is a problem with 1.2 animation and 0.6 not being up to date but I am not sure (I actually reverted back to < 1.2 and I run into the same problem.
Any idea what may be happening?
There is no support for Bootstrap 3 yet. This worked for me, however: ngEkathuwa.
AngularUI 0.6 does not work with BS3. I have been waiting for this particular fix to continue one of my projects. The modal view is specially broken. We have to wait till 0.7 comes out.
You'll need to build your own ui-bootstrap JS file, from a different branch, and use it instead (the angular-ui team is working on this separate branch to make it compatible with Bootstrap 3).
To build, just follow these steps (adapted from https://github.com/angular-ui/bootstrap/issues/331#issuecomment-25032867)
git clone https://github.com/angular-ui/bootstrap.git
cd bootstrap
git checkout origin/bootstrap3_bis2
npm install
grunt build
You'll find the new ui-bootstrap JS files in the ./dist/ folder.
I've done as described here: http://docs.angularjs.org/tutorial/step_00 but can't run the phonecat example as AngularJS. It runs like a bunch of html files. For example, the app/index-async.html page gives me following error in Chrome's console:
Uncaught Error: No module: myApp
This file contains
angular.bootstrap(document, ['myApp']);
The bootstrap part needs to be called after the element you're bootstrapping to is loaded. You can either put the bootstrap code at the end of your html, or you can use something like document ready from JQuery.
I had the same problem. When loading angular with reguirejs, you have to remove the ng-app directive from the html and add it after calling angular.bootstrap(document, ['myApp']) like this:
$(html).addClass('ng-app');
Check this seed project out: https://github.com/tnajdek/angular-requirejs-seed specifically index.html and app/js/main.js
Make sure your web server is running.
If you are running node.js:
1. Run node scripts\web-server.js to start the web server
2. In your browser, navigate to http://localhost:8000/app/index.html
If you are running some other http server: (I used WAMP for the AngularJS tutorial you listed):
1. Make sure the /angular-phonecat repository was cloned into your wamp/www folder.
2. Navigate in your browser to http://localhost:[port-number]/angular-phonecat/app.
TIPS:
To change directories using WINDOWS COMMAND LINE -
cd /d c:\wamp\www
To change directories using GIT BASH -
$ cd /c/wamp/www
Additional note: In Git Bash, to display the directory you're currently in, use $ pwd