use expressions within your HTML • Javascript like code • Used for small operations in the HTML page Expressions are nice for small operations, for real applications, we have something more powerful <div>1+1 = {{1+1}}</div>
Use the data available in the scope (more on that later) • Create the DOM of the fly Let's have a look at an example: ngRepeat. It iterates on a collection in the scope to create the DOM <div> <div ng-repeat="user in users"> <h3>{{user.name}}</h3> <p>{{user.description}}</p> </div> </div>
a new <div> has been created with all its children <div> <div ng-repeat="user in users"> <h3>{{user.name}}</h3> <p>{{user.description}}</p> </div> </div>
directives that can be combined ngShow let you hide elements that do not validate a given predicate Here, the users that do not have the gender "female" have generated a hidden <div> <div> <div ng-repeat="user in users" ng-show="user.gender == 'female'"> <h3>{{user.name}}</h3> <p>{{user.description}}</p> </div> </div>
like ngSwitch With those directives, you can create the basic structure of your web application easily <div> <div ng-repeat="user in users" ng-show="user.gender == 'female'" ng-switch="user.house"> <h3>{{user.name}}</h3> <p>{{user.description}}</p> Sigil: <img src="images/targaryen.gif" ng-switch-when="Targaryen"> <img src="images/stark.gif" ng-switch-when="Stark"> <img src="images/lannister.gif" ng-switch-when="Lannister"> </div> </div>
of the AngularJS standard library are named "ngMyAwesomeDirective" • You can use them with "ng-my-awesome-directive" • Some directives can be used as attributes, comments, DOM elements name or even CSS classes And of course, you can create your own directives (we will create a very basic one later) <div> <div ng-my-awesome-directive></div> <ng-my-awesome-directive></ng-my-awesome-directive> <div class="ng-my-awesome-directive"></div> <!-- directive: ng-my-awesome-directive --> </div>
binding between the data in your scope and your views • Most directives that are using expressions are creating a bidirectionnal data binding for you • You can create manually new bindings with the directive ngModel The changes are visible in real-time in all the expressions <div> <div ng-repeat="user in users"> <h3>{{user.name}}</h3> <p>{{user.description}}</p> Edit Description: <textarea rows="5" cols="50" ng-model="user.description"> </div> </div>
that can change the way your data are displayed • Usage: {{expression | filter}} You can also easily create your own filters <div> <div ng-repeat="user in users"> <h3>{{user.name | uppercase}}</h3> <p>{{user.description}}</p> Edit Description: <textarea rows="5" cols="50" ng-model="user.description"> </div> </div>
• Angular handles the History management • You can easily bind your views to the routes All you need to do is • Creates the page that will hold the structure of the application • Bind the page to a specific AngularJS module thanks to ngApp • Select where the views will be included with ngView • Writes the different views • Binds the view and the routes
will load the partial view in the DOM thanks to ngView • The views can be created in other HTML files • We will see later how we can bind a view to a route <!DOCTYPE html> <html> <head><title>AngularJS</title></head> <body ng-app="AngularJSModule"> <div ng-view>Loading...</div> <!-- vendors --> <script src="angular.min.js"></script> <!-- modules --> <script src="app.js"></script> <!-- controllers --> <script src="users.js"></script> </body> </html> <div> <div ng-repeat="user in users"> <h3>{{user.name | uppercase}}</h3> <p>{{user.description}}</p> </div> </div> index.html users.html
You can define a new module very easily thanks to the function "module' You just have to declare the name of the module and an array containing the name of the modules that you wre depending on Inside of a module, you can create: • controllers • services • filters • directives var angularJSModule = angular.module('AngularJSModule', []);
that a part of your application will be manage by a module var angularJSModule = angular.module('AngularJSModule', []); <!DOCTYPE html> <html> <head><title>AngularJS</title></head> <body ng-app="AngularJSModule"> <div ng-view>Loading...</div> <!-- vendors --> <script src="angular.min.js"></script> <!-- modules --> <script src="app.js"></script> <!-- controllers --> <script src="users.js"></script> </body> </html> index.html app.js
framework are using dependency injection (DI) For example, in order to configure the routes of your module, you will have to inject the service $routeProvider in your configuration function. All the components that you will create will specify their dependencies thanks to DI This way, you will have a collection of small specialized components that can be easily tested var angularJSModule = angular.module('AngularJSModule', []); angularJSModule.config(function ($routeProvider) { // do something });
Angular uses the name of the parameters of the function This solution will not work with the minification of the code Each time you can use dependency injection in Angular, you can use this way instead The string '$routeProvider' would not change with the minification of the code var angularJSModule = angular.module('AngularJSModule', []); angularJSModule.config(function ($routeProvider) {}); var angularJSModule = angular.module('AngularJSModule', []); angularJSModule.config(['$routeProvider', function ($routeProvider) {}]);
your application, you will use the $routeProvider If the end user visit the URL "http://www.ourdomain.com/#/users", the view "views/users.html" will be injected in the page, otherwise the view "views/404.html" will loaded. var angularJSModule = angular.module('AngularJSModule', []); angularJSModule.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/users', { templateUrl: 'views/users.html', controller: 'UsersCtrl' }); $routeProvider.otherwise({ templateUrl: 'views/404.html' }); }]);
for the view In order to provide the data to the view, the controller can be injected with the scope of the view In the module, we have binded the view, the route and the controller, so the controller can receive the scope of the view when the route is modified var angularJSModule = angular.module('AngularJSModule', []); angularJSModule.controller('UsersCtrl', ['$scope', function ($scope) { // do something }]); <div> <div ng-repeat="user in users"> <h3>{{user.name}}</h3> <p>{{user.description}}</p> </div> </div>
the views to which they are binded. A controller can add data and function in its scope and then they will be accessible in the view. In our case, we have used in the view a variable named “users" which was created in the scope by the controller “UsersCtrl". A scope can have child scopes which can see the content of the parent scopes. Each directive can create and manage its own scope. The scope also comes with additional operations that can be quite useful to build your application
the changes on the data of the scope from the controller. With the operation "$watch", a controller can add a listener on an expression of the scope. var angularJSModule = angular.module('AngularJSModule', []); angularJSModule.controller('UsersCtrl', ['$scope', function ($scope) { $scope.users = []; $scope.$watch('users', function (newValue, oldValue) { console.log('The value of "users" has changed'); }, true); }]);
to a system of events and listeners on the scope. You can use the operation "$broadcast" in order to fire an event on a specific scope, then the event will be transmitted to the selected scope and all its children. With $on, you can receive the event. If you want to send an event to the whole application, you can use the root scope by injected the service $rootScope. var angularJSModule = angular.module('AngularJSModule', []); angularJSModule.controller('UsersCtrl', ['$scope', function ($scope) { $scope.$on('AngularJSModule.Event', function () { console.log('An event "AngularJSModule.Event" has been fired!'); }); $scope.$broadcast('AngularJSModule.Event'); }]);
be available to the view. If you have some code that you want to re-use or that you want to separate from a controller, use a service and inject it thanks to dependency injection. Services can be injected into other services, filters, controllers or directives to build more complex components. var angularJSModule = angular.module('AngularJSModule', []); angularJSModule.factory('UsersServer', [function () { return {}; }]);
can create your service and return it manually You can then define the public API of your service and the private functions and variables There are other ways to create your services but we won't see them here. var angularJSModule = angular.module('AngularJSModule', []); angularJSModule.factory('UsersServer', [function () { var privateFunction = function () {}; var usersServer = {}; usersServer.publicFunction = function () { privateFunction(); }; return usersServer; }]);
a bit complex to create an advanced directive. I won't explain here all the options available to create a directive, but here is a simple example. var angularJSModule = angular.module('AngularJSModule', []); angularJSModule.directive('whereIsThePower, [function () { return { template: '<p>Power resides where men believe it resides. No more and no less</p>', replace: true }; }]); <div where-is-the-power></div>
DOM from a controller! respect the separation of concerns, the data in the controller, the behavior in the directives it's easier to test and easier to maintain
presentation, Angular is a MVC framework with a strong opinion on how things should be done. It helps you build an application • testable with dependency injection • maintainable with small specialized components • with reusable components • well architectured (data in controllers, behavior in the directives, utility stuff in services)
Angular application, you should have a look at those tools too • Batarang - chrome extension to debug Angular applications • Bower - dependency management tooling for front end applications by Twitter • Grunt - tasks management (minification, autoreload, SASS or CoffeeScript compilation) • Yeoman - generate preconfigured kickass web applications • Karma - Angular tests runner • Angular-ui - collection of Angular directives (datepicker, Google Maps, Bootstrap) • Restangular - improved Angular services for REST communication