Getting Started with AngularJS

javascript
angular

#1

AngularJS is a popular JavaScript framework that lets you write client-side web applications as if you had a smarter browser.

There are several ways to get started with Angular, all of which will work just as they would locally. You may follow these steps to create an AngularJS application using the official project template:

  • Create a workspace and choose the PHP type (though most workspace types will work)
  • Open a Terminal, or using the pre-existing one at the bottom
  • Remove unnecessary files.
$ rm -rf * .c9
  • Clone Angular and install necessary packages.
$ git clone https://github.com/angular/angular-seed.git angular-seed
$ cd angular-seed
$ npm install
  • Prepare your app to run.
$ mv package.json package.json.bak
$ jq '.scripts.start="http-server -a $IP -p $PORT"' package.json.bak > package.json
  • Run your app.
$ npm start
  • Open up your application preview URL by clicking Preview > Preview Running Application and then go to app/index.html

Now you’ve got an Angular app up and running and you can continue making changes from here!


Cannot run AngularJS tutorial as it runs in the tutorial
Tutorials - Table of Contents
How to troubleshoot a frozen application preview
#2

A post was split to a new topic: Reload application doesn’t reflect latest code


#3

Hello,

I have the question about your article : Getting Started with AngularJS
I did all steps which described in your article, installed chocolatey https://chocolatey.org/install but when I am trying to execute
jq ‘.scripts.start=“http-server -a $IP -p $PORT”’ package.json.bak > package.json
or
jq ‘.scripts.start=“http-server -a localhost -p 8000”’ package.json.bak > package.json
I am getting the error :
**jq: error: syntax error, unexpected INVALID_CHARACTER, expecting $end (Windows cmd shell quoting issues?) at , line 1:
’.scripts.start=http-server -a $IP -p %PORT’
jq: 1 compile error
**

Could you please give an idea what it could be?
I am using Windows 10 x64

Thank you


#5

i dont have a app/index.html directory… any ideas?


#6

So I got the quickstart working, but the http-server seems to be caching the files. I changed the app.component.ts and transpiled it, but it’s still showing the previous version… I even killed all node and npm processes, restarted the workspace, and searched for “My First” to see if I could find it anywhere. How do I fix this? If you can only do a “write once” development process then we’re going to have a bad time.


#7

The command to create the new package.json file drops a key parameter from the ‘start’ script. To disable caching, you need to include ‘-c-1’. The command line I used also retained the path './app as the starting point so that I don’t need to navigate to the initial index.html page.

jq '.scripts.start="http-server -a $IP -p $PORT -c-1 ./app"' package.json.bak > package.json

However, if you’ve already run the command, just manually edit the package.json file so that the line reads as:
"start": "http-server -a $IP -p $PORT -c-1 ./app",


#8

@gelogenic Thanks. I had that in there but for some reason it didn’t seem to be working. I removed the ./app though because the index.html is in the main directory, not the ./app directory. If I add it, then I get a directory listing.


#9

Should this also be working with the Angular2 Quickstart (the 5minute one)? I"m having some trouble getting it to run properly following these instructions.


#10

Hi @ericklind did you find a solution to this?
Thanks


#11

Hey @codemode I didn’t. I gave up on the project because running meteor (which I was using for the backend) on c9 is a pain and would rarely work. I’ve been learning React and found it to be much more enjoyable and useable. I wish I could be of more help!


#12

I got Angular 2 running this week on a Blank Workspace using Angular CLI. It displays the “app works!” message (ie, their hello world example).

To set this up run the following in the c9 console:

npm install -g angular-cli
ng new myapp
ng serve --host 0.0.0.0 --port 8080 --live-reload-port 8081

#15

That worked for me.
I’m moving code form a cloned course repository that I developed on.
Now I have to move the code onto my own repository.
That repository included an angular seed that was dated too.
I don’t like the seed concept because the seed has to keep up with the code base changes in Angular 2.

I have an Express app the runs fine which I start from server.js pretty lightweight.

I chose to use the angular2-cli which built an app that had a serve.js file but found it difficult to modify
the URL part. It kept defaulting to localhost and I was never able to see the ‘App Works!’ until now.
Whatever gets me there. I’m more concerned about the application code anyway not the setup but
its always an interesting hurdle to use a build tool and get what was built to start on Cloud 9.


#16

Hi, I tried this but got errors:
/home/ubuntu/.nvm/versions/node/v4.6.1/lib/node_modules/angular-cli/node_modules/@ngtools/json-schema/src/schema-class-factory.js:34
result.push(…indices);
^^^

SyntaxError: Unexpected token …
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions…js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (/home/ubuntu/.nvm/versions/node/v4.6.1/lib/node_modules/angular-cli/node_modules/@ngtools/json-schema/src/index.js:3:30)
at Module._compile (module.js:409:26)
at Object.Module._extensions…js (module.js:416:10)


#17

The error is related to Node version. For latest angular-cli you need Node > v6.9.0.

You can install a newer version with a command like this: nvm install v7.7.0


#18
$ ng serve --host 0.0.0.0 --port 8080 --live-reload-port 8081
The option '--live-reload-port' is not registered with the serve command. Run `ng serve --help` for a list of supported options.
The "@angular/compiler-cli" package was not properly installed.
Error: The "@angular/compiler-cli" package was not properly installed.
    at Object.<anonymous> (/home/ubuntu/workspace/node_modules/@angular/cli/node_modules/@ngtools/webpack/src/index.js:14:11)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/ubuntu/workspace/node_modules/@angular/cli/tasks/eject.js:10:19)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)

This is what I got…


#19

ok for me now koriolano … thks!


#20

any suggestion for following warning deprecations:

![dep-warning|690x222]

In the case, if the picture is not readable :wink:

npm WARN deprecated bower@1.8.0: …psst! While Bower is maintained, we recommend Yarn and Webpack for new front-end projects! Yarn’s advantage is security and reliability, and Webpack’s is support for both CommonJS and AMD projects. Currently there’s no migration path, but please help to create it: https://github.com/bower/bower/issues/2467
npm WARN optional dep failed, continuing fsevents@1.1.2
npm WARN engine webdriver-manager@10.3.0: wanted: {“node”:">=4",“npm”:">=3"} (current: {“node”:“4.7.3”,“npm”:“2.15.11”})
npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue


#21

is there any suggestion how to avoid the angular seed?


#22

This worked - Thanks
$ ng serve --host $IP --port $PORT --disable-host-check
Then URL https://yourworkspace-yourusername.c9users.io:8080/


#23

One of the biggest challenges with node.js and a UI like Angular or React is the confusion over builds, configuration and consistent method of the server execution. The line command overrides are a way to work around growing issues. I’m not complaining because angular_CLI does wonders as a build tool. Its easy to get lost with all the changes as the versions increase. Things that worked fail and there is very little documentation. We all really just want to focus on learning Angular and not fart around with node server problems. You get to a point where you just keep patching node up and praying that you can still work on your Angular code. It shouldn’t be that way though really.