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
Related
I am working on an angularjs site - angular is already included. We have code that loops through js scripts in a specific folder and adds them to a bundle, so the script references get emitted on the main page (we are using single page architecture).
I have not explicitly tried to invoke the code, it is currently just getting included, yet when I bring up my site, I now get the following js errors:
Uncaught ReferenceError: require is not defined
and it's happening here:
var gulp = require('gulp'),
I did not use bower to install - I just pulled the source and dropped the folders into the folder that gets parsed for emitting the js scripts.
Is there something else I need to install?
shershen, that is what I came to realize.
I removed all the misc files in the folder and just left the Chart.min.js and the angular-chart.min.js files and then I was good to go.
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?
I was unable to find any open source video recorder that can be integrated with an angularjs app. I came across Youtube-direct-lite but I have no idea how to integrate this with an angular app. I am trying to host my own instance of youtube-direct-lite
I have already configured the config.js as been told in this doc. Should I just copy paste all the js, css files to my project and use the index.html as a partial to display the recorder?
about configuring direct lite:
in config.js enter your developer-key and client-id.
then read the README file
download nodejs console
browse to the folder with the source in it
run this command : node r.js -o app.build.js
and it'll build the minified source for you, then copy and paste that source into your website and use the index.html & admin.html as the
and i'll work just fine.
about angular with direct lite:
I've seen so far only one implementation for it that is in youtube/dev/demos
http://www.youtube.com/yt/dev/demos.html#/upload
if you opened the sources, you'll find that it is uses angular, and it applies ytdirectlite, but I don't know how to use it and I still cannot find the opensource for it.
When I want to build my app with SenchaCmd I get the following error:
Failed to find file(s) for depdency reference /workspace/SmartphoneClient/app.js::ExtRequire::Ext.ux.picker.DateTime
This is how my app.js looks:
Ext.Loader.setPath({
'Ext': 'touch/src',
'CatchMyPain': 'app',
'Ext.ux': 'extensions/ux'
});
Ext.require('Ext.ux.picker.DateTime');
Ext.require('Ext.ux.field.DateTimePicker');
The two files DateTime and DateTimePicker are in the correct folders under extension/ux/field/DateTimePicker.js and extensions/ux/picker/DateTime.js
The app works fine with the Chrome Browser and on Safari mobile Browser. There I get no Messages or Errors in the Console.
Where could be my error?
Because Sencha CMD build cannot automatically resolve the paths from the loader. However it uses classpath. This should be defined in the config file (as as comma seperated list). I haven't tested it thought because I use the sencha compile command (see bellow)
From the docs:
The sencha app build command knows where to find the source of your application due to the app.classpath configuration value stored in ".sencha/app/sencha.cfg". By default, this value is:
app.classpath=${app.dir}/app
Adding directories to this comma-separated list informs the compiler where to find the source code required to build the application.
Yours should be: app.classpath=${app.dir}/app, ${app.dir}/extensions/ux
If you use the sencha compile command:
sencha compile -classpath=./extensions/ux -classpath=./app page -in index.html -out test.html
I had to add the directory into the classpath of .sencha/app/sencha.cfg
app.classpath=${app.dir}/app.js,${app.dir}/app,${app.dir}/extensions
this way the senchaCMD found all the files.
When I 'compile' my extjs MVC app (version 4.1.1a, CMD ver 3.0.2.288), an all-classes.js file gets created however none of my custom code (controllers, views etc) gets included. They get dynamically loaded when I load the html page. I have another app that works fine. I can't post my hundreds of lines of code. What can I look for?
I tried the CMD build in debug mode and it seems to process and find all my app files, it just doesn't include in all-classes.js.
I tried
sencha -d app build
and
sencha compile -classpath=app/app.js,app,ext/src page -in=index.html -out=build/index.html
I used 'sencha generate app' to create the original directory structure etc.
I have exactly the same issue.
Maybe as a hint, I've got another project where I generated the whole application, and the build. And here, with the build-impl.xml, I've got everything I need in all-classes : my controllers, models, etc
Not sure why but it seems if I explicitly do a 'requires' on my controllers in my app.js file then the compile works
Ext.Loader.setConfig({ enabled: true });
Ext.require([
'AM.controller.myController1'
, 'AM.controller.myController2'
.
.