Tag: javascript

Posted on

Getting started with AngularJS (notes)

Sharing some personal notes from getting started with and learning AngularJS (from working through the AngularJS Tutorial).

AngularJS is added to an HTML template with the ng-app directive. Where placed in the html means it’s applied to that element and it’s children:

<html ng-app="appname">

Reference to controller:

<body ng-controller="ExampleCtrl">

Reference values from Controller in HTML template:

{{ variablename }}

Iteration directive – repeats the element, e.g. on an <li>:

<li ng-repeat="item in items">

Text-based filter on matching items – only includes text matches on value of query:

<li ng-repeat="phone in phones | filter:query">

Skeleton Controller:

var exampleApp = angular.module('exampleApp', []);
exampleApp.controller('ExampleCtrl', function ($scope) {

//$scope is passed as arg and can be referenced here
//e.g. this sets var example on $scope to be referenced in template
$scope.example = "hello";
});

Sample, simplest case AngularJS app: https://github.com/kevinhooke/SimpleAngularJSExample

Posted on

Using bower for webapp package management: ui-date

Looking for a calendar widget to use with my AngularJS app, I found this one. This is also the first library I’ve come across where I’ve needed to use bower to install it for me. I’ve seen and used bower as part of the AngularJS tutorial, but this is my first experience using it out of necessity.

I already have node.js installed for the AngularJS tutorial, so installed bower globally using:

sudo npm install -g bower

and then installed the angular-ui date picker with:

bower install angular-ui-date --save

Following the rest of the steps to include the dependent js and css files, add the ui-date directive to an input field… and that was easy, now I have a jQuery UI date picker!

Posted on

AngularJS Tutorial – notes (1)

Random notes from following through the AngularJS tutorial here.

My first time (several months back) working through part of the tutorial I struggled getting node.js up and running on Windows. Useful thread and comments on this post here.

Installing on Mac OS X, no problems.

Useful Tutorial Steps – Tools Install and Setup

(not intended to be a comprehensive set of steps, just mainly for myself to backtrack and see what I’ve done so far in the tutorial)

Install git (already have)

Clone the tutorial source project:

git clone --depth=14 https://github.com/angular/angular-phonecat.git

Download and install node.js from here.

npm install – install the development tools.Note: the tutorial is not specific where you run this, but you must run this inside the clones angular-phonecat dir.

Useful scripts setup with the tutorial project:

  • npm start : start a local development web-server
  • npm test : start the Karma unit test runner
  • npm run update-webdriver : install the drivers needed by Protractor (run this once, and first before running Protractor)
  • npm run protractor : run the Protractor end to end (E2E) tests

Interesting note: no issue with the default config on Mac OS X and running the dev server on port 8000. This was an issue on my Windows machine and needed to change the default port to something other than 8000.

Errors Starting npm run protractor

All the other scripts ran first time for me, but protractor would not start, giving an error about ELIFECYCLE. Seems similar to this issue. I ran these to steps:

npm update
npm run update-webdriver

but then the error changed to something more verbose, about couldn’t find an .exe file:

util.puts: Use console.log instead
Using ChromeDriver directly...
[launcher] Error: Could not find chromedriver at /Users/kev/angularjs/angular-phonecat/node_modules/protractor/selenium/chromedriver.exe

A quick Google found this issue, and the steps described by jpaljasma fixed the issue:

  • edited package.json in the root of the tutorial project, changed devDependencies.protractor to be “*”, removed node_modules, ran npm install and npm run update-webdriver

Now the e2e tests supplied with the project run as expected.

Posted on

Getting started with the AngularJS tutorial on Windows – issues

Here’s a quick summary of specific issues and workarounds I’ve run into so far:

  • Running ‘npm install’ and get: “Error: ENOENT, stat ‘C:\Users\[user id]\AppData\Roaming\npm”

This appears to be something removed in the node.js Windows installer. If you create the npm dir in the location above, this fixes this issue, and/or running the node.js prompt with admin privs in Windows. Covered here.

  • “Error: ENOENT, no such file or directory 'c:\[some path]\package.json'“

The Angular.JS tutorial steps don’t mention that you need to cd into the cloned angular-phonecat dir after you’ve grabbed it from github. Maybe this would be obvious if you’re already familiar with node.js and npm, but cd’ing into the cloned tutorial dir fixes this issue for me. Similar to this issue.

  • ‘npm start’ throws errors re binding to 0.0.0.0 and port 8000

I’m not sure if this was because something was already running on port 8000 on my Windows box, but similar to the comments on the logged comments here, if you follow the steps to edit the package.json file, you can change the bind address and/or port before starting the server. Changing from 8000 to 8080 seemed to fix it for me.

Proudly powered by WordPress