AngularJS: Getting Started - angularjs

So I am trying to emulate the example "Hello !" given on the Angular website here: http://angularjs.org/ under the section The Basics.
I have placed the following file in my my-user-name directory which contains the angular.js directory that is installed when you clone the Angular repo as per the site's instructions.
<!doctype html>
<html ng-app>
<head>
<script src='js/angular-1.0.0rc6.js'></script>
</head>
<body>
<input type="text" ng-nmodel="name">
<h2>Hello {{name}}!</h2>
</body>
</html>
I am running the angular server via grunt webserverwhich I run from my home directory path and access the above html file by typing http://localhost:8000/angular.html But I get a blank page. I realize that the path js/angular-1.0.0rc6.js doesn't mean anything in the context of my home directory in that there is no js directory in my home dir and similarly no angular-1.0.0rc6.js lying anywhere around those environs. I just copied that path-name from the example. What is the standard protocol in terms of where the script files are located relative to where you develop your angular apps?
Thank you!

There's so many possibilities that I'd nudge you in a slightly different direction to get started. Check out Yeoman (http://yeoman.io).
Yeoman is a nice way to learn because, after running it (which just takes typing 'yo angular' on the command line once Yeoman is installed), it gets you started with a small working app that you can experiment with and it scaffolds up a nice overall base (code/test scaffold, tools, ...) to build from. And it even uses grunt, as you did, to launch your app (you'll just type grunt server and your app should appear in a browser (with live reload working - which is a cool time saver).
Yeoman should save you from having to figure out the kinds of things you are now- is my file in the right location? is my server pointing to the right place? etc... All taken care of by yeoman.
Here's a tutorial showing how to install Yeoman and install Angular: http://www.sitepoint.com/kickstart-your-angularjs-development-with-yeoman-grunt-and-bower/
You'll see it's only a handful of commands.
In case you'd like to dive in more, here's a talk posted by the Angular team about using Yeoman with Angular: http://www.youtube.com/watch?v=XOmwZopzcTA

Related

gh-pages displaying a blank page instead of project page

I'm trying to deploy my first react app and I followed the link below to deploy it on gh-pages. When using Git Bash I didn't get any error message, assuming that it worked. However, when I open the link through settings, it just shows a blank page. What am I doing wrong? Thank you in advance.
Here is the link to my repository: https://zerhar.github.io/todo-app/
Link to how to deploy a react app to Git Hub Pages: https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom
If I "view-source" https://zerhar.github.io/todo-app/ I see that the JavaScript script tags are not pointing to the correct path.
For example, here is one of the script tags which links out to this dead link:
<script src="/Zerhar/todo-app/static/js/2.15fea075.chunk.js">
It needs to be adjusted, so the link becomes this:
<script src="/todo-app/static/js/2.15fea075.chunk.js">
I'm not quite sure where the script tags are being setup as I didn't see them listed here but that would be the first thing to try to fix.

Electron + AngularJS Views not found

I am trying to develop a desktop application using Electron. I am also using AngularJS.
The problem I am running into is that when I create a custom directive, and load a templateUrl, the view doesn't load and the console says it doesn't exist. Yes, the path is correct, I am sure of it.
The problem is that the application is already running index.html, so it can't load the second file. Needless to say, I am not experienced enough to solve this problem on my own.
I know that Electron uses node on the backend, so I suppose setting routes and/or setting a path to my static files might resolve the problem, but I don't know how to do it.
I have searched the whole web for a solution, but I couldn't find a clear answer.
One way you could easily do it, is by adding your template as an inline template on the angular side, for example in your index.html:
<script type="text/ng-template" id="temp1.html">
....
</script>
Then you can reference it from your directive, like templateUrl: temp1.html.
Otherwise, you could also use a module bundler. Webpack has a ng-template loader which does that for you. Gulp and Grunt also have equivalents
Another thing to try, if you need to reference paths from the js side, is to use __dirname nodejs variable. Here an example

Eclipse Angular JS HTML file doesn't give Completion feature

I could not get completion for my angular js eclipse based file. I know there could be lot of tutorials for setting up proper angular js for eclipse. But i read and followed the same and didn't worked still.
I also followed official link-> [Angular JS Eclipse Github setup link][1]
I installed, “Angular JS” from “Eclipse->Help Menu->Eclipse Marketplace”
It got installed and restarted.
Then, Eclipse->New->Static web project
Then, Convert the project to Angular. Right click Project, Configure-> Convert to Angular JS project
Then, Adding new html files. Right click Project, New->HTML file
Simple code:
<!DOCTYPE html>
<html lang="en-US" ng-app>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div>
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
It works fine. Runs in the browser well.
My problem is, why does not it show the completion help when I type on "ng-" and use control + space in mac eclipse ? When I move cursor on "ng", it gives help of "div" tag rather than "ng" help. I want to just type "ng-" and get the list of available methods by just press control + space in mac eclipse
I can understand that there is some angular installation problem. But, none of the existing solution solved my issue.

Integrating youtube-direct-lite with angularjs app

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.

How to include ext-js calendar in jsp?

I am new to EXT JS environment. I am working on a dynamic java project in eclipse indigo where i want to use ext-js calendar in one of my jsp.I saw the EXT_JS calendar demo from downloaded 'ext-4.1.1' sdk(index.html file in ext-4.1.1a\examples\calendar).
I want to create a .js file as like ext-js calendar page. So for that i followed the path given in
http://loianegroner.com/2010/11/spket-setting-up-eclipse-ide-for-ext-js-and-jquery-development/ to integrate ext-js in eclipse.
But now when i copy index.html to my webcontent folder then it is not working(Originally it is showing nothing). But when i copy the entire ext-js source code to my workspace web content then running the index.html file in example/calendar folder of ext-4.1.1a giving me required result.But I don't think this as a solution.
I could not find any way also how to start to do my task.
So Pls anybody help me here...
Regards :
Dev
When nothing shows up on the screen, it is commonly a case where the ExtJS library isn't loaded. Without seeing the code, it's hard to pinpoint the issue.
Using Chrome Dev tools or Firebug for Firefox, take a look at the console and/or network output.
The files you're looking for will be included in the <head> section of your index.html. There should be ext-all.js or possibly ext-all-debug.js at a minimum, plus the style sheets.
If this is your issue, then you need to include the proper paths to the ExtJS library. This can be the local installation, or you can use a CDN. For example:
<script src="http://cdn.sencha.com/ext-4.1.1-gpl/ext-all.js"></script>

Resources