Tech Notes – Page 44 – Kev's Development Toolbox

April 8, 2015

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.

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

April 7, 2015

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

April 7, 2015

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

April 6, 2015

Installing Nvidia drivers on Linux Mint 17.1

Booting the Mint Live DVD on a HP Pavilion with an AMD Phenom quadcore, I get to the desktop but it starts lagging, and is barely responsive. Selecting the compatibility mode boot option gets me to a lower res desktop but without the lagging issue. After I installed to my hd using compatibility mode, when booting up for the first time I ran into exactly the same issue.

At the Grub menu, if I edit the boot option and add nomodeset, then again, I can boot into a low res with no lag. This desktop has a Nvidia graphics card, so I tried following the instructions here, but I couldn’t get these steps to work, every time I ran the Nvidia installer, it kept telling me that the nouveau drivers were still loaded.

This page suggested to install via ‘sudo apt-get install nvidia-304’ – this approach seemed to download all the deps, build local, install, setup and configure, all in one go. When I rebooted, all looked good, and no need to manually add the nomodeset at the grub menu. Success! So far very impressed with the slickness of the Mint Cinnamon desktop!