AngularJS

a introduction

Hello world

Run

Basic introduction

<html ng-app>
    <head>
        <script src="../js/angular.min.js"></script>
        <script>
        function HelloController($scope) {
            $scope.greeting = { text: 'Hello' };
        }
        </script>
    </head>
    <body>
        <div ng-controller='HelloController'>
            <input ng-model="greeting.text" />
            <p>{{greeting.text}}, World</p>
        </div>
    </body>
</html>

Controller, $scope($rootScope), binding, ng-model

Shopping Cart

Run

More interesting introduction

<html ng-app>
    <head><title>Your Shopping Cart</title></head>
    <body ng-controller='CartController'>
        <h1>Your Order</h1>
        <div ng-repeat='item in items'>
            <span>{{item.title}}</span>
            <input type='number' ng-model='item.quantity' />
            <span>{{item.price | currency}}</span>
            <span>{{item.price * item.quantity | currency}}</span>
            <button ng-click='remove($index)'>Remove</button>
        </div>
        <script src='../js/angular.min.js'></script>
        <script type="text/javascript">
            function CartController($scope) {
                $scope.items = [
                    {title: 'Paint pots', quantity: 8, price: 3.95},
                    {title: 'Polka pots', quantity: 17, price: 12.95},
                    {title: 'Pebbles', quantity: 5, price: 6.95}
                ];
                $scope.remove = function(index) {
                    $scope.items.splice(index, 1);
                }
            }
        </script>
    </body>
</html>

Binding expression, Functions, add or remove items, ng-click, ng-repeat, $index, Filters

A-Mail

Run

A formal Angular App, router & template

index.html

<html ng-app='AMail'>
    <head>
        <script src="../js/angular.min.js"></script>
        <script src="../js/angular-route.min.js"></script>
        <script src='controller.js'></script>
    </head>
    <body>
        <h1>A-Mail</h1>
        <div ng-view></div>
    </body>
</html>

simple index page, ng-view

controller.js

var aMailServices = angular.module('AMail', ['ngRoute']);
aMailServices.config(function($routeProvider) {
    $routeProvider.
        when('/', {controller: 'ListController', templateUrl: 'list.html'}).
        when('/view/:id', {controller: 'DetailController', templateUrl: 'detail.html'}).
        otherwise({redirectTo: '/'});
});
var messages = [{
    id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',
    date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],
    message: 'Hey, we should get together for lunch sometime and catch up. There are many things we should collaborate on this year.'
}, {
    id: 1, sender: 'maria@somecompany.com', subject: 'Where did you leave my laptop?', date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],
    message: 'I thought you were going to put it in my desk drawer. But it does not seem to be there.'
}, {
    id: 2, sender: 'bill@somecompany.com', subject: 'Lost python', date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],
    message: 'Nobody panic, but my pet python is missing from her cage. She doesn\'t move too fast, so just call me if you see her.'
}];
aMailServices.controller('ListController', function($scope) {
    $scope.messages = messages;
});
aMailServices.controller('DetailController', function($scope, $routeParams) {
    $scope.message = messages[$routeParams.id];
});

Module, ngRoute, config(actually run after all controller are defined), $routeProvider, get angular variable, multiple views & templates, multiple controller, $routeParams

detail.html

<div><strong>Subject:</strong> {{message.subject}} </div>
<div><strong>Sender:</strong> {{message.sender}} </div>
<div><strong>Date:</strong> {{message.date}} </div>
<div>
    <strong>To:</strong>
    <span ng-repeat='recipient in message.recipients'> {{recipient}} </span>
</div>
<div>{{message.message}}</div>
<a ng-href='#/'>Back to message list</a>

list.html

<table>
    <tr>
        <td><strong>Sender</strong></td>
        <td><strong>Subject</strong></td>
        <td><strong>Date</strong></td>
    </tr>
    <tr ng-repeat='message in messages'>
        <td>{{message.sender}}</td>
        <td><a ng-href='#/view/{{message.id}}'>{{message.subject}}</a></td>
        <td>{{message.date}}</td>
    </tr>
</table>

ng-href

Capitalize

Run

Filter

<html ng-app="HomeModule">
    <head>
        <script src="../js/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller='HelloController'>
            <p ng-bind="page.heading | titleCase"></p>
            <input ng-model="page.heading" />
        </div>
        <script type="text/javascript">
            var homeModule = angular.module('HomeModule', []);
            homeModule.controller('HelloController', function($scope) {
                $scope.page = {heading: 'behold the majesty of your page title'};
            });
            homeModule.filter('titleCase', function() {
                return function(input) {
                    var words = input.split(' ');
                    for (var i = 0; i < words.length; i++) {
                        words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
                    };
                    return words.join(' ');
                };
            });
        </script>
    </body>
</html>

user defined filter, ng-bind

Form

Run

Validator

<html ng-app='app'>
    <head>
        <title>Form</title>
        <style>
            input.ng-invalid { color: red; }
            input.ng-valid { color: green; }
        </style>
    </head>
    <body>
        <h1>Sign Up</h1>
        <form name='addUserForm' ng-controller='AddUserController'>
            <div ng-show='message'>{{message}}</div>
            <div>*First name: <input ng-model='user.first' name='firstName' required ng-pattern="/^[A-Z][a-z]+$/"></div>
            <div>*Last name: <input ng-model='user.last' required ng-pattern="/^[A-Z][a-z]+(\s[A-Z][a-z]*)*$/"></div>
            <div>*Email: <input type='email' ng-model='user.email' required></div>
            <div> Age: <input type='number' ng-model='user.age' ng-maxlength='3' ng-minlength='1' min="1"></div>
            <div><button ng-click='addUser()' ng-disabled='!addUserForm.$valid'>Submit</button></div>
        </form>
        <script type="text/javascript" src='../js/angular.min.js'></script>
        <script type="text/javascript">
            var appModule = angular.module('app', []);
            appModule.controller('AddUserController', function($scope) {
                $scope.message = '';
                $scope.addUser = function() {
                    $scope.message = 'Thanks, ' + $scope.user.first + ', we added you!';
                };
            });
        </script>
    </body>
</html>

validator, ng-show, ng-if

Rating

Run

Directive

<html ng-app='RankingApp'>
    <head>
        <style>
            .rating { color: #a9a9a9; margin: 0; padding: 0; }
            ul.rating { display: inline-block; }
            .rating li { list-style-type: none; display: inline-block; padding: 1px; text-align: center; font-weight: bold; cursor: pointer; }
            .rating .filled { color: #21568b; }
        </style>
        <script src='../js/angular.min.js'></script>
    </head>
    <body ng-controller='RankingController'>
        <h1>Rating is {{rating}}</h1>
        <p>
            <h3>Clickable Rating</h3>
            <div fundoo-rating rating-value="rating" max="10" on-rating-selected="saveRatingToServer(rating)"></div>
        </p>
        <p>
            <h3>Readonly rating</h3>
            <div fundoo-rating rating-value="rating" max="10" readonly="true"></div>
        </p>
        <script type="text/javascript">
            angular.module('RankingApp', [])
                .controller('RankingController', function($scope, $window) {
                    $scope.rating = 5;
                    $scope.saveRatingToServer = function(rating) {
                      $window.alert('Rating selected - ' + rating);
                    };
                })
                .directive('fundooRating', function () {
                    return {
                        restrict: 'A',
                        template: '<ul class="rating"><li ng-repeat="star in stars" ng-class="star" ng-click="toggle($index)">\u2605</li></ul>',
                        scope: {
                            ratingValue: '=', // Accept an object
                            max: '=',
                            readonly: '@', // Accept a string
                            onRatingSelected: '&' // Accept a function
                        },
                        link: function (scope, elem, attrs) {
                            var updateStars = function() {
                                scope.stars = [];
                                for (var i = 0; i < scope.max; i++) {
                                    scope.stars.push({filled: i < scope.ratingValue});
                                }
                            };
                            scope.toggle = function(index) {
                                if (scope.readonly && scope.readonly === 'true') return;
                                scope.ratingValue = index + 1;
                                scope.onRatingSelected({rating: index + 1});
                            };
                            scope.$watch('ratingValue', function(oldVal, newVal) {
                                if (newVal) updateStars();
                            });
                        }
                    }
              });
        </script>
    </body>
</html>

Directive(Diff link compile), restrict: E|A|C|M, $watch($digest, $apply)

Fetching Data

Run

Factory

<html ng-app='ShoppingModule'>
    <head><title>Your Shopping Cart</title></head>
    <body ng-controller='ShoppingController'>
        <h1>Shop!</h1>
        <table>
            <tr ng-repeat='item in items'>
                <td>{{item.title}}</td>
                <td>{{item.description}}</td>
                <td>{{item.price | currency}}</td>
            </tr>
        </table>
        <script src='../js/angular.min.js'></script>
        <script type="text/javascript">
            var ShoppingModule = angular.module('ShoppingModule', []);
            ShoppingModule.factory('Items', function($http) {
                return {
                    query: function(callback) {
                        $http.get('/shopping/items').success(callback);
                    }
                };
            });
            ShoppingModule.controller('ShoppingController', function($scope, Items) {
                Items.query(function(items) { $scope.items = items; });
            });
        </script>
    </body>
</html>

$http, promise, Factory(Diff Value, Constant, Provider, Factory, Service, Decorator)

Manipulating Data

Run

RequireJS, Resource

index.html

<html>
    <head>
        <title>Test Resource in Angular</title>
        <meta charset='utf-8' />
        <script type='text/javascript' src='../js/require.min.js' defer async='true' data-main='scripts/main'></script>
    </head>
    <body>
        <div ng-view></div>
    </body>
</html>

requirejs

main.js

require.config({
    paths: {
        angular: '../../js/angular.min',
        angular_route: '../../js/angular-route.min',
        angular_resource: '../../js/angular-resource.min',
        jquery: '../../js/jquery.min',
        domReady: '../../js/domReady.min'
    },
    shim: {
        angular: {
            deps: ['jquery'],
            exports: 'angular'
        },
        angular_resource: ['angular'],
        angular_route: ['angular']
    }
});
require(['angular', 'app', 'domReady', 'jquery', 'angular_route',
    'services/user_service',
    'controllers/root_controller', 'controllers/show_controller', 'controllers/new_controller', 'controllers/edit_controller'],
    function(angular, app, domReady, $) {
        app.config(function($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'views/root.html',
                controller: 'RootController',
                resolve: {
                    users: function(UsersLoader) {
                        return UsersLoader();
                    }
                }
            }).when('/new', {
                templateUrl: 'views/new.html',
                controller: 'NewController'
            }).when('/edit/:id', {
                templateUrl: 'views/edit.html',
                controller: 'EditController',
                resolve: {
                    user: function(UserLoader) {
                        return UserLoader();
                    }
                }
            }).when('/:id', {
                templateUrl: 'views/show.html',
                controller: 'ShowController',
                resolve: {
                    user: function(UserLoader) {
                        return UserLoader();
                    }
                }
            }).otherwise({
                redirectTo: '/'
            });
        });
        domReady(function() {
            angular.bootstrap(document, ['MyApp']);
            $('html').addClass('ng-app: MyApp');
        });
});

requirejs, domReady, angularjs bootstrap

app.js

define(['angular', 'angular_route', 'controllers/controllers', 'services/services'],
    function(angular) {
    return angular.module('MyApp', ['ngRoute', 'controllers', 'services']);
});

controllers.js

define(['angular'], function(angular) {
    return angular.module('controllers', []);
});

services.js

define(['angular', 'angular_resource'], function(angular) {
    return angular.module('services', ['ngResource']);
});

module inheritance

user_service.js

define(['services/services'], function(services) {
    services.factory('User', function($resource) {
        return $resource('/users/:id', {id: '@id'});
    });

    services.factory('UsersLoader', function(User, $q) {
        return function() {
            var delay = $q.defer();
            User.query(function(users) {
                delay.resolve(users);
            }, function() {
                delay.reject('Unable to list all users');
            });
            return delay.promise;
        };
    });

    services.factory('UserLoader', function(User, $q, $route) {
        return function() {
            var delay = $q.defer();
            User.get({id: $route.current.params.id}, function(user) {
                delay.resolve(user);
            }, function() {
                delay.reject('Unable to fetch user ' + $route.current.params.id);
            });
            return delay.promise;
        };
    });
});

$resource, promise

root_controller.js

define(['controllers/controllers', 'services/user_service'], function(controllers) {
    controllers.controller('RootController', function($scope, users) {
        $scope.users = users;
    });
});

new_controller.js

define(['controllers/controllers', 'services/user_service'], function(controllers) {
    controllers.controller('NewController', function($scope, $location, User) {
        $scope.user = new User();
        $scope.save = function() {
            $scope.user.$save({
                name: $scope.user.name
            }, function(user) {
                $location.path('/' + user.id);
            });
        };
    });
});

$location, restful api

show_controllers.js

define(['controllers/controllers', 'services/user_service'], function(controllers) {
    controllers.controller('ShowController', function($scope, user) {
        $scope.user = user;
    });
});

edit_controller.js

define(['controllers/controllers', 'services/user_service'], function(controllers) {
    controllers.controller('EditController', function($scope, $location, user) {
        $scope.user = user;
        $scope.save = function() {
            $scope.user.$save({
                id: $scope.user.id,
                name: $scope.user.name
            }, function(user) {
                $location.path('/' + user.id);
            });
        };
        $scope.remove = function() {
            $scope.user.$remove(function() {
                $location.path('/');
            });
            delete $scope.user;
        };
    });
});

restful api

Extensions

ui-router

Run / Github

Restangular

Restangular.one('users').getList()  // GET: /users
	.then(function(users) {
	  // returns a list of users
	  $scope.user = users[0];   // first Restangular obj in list: { id: 123 }
	});
// Restangular objects are self-aware and know how to make their own restful requests
$scope.user.getList('cars');    // GET: /users/123/cars

// You can also use your own custom methods on Restangular objects
$scope.user.sendMessage();  // POST: /users/123/sendMessage

// Chain methods together to easily build complex requests
$scope.user.one('messages', 123).one('from', 123).getList('unread');
// GET: /user/123/messages/123/from/123/unread

Github

Bindonce

<ul>
    <li bindonce ng-repeat="person in Persons">
        <a bo-href="'#/people/' + person.id"><img bo-src="person.imageUrl"></a>
        <a bo-href="'#/people/' + person.id" bo-text="person.name"></a>
        <p bo-class="{'cycled':person.generated}" bo-html="person.description"></p>
    </li>
</ul>

Github

AngularJS – a introduction – Hello world

bachue

AngularJS – a introduction – Hello world

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

angularjs-intro-slides

AngularJS

a introduction

Hello world

Shopping Cart

A-Mail

index.html

controller.js

detail.html

list.html

Capitalize

Form

Rating

Fetching Data

Manipulating Data

index.html

main.js

app.js

controllers.js

services.js

user_service.js

root_controller.js

new_controller.js

show_controllers.js

edit_controller.js

Extensions

ui-router

Run / Github

Restangular

Bindonce

Thanks

0 0