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">
- app/js/app.js
- 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,
- json
- 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) {
- jQuery is used for JavaScript animations (include this before angular.js)
step 7 - step 12
Githubのdiffをリンクしてるところとか良い
stepの大きさも適度で、こんなにスムーズにすすめられたチュートリアルは初めてだ
当然Angularのシンタックスとかデザインの魅力もある
いくつかのrails関連gem
詳細