Month: April 2015

Posted on

Getting Started with AngularJS (pt 3): understanding $scope

I’m working through a number of sources to help me get up to speed with AngularJS:

Looking at each of these different learning sources is interesting because they all take a slightly different approach, and focus on different key areas. It’s interesting which areas they cover first, and which they leave to later.

Pro AngularJS for example spends half the book walking you through building a complete app end to end, explaining basics as it goes, but then doesn’t get into details until the second half of the book where it digs deeper into each topic area.

The official AngualrJS online tutorial takes a similar approach, walking you building an app step by step with minimal explanation as it goes, but it seems to cover the key basics. Interestingly this tutorial bakes in unit testing and end to end testing right from the start, which I though was very interesting to cover the test tools as an integrated part of development, whereas Pro AngularJS doesn’t get to cover unit testing until the last chapter of the book, which is my only criticism of the book so far.

$scope

The topic I wanted to cover in this post is $scope. As it allows you to create your domain model properties and functions and share between the view templates and your controllers, it seems a rather critical topic, although I don’t think the official tutorial really describe how where it is used controls the visibility between different controllers, and similarly the Pro AngularJS book doesn’t get into details until chapter 13.

On the otherhand, the Beginner to Expert in 7 Steps gets into a great explanation of it’s usage in Step 2. I’m not going to try and summarize their article here as they do a great job, so if you’re like me and learning AngularJS and wondering exactly how $scope is used to control scope… go and take a read of part 2 of their series.

 

Posted on

Getting Started with AngularJS (pt 2): views and ngRoute

Second part of my notes learning AngularJS (first part is here).

Angular handles multiple views in your Single Page Application by adding the ng-view directive at the point where you want your views inserted, e.g.

<div ng-view></div>

The logic to handle URL hash fragments is implemented using $routeProvider to map view template and controller pairs with each hash fragment that your app recognizes. For example:

var simpleApp = angular.module('SimpleApp',
  [
    "ngRoute",
    "SimpleControllers"
  ]);

simpleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
    when('/', {
      templateUrl: 'page1.html',
      controller: 'Page1Controller'
    }).
    when('/page2', {
      templateUrl: 'page2.html',
      controller: 'Page2Controller'
    }).
    when('/page3', {
      templateUrl: 'page3.html',
      controller: 'Page3Controller'
    }).
    otherwise({
      redirectTo: '/'
    });
  }]);

An example working app is here: https://github.com/kevinhooke/SimpleAngularJSExample-ngRoute

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

angular-seed and node.js http-server for local development

Angular-seed is a skeleton AngularJS project with a recommended folder structure and configuration including all the recommended development tools, jasmine and karma for unit tests, Protractor for end-to-end tests, and node.js for your dev server. Check out the project here.

If you’ve already installed node.js then you may notice in the readme for angular-seed it mentions that they have configured a test webserver using node, but you can also install this as a global module and use it elsewhere. This is a useful and quick way to spin up a test server in a given directory to support development testing. Install the server globally with:

sudo npm install -g http-server

and then start it up in a directory that you want to be the root, with:

http-server
Proudly powered by WordPress