Tag: AngularJS

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
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!

Proudly powered by WordPress