Thanks to

John Papa

HotTowel AngularJS App HotTowel AngularJS App - Plural Sight

Thanks to

Thorsten Hans

ShareCoffee GitHub Library

Dependency Injection

• Using this, custom modules can be injected just like adding assemblies on the server side code. This makes life little easier design MVC/MVVM based projects with separation of concern, modularity etc. An Analogy to server side code is represented below

HTML Templating and Directives

• Over the past few years, Single Page App’s (SPA’s) are gaining of a lot of traction from front end developers and end users. HTML templating feature in Angular makes it possible to easily switch the HTML in SPA’s.

• Directives are markers on a DOM element which attach a special behavior to it.

• Simple directives like ng-model,ng-repeat,ng-show, etc are building blocks of an AngularJS App

TwoWay Binding

• Fellow Silverlight developers can understand the complexity of two-way binding using propertychange events back in the old days. But AngularJS databinding makes this right OOB.

Community Support

• Google continues to develop and maintain the library. Large community of developers has embraced the framework so ample support is available on Stackoverflow and AngularJS official site.

Error Handling

• Troubleshooting and error handling JS apps is pain. AngularJS apps can be configured with Logging and Error handling capabilities.

Where I Learned AngularJS

1. Basics of AngularJS in 60 minutes - Dan Wahlin
2. Large Scale webapps using AngularJS - JohnPapa

3. Large Scale SharePointApps using AngularJS - Andrew Connell

4. More OpenSource videos follows

Office 365 - AngularJS

Office 365 + Office OWA using Angular

ShareCoffee - Jumpstart

Popular AngularJS Testing frameworks

• Test Tools

  • Protractor
  • Karma
  • Server-Side testing

• Javascript Engines

  • Selenium
  • PhantomJS

• Languages

  • Jasmine
  • Mocha
  • QUnit

What tool to use?

• Testing Page loads and End to End testing

  • Use Protractor
  • A Web Driver can run a full integration test through any given URL
  • No server side dependencies

• Unit testing

  • Use Karma
  • Test files should be hosted inside the server

• Load Testing

  • Use Server side testing

Jasmine Specification

• "Describe" defines functional blocks
• "It" describes specification
• "Expect" defines expectations

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    browser.get('http://www.angularjs.org');

    element(by.model('yourName')).sendKeys('Julie');

    var greeting = element(by.binding('yourName'));

    expect(greeting.getText()).toEqual('Hello Julie!');
  });

Jasmine features

• Locating HTML

  • element.By.className('redBtn')
  • element.By.css('.redBtn')
  • element.By.id('loginButton')
  • element.By.linkText('Go Home')
  • etc

• Methods

  • clear()
  • SendKeys()
  • click()
  • getLocation()
  • etc

Features

1. Allows running tests targeting remote addresses, No longer need to have test files on the server being tested
2. Built on WebdriverJS and Selenium Server
3. New syntax when writing tests
4. Can use Jasmine or Mocha to write test suites

How it Works

1. Runs on NodeJS server
2. Protractor uses WebDriver API to send test cases to Web Server
3. Web Server interpretter compiles it down to JSON and passed it to browser

Installation

1. Install NodeJS server
2. 
3. Create a NodeJS project in Visual studio
4. Install Protractor via Node Package Manager (NPM) (This is similar to NUGET)
5. Install Selenium Server and update Web-Driver
6. For manual downloads http://selenium-release.storage.googleapis.com/index.html

# Install protractor from NPM. Run this on the node project folder
npm install protractor@1.3.1 --save-dev

#Run this from the project folder to update web driver
node_modules\.bin\webdriver-manager update --ie

#Add Screenshot capabilities to protractor
npm install protractor-html-screenshot-reporter --save-dev

Configuration

1. Selenium Server Configuration
2. Where your spec files are located
3. Browser capabilities required by spec files
4. The Base Url for your spec files
5. Jasmine Node Configuration

Example Configuration

// An example configuration file.
exports.config = {
  // Do not start a Selenium Standalone sever - only run this using chrome.
  chromeOnly: true,
  chromeDriver: 'node_modules/protractor/selenium/chromedriver',

  //baseURL

 // baseUrl: 'https://spbreed02.sharepoint.com/sites/appdev/_layouts/15/appredirect.aspx?instance_id={7000E10A-58A6-4668-AEDC-0B1FD6091280}',

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome'
  },

  // Spec patterns are relative to the current working directly when
  // protractor is called.
  specs: ['angularapp_spec.js'],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
    }

};

Running Test Scripts

1. Create a NodeJS project in Visual Studio
2. Install protractor and update the web driver
3. Run the configuration file

#Run the sample configuration file 
node_modules\.bin\protractor chromeOnlyConf.js

AngularJS End to End Testing with Protractor

Introduction to AngularJS Unit Testing