Angular Not Working


#1

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?


#2

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


#3

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


#4

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.


#5

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 -


#6

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

RT


#7

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


#8

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


#9

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.


#10

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.


#11

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?


#12

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.


#13

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?


#14

@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.


#15

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.


#16

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 :smile:

Stay tuned…


#17

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!


#18

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?


#19

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!


#20

@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.