AngularJS, The Basics – By Brandon Wilhite

AngularJS, The Basics

By Brandon Wilhite

Agenda

1. When to use it (or not)

The answer might be "Yes" when...

The answer might be "No" when...

Embedded inside another platform

ex. Dynamics CRM forms

Reconsider, options?

• Host static site in virtual sub-directory
• Host on another server/runtime platform such as MVC
• For the above, use the platform sdk, service endpoints, etc.
• Keep SPA-like behavior to a minimum and design around traditional post-back behavior
• Use something else

Keep in mind browser compatability

• AngularJS 1.2 supports IE8 (1.3 does not)
• Fun fact: ~50% of Angular team's CI build time was running tests for IE8
• AngularJS 2.0 will only support IE10+
• Release in 2015/16, support for 1.3 will be for another 1.5-2 years
• Google has over 1600 internal apps written in 1.x
• They're talking about a migration story (now)

2. General Design Considerations

Project Structure

Q: Where do I put my SPA in an MVC project?

A: In a top-level folder (if SPA is main part of application)

Q: How do I organize my code?

There used to be two schools of thought

1. By Layer

controllers/
    homeController.js
    loginController.js
directives/
    usersDirective.js
    ordersDirective.js
filters/
services/
    userService.js
    orderService.js
    loginService.js
partials/
    home.html
    login.html
    users.html
    orders.html
app.js

Q: How do I organize my code?

2. By Feature

orders/
    orders.html
    orders.js
    orders-directive.js
    order-service.js
users/
    users.css
    users.html
    users.js
    users-directive.js
    user-service.js
home/
    home.js
    home.html
    login.html
    login.js
components/
    i18n/
    	i18n-service.js
        i18n-filter.js
    identity/
    	identity-service.js
app.js
					

Q: How do I organize my code?

A: By Feature

Highlight the important, minimize the unimportant

Also a good rule of modeling, in general

Extra Resouces:

• Google's recommendation
• https://github.com/yeoman/generator-angular/issues/109
• http://www.artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/

Dependency Management

• Dependencies are enforced
• Loading them is not
• Yes, you can use Require.js

Finally

Prefer standard web technologies as much as possible

Let the front-end model be the front-end model

3. The Framework

Pieces of a SPA

The Framework

The Framework

• angular.module()
• app
• controllers

The Framework

directives and templates, i.e. ng-* + {{}}

• They can appear as attribute name, tag name, comments, or class name

• <my-dir></my-dir>
  <span my-dir="exp"></span>
  <!-- directive: my-dir exp -->
  <span class="my-dir: exp;"></span>

• As attributes they can be named different ways

• <span ng-bind="name"></span>
  <span ng:bind="name"></span>
  <span ng_bind="name"></span>
  <span data-ng-bind="name"></span>
  <span x-ng-bind="name"></span>

The Framework

Some common directives:

• ng-model
• ng-repeat
• ng-controller
• ui-view tag

• <ui-view></ui-view>

• ng-repeat
• ng-href
• ng-include

• <div ng-include="'/SPA/LOBApp/shell/navbar.html'"></div>

The Framework

• $scope (See SafeApply)
• routing (community preference is ui-router)
• services
  • retrieve by declaring a dependency on the module at the module level and a dependency on the service at the .controller()/.service()/.whatever() level
  • 4 ways to create, but 2 common ones
  • Interesting Example: Service, Controller
• $http

Resources for this presentation

• Presentation found at https://github.com/JediMindtrick/AngularTheBasics
• Demo app at https://github.com/JediMindtrick/AngularTheBasics-Demo
• Gists at https://gist.github.com/JediMindtrick
• Built with the excellent reaveal.js by Hakim El Hattab