quattro_4 scribble

scribble 落書き (調べた事をただ落書きする)

AngularJS tutorial #3

  • Routing
    • Application routes in Angular are declared via the $routeProvider
  • The App Module
    • app/js/app.js
      • var phonecatApp = angular.module('phonecatApp', ['ngRoute', 'phonecatControllers']
      • phonecatApp.config(['$routeProvider',
        • $routeProvider.when('/phones', {
          • templateUrl: 'partials/phone-list.html',
          • controller: 'PhoneListCtrl'
        • }).when('/phones/:phoneId', {
        • }).otherwise({
          • redirectTo: '/phones'
    • _app/index.html`
      • <script src="lib/angular/angular-route.js"></script>
      • <div ng-view></div>
    • app/js/controllers.js
      • var phonecatControllers = angular.module('phonecatControllers', []);
      • phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',
      • phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams',
    • app/partials/phone-detail.html
      • <img ng-src="{{phone.images[0]}}" class="phone">
      • <li ng-repeat="img in phone.images">
  • Experiments test for Nexus S
    • expect(repeater('ul.phone-thumbs img').count()).toBe(4);
  • Custom Filter
    • angular.module('phonecatFilters', []).filter('checkmark', function() {
    • angular.module('phonecatApp', ['phonecatFilters']).
    • <dd>{{phone.connectivity.infrared | checkmark}}</dd>
      • json "connectivity": { "gps": true,
    • unit test (angular.mock.inject())
      • inject(function(checkmarkFilter) { expect(checkmarkFilter(true)).toBe('\u2713');
  • built-in Angular filters
    • {{ "lower cap string" | uppercase }} -> LOWER CAP STRING
    • {{ {foo: "bar", baz: 23} | json }} -> { "foo": "bar", "baz": 23 }
    • {{ 1304375948024 | date }} -> May 3, 2011
    • {{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} -> 05/03/2011 @ 7:39AM
    • <input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}
  • Switch images in detail page
    • $scope.setImage = function(imageUrl) { $scope.mainImageUrl = imageUrl; }
    • <img ng-src="{{img}}" ng-click="setImage(img)">
  • XHR requests
    • <script src="lib/angular/angular-resource.js"></script>
    • app/js/services.js
      • var phonecatServices = angular.module('phonecatServices', ['ngResource']);
      • phonecatServices.factory('Phone', ['$resource',
        • query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
      • in controller query: {method:'GET', params:{phoneId:'phones'}, isArray:true}
        • when the data arrives, the view will automatically update
        • before $http.get('phones/phones.json').success(function(data) { $scope.phones = data; });
    • test this.addMatchers({ toEqualData: function(expected) {
      • expect(scope.phones).toEqualData([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
  • ngAnimate
    • jQuery is used for JavaScript animations (include this before angular.js)
      • AngularJS does not yet support jQuery 2.x
    • <script src="lib/angular/angular-animate.js"></script>
    • angular.module('phonecatAnimations', ['ngAnimate'])
    • with CSS Keyframe Animations
      • Add CSS transition animation code
      • .phone-listing.ng-move.ng-move-active,
      • The ng-enter class is applied to the element when a new phone is added to the list and rendered on the page.
      • The ng-move class is applied when items are moved around in the list.
      • The ng-leave class is applied when they're removed from the list.
      • classes on animations
        • a "starting" class that represents the style at the beginning of the animation
        • an "active" class that represents the style at the end of the animation
      • good support for CSS transitions and CSS animations, IE9 and earlier do not
    • Animating ngClass with JavaScript
      • ng-class="{active:mainImageUrl==img}">
      • The addClass and removeClass callback functions
        • addClass : function(element, className, done) {

step 7 - step 12

Githubのdiffをリンクしてるところとか良い

stepの大きさも適度で、こんなにスムーズにすすめられたチュートリアルは初めてだ
当然Angularのシンタックスとかデザインの魅力もある

いくつかのrails関連gem

詳細