Angular Not Working

zoom · December 3, 2013, 6:08am

Finished chapters 3 and 4 of the the tutorial but have no Angular functionality. In chapter 2’s Desktop Browser Testing section I was already not able to get the following to work.

“Try dragging the center content to the right (works with the mouse as well) to expose the left menu. Smooth like butter!”

Ok, so I continued to build the rest of the app. I added the whole dist/js/angular directory under the app’s www/js directory but nothing. Actually, just the black header bar at the top of the page that says “Projects” is ever visible.

This result is the same in the Chrome and Safari browsers using the local server and also on the Note II when I use the “cordova run android” command.

Why is Angular not working?

jprichardson · December 3, 2013, 7:18am

So is it not working in the Android emulator? Is it working on your local desktop browser?

anunay · December 3, 2013, 8:26am

Make sure the following JS were loaded properly:

<script src="js/angular/angular.js"></script>
<script src="js/angular/angular-animate.js"></script>
<script src="js/angular/angular-route.js"></script>
<script src="js/angular/angular-touch.js"></script>
<script src="js/angular/angular-sanitize.js"></script>
<script src="js/ionic-angular.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/app.js"></script>

Thanks

zoom · December 3, 2013, 2:26pm

Right, the Todo app is not working in the desktop Chrome or Safari browser and also not working on the Note II Android device. In all situations all I see in the black header with the title Projects along the top.

zoom · December 3, 2013, 2:30pm

Here is what the desktop server logs from hello/www:

python -m SimpleHTTPServer 8000
Serving HTTP on 0.0.0.0 port 8000 …
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET / HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET /css/ionic.css HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET /js/ionic.js HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET /js/angular/angular.js HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET /js/angular/angular-animate.js HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET /js/angular/angular-route.js HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET /js/angular/angular-touch.js HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET /js/angular/angular-sanitize.js HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET /js/ionic-angular.js HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] code 404, message File not found
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET /cordova.js HTTP/1.1” 404 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 08:28:47] “GET /js/app.js HTTP/1.1” 200 -

slevr · December 3, 2013, 3:06pm

It’s not finding cordova.js … check it’s existence and location.

RT

zoom · December 3, 2013, 4:44pm

Here is where cordova.js is and is not and the results of new tests:

------------------- BUILD TODO APP FOR NEW TESTS

cd /Users/SM/Desktop/projects/devAPIS/hybrid-iconic/hello

cordova build
Generating config.xml from defaults for platform "android"
Preparing android project
Compiling app on platform “android” via command "/Users/SM/Desktop/projects/devAPIS/hybrid-iconic/hello/platforms/android/cordova/build"
Platform “android” compiled successfully.

------------------- TEST RUN IN BROWSER FROM APP WWW

NOTE : the cordova.ja file does not exist within this directory

cd /Users/SM/Desktop/projects/devAPIS/hybrid-iconic/hello/www

○ → python -m SimpleHTTPServer 8000
Serving HTTP on 0.0.0.0 port 8000 …
1.0.0.127.in-addr.arpa - - [03/Dec/2013 10:31:27] “GET / HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 10:31:27] code 404, message File not found
1.0.0.127.in-addr.arpa - - [03/Dec/2013 10:31:27] “GET /cordova.js HTTP/1.1” 404 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 10:31:27] “GET /js/app.js HTTP/1.1” 200 -

RESULT : only get the black header at top of page with the title “Projects”

------------------- TEST RUN IN BROWSER FROM BUILT WWW

NOTE : the cordova.ja file does exist within this directory

cd /Users/SM/Desktop/projects/devAPIS/hybrid-iconic/hello/platforms/android/assets/www

○ → python -m SimpleHTTPServer 8000
Serving HTTP on 0.0.0.0 port 8000 …
1.0.0.127.in-addr.arpa - - [03/Dec/2013 10:21:41] “GET / HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 10:21:42] “GET /js/app.js HTTP/1.1” 200 -
1.0.0.127.in-addr.arpa - - [03/Dec/2013 10:21:42] “GET /cordova.js HTTP/1.1” 200 -

browsers alert message: gap:[“PluginManager”,“startup”,“PluginManager1374989797”]

RESULT : the browser window becomes unresponsive

slevr · December 4, 2013, 1:59pm

I haven’t ran through the guide myself so not 100% sure, but seems cordova/config related, not Ionic. Have you included any cordova plugins?

cordova plugin add org.apache.cordova.device
cordova build

also does same thing happen when using

cordova emulate

You can also look into using the ripple-emulator

max · December 4, 2013, 3:47pm

I’m going through the tutorial right now and will see what the issue is here. Cordova won’t exist in the browser test, since it gets included dynamically by cordova.

zoom · December 4, 2013, 4:27pm

I’ve followed each of the steps in section 2 of the tutorial, so both the cordova.device and cordova.console are added to the project.

Just tried to emulate with the following:

cordova emulate
Generating config.xml from defaults for platform "android"
Preparing android project
Running on emulator for platform “android” via command “/Users/SM/Desktop/projects/devAPIS/hybrid-iconic/hello/platforms/android/cordova/run” --emulator
Platform “android” deployed to emulator.

Result was a white screen with the black title bar mis-aligned in the upper left corner and no text for the word “projects” was showing.

zoom · December 4, 2013, 4:54pm

Just tested with the Ripple Emulator and only get the black header with the word “Projects” visible. Nothing else. The ripple emulator says it is using cordova 2.0.0, do I need to upgrade that. If so how is that done?

max · December 4, 2013, 6:43pm

Hey @zoom. I wonder if you aren’t just missing something small that is making everything not work. What might help is putting the code up into a github repo and just sharing it so I can take a look.

I did just go through and update the guide since some stuff had changed. Sorry if you ran into an issue that was just a lapse in our docs, we hope that happens less as we get more stable.

zoom · December 4, 2013, 9:04pm

Sure, look for the singular “hello” repository under zoomclub on github. All files I’m working with here should be there now. It will be good to learn what the issue is.

Really like the Ripple Emulator, maybe your tutorial can add an aside on how to set it up with the latest Cordova version and how to make best use of Ripple?

slevr · December 5, 2013, 3:40pm

@zoom not sure how far you got, but your index.html is incomplete. Most noticeable is not having angular bootstrapped or a controller defined - in your body tag per the guide. Other missing content as well - side-menus, pane

@max I can see where the guide jumps around a bit with the code and not real clear what is changing/where at times. editTasks() for example is there, then gone, but never coded in the controller. Do you have the finished Todo app code available that is referenced in the guide somewhere? Worst case one could use it to help identify issues.

zoom · December 5, 2013, 6:24pm

Please let me know when the guide is ready to go, then I’ll take another stab at it.

There should be definite points in the guide where things are tested to see if they work before moving on. Those test locations in the guide can offer possible aside debug advise as required.

For instance, when asked to drag the center content to reveal the side menu, I had no idea what needed to be clicked on, etc. because with only a blank screen at that point in the guide, both Iconic and the user of Iconic were setting themselves up for a bewildering failure, if it just happened to not work as expected.

In my case, I ended up bumbling right past it thinking to myself, “man, are I ever stupid or else my device is”. Mean while, the guide just showed a big empty screen. It might be best to put a temporary visual bullseye in the content at this stage to show what needs to be dragged.

Anyways, it was at this point in the guide that things started to go awry, it is the first important test of AngularJS so it should not not work. Although trivial in the total feature set of the app being built it is likely the most important test to have passed.

max · December 5, 2013, 11:49pm

Hear hear. I’ve got some ideas on how to make the guide better now, and I definitely will put up the finished code repo. Thanks for your feedback

Stay tuned…

alexey · January 22, 2014, 9:12pm

Hello Max!
I tried to set up an example to run on my Win7 machine, but it does not work as you described. I think there might be something wrong in my code… When I access a website or deploy it to the emulator I only get a blank page, although all the html and javascript is there. But I get this error in the javascript Error: [$injector:unpr] Unknown provider: ModalProvider <- Modal.
Here is a link to the github: https://github.com/alexeysviridov/ionic
Thanks!

johnlee · February 20, 2014, 1:55am

Hi, I am facing the same problem. I cannot get pass “Chapter 3: Starting our App” because this “Try dragging the center content to the right (works with the mouse as well) to expose the left menu” doesn’t seem to work.

All I see is a black top bar with the title “Projects”.

Output from terminal:

Serving HTTP on 0.0.0.0 port 8000 ...
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /css/ionic.css HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /js/ionic.js HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /js/angular/angular.js HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /js/angular/angular-animate.js HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /js/angular/angular-route.js HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /js/angular/angular-sanitize.js HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /js/angular-ui/angular-ui-router.js HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /js/ionic-angular.js HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2014 10:04:33] code 404, message File not found
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /cordova.js HTTP/1.1" 404 -
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /js/app.js HTTP/1.1" 200 -
127.0.0.1 - - [20/Feb/2014 10:04:33] "GET /js/angular/angular-touch.js HTTP/1.1" 200 -

Output from Safari Error console:

[Warning] Invalid CSS property declaration at: * (ionic.css, line 4865)
[Warning] Invalid CSS property declaration at: * (ionic.css, line 5818)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (cordova.js, line 0)
[Error] Error: [$compile:ctreq] Controller 'sideMenus', required by directive 'sideMenuContent', can't be found!
http://errors.angularjs.org/1.2.10/$compile/ctreq?p0=sideMenus&p1=sideMenuContent
getControllers@http://localhost:8000/js/angular/angular.js:6056:40
nodeLinkFn@http://localhost:8000/js/angular/angular.js:6225:49
compositeLinkFn@http://localhost:8000/js/angular/angular.js:5634:25
compositeLinkFn@http://localhost:8000/js/angular/angular.js:5637:24
compositeLinkFn@http://localhost:8000/js/angular/angular.js:5637:24
publicLinkFn@http://localhost:8000/js/angular/angular.js:5539:45
http://localhost:8000/js/angular/angular.js:1304:27
$eval@http://localhost:8000/js/angular/angular.js:11936:28
$apply@http://localhost:8000/js/angular/angular.js:12036:28
http://localhost:8000/js/angular/angular.js:1302:21
invoke@http://localhost:8000/js/angular/angular.js:3708:22
doBootstrap@http://localhost:8000/js/angular/angular.js:1300:20
bootstrap@http://localhost:8000/js/angular/angular.js:1314:23
angularInit@http://localhost:8000/js/angular/angular.js:1263:14
http://localhost:8000/js/angular/angular.js:20589:16
trigger@http://localhost:8000/js/angular/angular.js:2342:9
http://localhost:8000/js/angular/angular.js:2613:14
forEach@http://localhost:8000/js/angular/angular.js:310:24
eventHandler@http://localhost:8000/js/angular/angular.js:2612:12 <ion-pane side-menu-content="">
	(anonymous function) (angular.js, line 9400)

I tested on iOS emulator and Safari Browser, same result. I have check the guide multiple times. Copied and paste the code. But still doesn’t work. @max Could you help me please?

On a side note, under “Chapter 3: Starting our App”, we are asked to change the content to this first,

<body>
  <ion-side-menus>
    <ion-pane ion-side-menu-content>
    </ion-pane>
    <ion-side-menu side="left">
    </ion-side-menu>
  </ion-side-menus>
</body>

then to this after,

<body ng-app="todo">
  <ion-side-menus>

    <!-- Center content -->
    <ion-pane side-menu-content>
      <header class="bar bar-header bar-dark">
        <h1 class="title">Todo</h1>
      </header>
      <ion-content has-header="true">
      </ion-content>
    </ion-pane>

    <!-- Left menu -->
    <ion-side-menu side="left">
      <header class="bar bar-header bar-dark">
        <h1 class="title">Projects</h1>
      </header>
    </ion-side-menu>

  </ion-side-menus>
</body>

If you notice <ion-pane ion-side-menu-content> has changed to <ion-pane side-menu-content>, which is right?

max · February 20, 2014, 2:12am

Ah, we just pushed a new Ionic release a day or so again. Which version of Ionic are you using? Also you are right that it should be ion-side-menu-content. I just fixed that. Thanks!

johnlee · February 20, 2014, 2:28am

@max I just installed ionic yesterday using npm install -g ionic.

ionic@0.9.16
ionic-0.9.24

Fixing <ion-pane ion-side-menu-content> help to solve the [Error] Error: [$compile:ctreq] Controller 'sideMenus', required by directive 'sideMenuContent', can't be found! error in Safari Error Console, though there is still the cordova.js not found error (which I think is not important when testing on browser).

But still, I only see a black bar with the title “Project”, cannot do any left side menu sliding.

Topic		Replies	Views
SlideMenu problems on ToDo tutorial tutorials	6	2091	January 4, 2016
My App is works on web browser and emulator but not on Mobile device ionic-v1	7	5665	February 5, 2015
AngularJS isn't working on device app ionic-v1	0	544	May 21, 2016
iOS not working, Android / Browser working ionic-v1	0	439	June 17, 2016
Stuck in Ionic getting started tutorial tutorials	5	1499	October 29, 2014

Angular Not Working

Related topics