Angular

From eBabel wiki
Jump to: navigation, search

Angular.js makes HTML/Javascript templates easy.

Developing apps with Angular 2 on Ubuntu 16.04

Angular CLI

Source: https://cli.angular.io/

Dependencies of angular-cli, in case they are not already installed:

sudo apt-get update
sudo apt-get install autoconf

Install watchman:

git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.7.0
./autogen.sh
./configure
make
sudo make install

Install angular-cli:

sudo npm install -g angular-cli

Create a new Angular 2 app:

ng new name-of-your-app

Tutorial step 2

See the main Angular.js tutorial second step.

Run karma on Windows

The instructions in the tutorial for running unit tests with karma don't work on Windows.

To run the script, use:

test.sh

Because the Linux "." syntax to run a script doesn't apply to running scripts from Windows cmd.

Another issue is with the test.sh script itself.

Let's say you cloned the repository in C:\inetpub\wwwroot\angular-phonecat

#!/bin/bash

BASE_DIR=`C:\inetpub\wwwroot\angular-phonecat\app $0`

echo ""
echo "Starting Karma Server (http://karma-runner.github.io)"
echo "-------------------------------------------------------------------"

karma start ../angular-phonecat/config/karma.conf.js $*

That should work now.

When running test.sh, if the chrome.exe isn't found, located it there (one possible location):

C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

Now update the PATH environment variable:

Update PATH environment variable on Windows 7

  1. Right click on My Computer to get the Properties
  2. Click on Advanced system settings on the left
  3. In the Advanced tab, click on the Environment Variables button
  4. If there isn't a variable already for CHROME_BIN, then create one and give it the correct value of the path where chrome.exe is found.


Display an environment variable

On Windows, display the environment variable value with:

echo %path%

or

echo %chrome_bin%

What to do when the value isn't updated

It's very possible your environment variable has been updated but as long as you have one or several cmd open, you can't see the latest values. Close all cmd instances.

Tutorial step 3: Filtering Repeaters

See the main Angular.js tutorial third step.

Come out of the previous karma: press [CTRL] [C]

This time, to run the "end to end" (i.e. integration) test, browse:

/test/e2e/runner.html

Or in my example, since I setup a local domain pointing at the root of the cloned git repository:

http://phonecat.angular.loc/test/e2e/runner.html

Tutorial step 10: Event handlers

Source: code updated from step 10

To read an input value within the page and use it, try:

<input type="text" ng-model="JouNaam">
<input type="button" ng-click="hello(JouNaam)" value="Hoy">

Note the controller responsible for the view where these input tags are needs to have a hello function:

$scope.hello = function(name) {
   alert('Hoy ' + (name || 'wereld') + '!');
}