- angular 101 -

From Zero to Angular in one session

01 What is Angular?

02 Why angular?

03 best practices

04 angular vs jquery

05 angular basics

06 my first app

07 conclusions

live preview

09

10 credits

my tips

08

01 What is

Angular?

First of all...

what is a framework?

in one word:

a wrapper

is designed to enclose something

like a wrapper of

a candy

hence, Angular is a structural framework for dynamic web apps

angular is what html would have been, had it been designed for applications

some features that makes angular a good choice

100% javascript and client side

We separate the client server, to keep separate data

Reusable components

why make boilerplate code, being able to reuse what already exists? made by you or by other

single page apps

It executes in a single page, thus achieving a user experience closer to a desktop application

all this without refreshing the page or changing the url

MVC architecture

we can divide the code in parts, maintaining the order and reusable code

two way data-binding

It's continuously observing the changes that occur in both the View and the Model and synchronize data between them

what is not angular

Is not for make videogames. there are specific alternatives for that

like panda

or phaser

is not one way data-binding

is not a library, is a framework. a library only serve an specific purpose (slider, animations...)

you're ready to learn why use angular!

02 why

Angular?

why not?

Have a lot of modules made by the community

install and use it

don't do the work who someone else has already done for you

all the tricks that you can need, google has it

Have a lot of documentation and milions of examples in google

google has a solution for your problem because someone had the same

Angular works great with a JSON API delivered from the server

with mean in the back,

delivers better performance than a RoR o Python

write less code

<html ng-app="helloApp">
<body ng-controller="HelloCtrl">
<p>Hello {{name}}! How are you doing today?</p>
<label>Name: </label><input ng-model="name">
</body>
</html>

Lovely, is not it?

var app = angular.module("helloApp", []);
app.controller("HelloCtrl", function($scope) {
$scope.name = "";
});

html

js

in a few minutes you can have a

hello world

working

what for use it?

some examples...

dynamic

like ga.me

beautiful website made

with angular

integrates socket.io for

real-time chat

play social games with

web apps

your friends in pc,

tablet or mobile

dynamic

like lorempicsum

beautiful website made

with angular 1.1.5

dynamic placeholder with

5 different cartoons

Copy the URL by clicking

on the image made

with jquery zclip

website

dynamic

like mealshaker

beautiful ios app made with

angular and cordova

dynamic place to eat using

our location

shake the phone to find

an incredible place

mobile app

(or not)

then, we can view the difference between angular and jquery

03 vs

Angular

jquery

first, this is a comparative to know the difference between the two

let's compare a

in both languages

hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ej Hola Mundo desarrollado en jQuery</title>
</head>
<body>
    <h1>Hola</h1>
        <form>
            ¿Cómo te llamas? <input type="text" id="nombre">
        </form>
    <script src="js/jquery.js"></script>
    <script>
    $(function(){
        var campoTexto = $("#nombre");
        var titular = $("h1");
        campoTexto.on("keyup", function(){
            titular.text("Hola " + campoTexto.val());
        });
    });
    </script>
</body>
</html>

jquery

<!DOCTYPE html>
<html lang="en" ng-app>
<head>
    <meta charset="UTF-8">
    <title>Ej Hola Mundo desarrollado en AngularJS</title>
</head>
<body>
    <h1>Hola {{nombre}}</h1>
        <form>
            ¿Cómo te llamas? <input type="text" ng-model="nombre">
        </form>
</body>
</html>

angular

did you see the ?

difference

<form>
¿Cómo te llamas? <input type="text" id="nombre">
</form>

<form>
¿Cómo te llamas? <input type="text" ng-model="nombre">
</form>

input

angular

jquery

01 script

02

<script>
$(function(){
    var campoTexto = $("#nombre");
    var titular = $("h1");
    campoTexto.on("keyup", function(){
        titular.text("Hola " + campoTexto.val());
    });
});
</script>

not have

jquery

you need around 90% less code to do the same thing with JQuery

angular has implemented ng-model directive: links application data to html elements

second, we're gonna to know when is best to use angular or jquery

if you are building a normal web app with views and you need a little bit of interactivity on the page ...

use

jquery

If you need a lot of interactivity and better user experience ...

use

angular

but you'll need to have a REST API or something similar to consume data from somewhere

angular does everything that jQuery does and much more, but jQuery doesn't do everything that angular does

let's start with

angular

04 basics

Angular

let's start !

how angular runs?

angular will run when the entire page is finished loading

When the page is loaded, Angular will visit each of the elements of your HTML document. If an item contains a directive, it will attach a behavior.

The first directive that angular need to find is the directive

Angular will associate our application with the element where find the directive ngApp

ngapp

remember that angular only will give functionality to their child elements

<body>
    <div id="app" ng-app>
      <h1>Hello from Angular</h1>
    </div>
</body>

<body ng-app>
    <div id="app">
      <h1>Hello from Angular</h1>
    </div>
</body>

this only will affect to div#app

this will affect to body and his child elements

of course, we can define a name for our app instead of use the default one with ngapp

<div id="app" ng-app>

<div id="app" ng-app='myApp'>

in resume

you must put in your html the ngapp directive

otherwise, the app will not run

html have limited tags, what happen if we want a tag?

<weather>

the is for create new dom elements

directives

<weather>

<div weather="sunny">

or

if you look any app made with angular, you will see ng tags

these are directives provided by angular

For example, we can use the directive to tell an element that must execute a function when you click on it

ngclick

<button ng-click="runWhenButtonClicked()"></button>
<div ng-click="runWhenDivClicked()"></div>

shh... there's a lot of directives included in angular!

we use lowerCamelcase to reference to the directive

however, when we use it in html, we use kabob (ng-click)

both refer to the same thing, angular automatically makes the conversion from one to another

directives are what make angular so powerful

We're going to learn to create our own directives later

in resume

The directives make it possible to extend HTML with custom functionality

how do you evaluate data in your html?

we use for that

expressions

<h3>Double the count is: {{ 2 * count }}</h3>

We can set variables, call functions, variables read, do math, etc

We can also use them in our own templates

<a ng-click="shouldShowDiv = !shouldShowDiv">Show content below</a>
<div ng-show="shouldShowDiv">WWill show if <em>shouldShowDiv</em> is true</div>
<div ng-hide="shouldShowDiv">Will hide if <em>shouldShowDiv</em> is not true</div>

how we tell angular where is our application written in angular?

we need to tell using

angular.module()

we can do two main operations when we work with a module:

create a new module or setter

retrieve an existing module or getter

01

02

angular.module('myApp', []);

angular.module('myApp');

can put our app in his stead using ngapp

We may think that a car is a collection of modules

The car consists of separate modules such as seat belts, engine, wheels, etc.

They are working jointly performing individual tasks

our app

module

in resume

a module it's nothing more than a collection of objects that define a specific functionality

we grouped all in a module to reuse it

how do you make your variables accesible from the browser?

for that, we use

$scope

an important detail is: it works in both ways

the view can charge variables and variables can be changed in the view

Scope is the link between views and controllers

.controller('otroCtrl', function($scope){
  $scope.algo = "probando scope...";
  $scope.miDato = "otra cosa..."
});

<p>{{ algo }}</p>

controller

view

we can change scope data from view

<input type="text" ng-model="miDato">

in resume

scope is for share data between the view and the model

how do you define the functionality of the page?

you could use

controllers

every controller has his own scope object

you should use for mantain $rootscope clean

angular.module('myApp')
.controller('HomeController', function($scope) {
  $scope.name = 'Cory';
});

<div ng-controller='HomeController'>
    <p>{{name}}</p>
</div>

it's easy to use

in resume

A controller is a piece of code that connects scopes using models and views

how do you obtain the dependencies?

injecting dependencies

this is how you tell angular which dependencies need to use to facilitate us when we need them

if we have a weather service, and we want to have in our controller ...

// imagina que tenemos algunos servicios...
angular.module('fullstack.services', [])
  // algo de código que define los servicios aqui
  .service('WeatherService', function() {
    // implementa el servicio aquí
  });
);

// y queremos usar estos servicios en nuestros controladores
angular.module('fullstack.controllers', ['fullstack.services'])
  // aquí tenemos el servicio WeatherService disponible
);

we have weatherservice accessible from the controller

easy!

in resume

inject dependencies is mandatory. you must do if you have your app splitted in modules

how do you make http requests?

for that purpose, we're go to use

services

they are objects that perform common tasks to various parts of the system

factories

or

if you're going to make requests in many places of your code, you should use a service or a factory

module.factory('userService', function(){
    var fac = {};
    fac.users = ['John', 'James', 'Jake'];      
    return fac;
});

angular.module('myApp.controllers')
.controller('PeopleController',['$scope', 'userService',
  function($scope, servie) {
  $scope.people = service.users;
}]);

here, you insert your code

here, you inject your factory and use it

in resume

the services are for simple logic

the factories are for complex logic

so, let's go create

our first app

05 my first

app

we saw hello world example, so let's do another app

we're gonna to do a dynamic web with a bootstrap template

this, specifically

01 download

download the template in the previous link

don't worry about directory structure, we'll view later

02 split

divide in parts the html

remember: keep in mind that repeated areas must be shared templates

03 bower

download the necessary dependencies with bower

like angular, bootstrap and jquery

04 structure

reorder your html.

divide into folders

remember: you're going to view about best practices later

but let's view next slide ...

.
├── app
│   ├── app.js
│   ├── app.routes.js
│   ├── app.module.js
│   ├── partials
│   │     ├── related.partial.html
│   │     ├── footer.partial.html
│   │     ├── stories.partial.html
│   │     ├── home.partial.html
│   │     └── sidebar.partial.html
│   ├── controllers
│   │       ├── home.controller.js
│   │       ├── social.controller.js
│   │       └── related.controller.js
│   ├── directives    
│   │       └── social.directive.js
│   └── directives
│           └── request.factory.js
├── assets
│     ├── css
│     ├── img 
│     └── js
├── json
│     ├── related.json
│     └── stories.json
├── bower_components 
└── index.html

this is our directory structure

partials

components

has two important parts

partials contains the html divided in parts

components contains the angular modules

05 app

create your app.js and app.module.js

angular.module('demo', []);

for now, doesn't have any module injected

angular.module('demo.module', []);

app.js

app.module.js

next, create app.routes.js

angular.module('demo.routes', []);

app.routes.js

we have our app.js, app.module.js and app.routes.js

let's go to inject the modules!

angular.module('demo', [
    // App module
    'demo.modules'
]);

angular.module('demo.module', [
    // App routes
    'demo.routes'
]);

app.js

app.module.js

inject into app.js our main module, which is going to contain all the components

inject into app.module.js the app routes

angular.module('demo.routes', [
    // Angular routes
    'ngRoute'
]);

app.routes.js

don't forget to inject angular routes!

if you don't insert ngroute, routes will not work

and finally, app.routes.js

angular doesn't contain inside his code this module neither any

06 html

you have to define in html ngapp

<body ng-app="demo"></body>

include in your index.html (which should be empty) the sidebar and footer

<body ng-app="demo">
    <div ng-include="'/app/partials/sidebar.partial.html'"></div>
    <div ng-include="'/app/partials/footer.partial.html'"></div>
</body>

07 routes

let's create our routes for view our amazing templates!

angular
    .module('demo.routes', [
        // Angular routes component
        'ngRoute'
    ])
    .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "/app/partials/home.partial.html"
    })
    .when("/featured", {
        templateUrl: "/app/partials/featured.partial.html"
    })
    .when("/stories", {
        templateUrl: "/app/partials/stories.partial.html"
    })
    .otherwise({
        redirectTo: '/'
    });
}]);

we're going to see in detail

.config(['$routeProvider', function ($routeProvider) {
$routeProvider
    .when("/", {
        templateUrl: "/app/partials/home.partial.html"
    })
.otherwise({
    redirectTo: '/'
});

1

2

3

1. introduce your desired url. remember that you can use dynamic urls using :param

2. with templateUrl we tell where to find the template to paint

3. with otherwise, angular will redirect to "/" in other cases

finally, introduce ng-view attribute

<body ng-app="demo">
    <div ng-include="'/app/partials/sidebar.partial.html'"></div>
    <div ng-view></div>
    <div ng-include="'/app/partials/footer.partial.html'"></div>
</body>

introduces into html the partial template depending on the route

hooray!

you've got your dynamic templates runing now

but this don't have any angular power...

so, let's go creating controllers, directives and services!

08 controller

create a module named demo.controller.social

next, create a controller named socialcontroller

angular
	.module('demo.controller.social', [])
	.controller('SocialController', SocialController);

SocialController.$inject = ['$scope'];
function SocialController($scope, request){
	
}

remember inject in demo.module

we're going to insert an array and display with scope

function SocialController($scope, request){
	$scope.data = [
                        {title: 'Twitter'},
                        {title: 'Google+'},
                        {title: 'Facebook'}
                      ];
}

we introduce manually the data, later we're go to view to obtain from a json

create a new controller named postcontroller (in a new js file)

angular
	.module('demo.controller.post', [])
	.controller('PostController', PostController);

PostController.$inject = ['$scope'];

function PostController($scope){
	
}

09 directive

let's create our own html element for social links

angular
	.module('demo.directive.social', [])
	.directive('mdSocial', mdSocial);

function mdSocial() {
	var directive = {
		transclude: true,
		restrict: 'EA',
		template: '<a href="#">{{social.title}}</a> <small class="text-muted">|</small> '
	};
	return directive;
}

1

2

1. type of directive

2. html template

there are 4, but only two are important: element (E), attribute (A),

we introduce the html and it can have expressions inside

for use, we can use an element

or an attribute

<md-social></md-social>

<div md-social></div>

10 factory

we're going to create the factory for use in postcontroller

angular
	.module('demo.factory.request', [])
	.factory('requestFactory', requestFactory);

requestFactory.$inject = ['$http'];

function requestFactory($http) {
}

alright, let's go with http request!

angular
	.module('demo.factory.request', [])
	.factory('requestFactory', requestFactory);

requestFactory.$inject = ['$http'];

function requestFactory($http) {
	function get() {

	};
}

first, we're going to create a function inside. in this manner, we can have all requests inside with different name

second, add a parameter for introduce your json url and for obtain data to function parameters

angular
	.module('demo.factory.request', [])
	.factory('requestFactory', requestFactory);

requestFactory.$inject = ['$http'];

function requestFactory($http) {
	function get(url, success) {
	};
}

success is data you're going to receive

angular
	.module('demo.factory.request', [])
	.factory('requestFactory', requestFactory);

requestFactory.$inject = ['$http'];

function requestFactory($http) {
	function get(url, success) {
		var get = $http.get(url);
		get.success(success);
		get.error(function() {alert('error')});
	};
	return {
		'get': get
	};
}

third, insert the http request like angular explains

we can use http alone and introduce inside the type of request

$http({
  url: '...',
  method: 'GET'
});

success will save data if is ok

error will alert you if is there any error

use for have the possibility to have multiple functions and use at the same time

inject the factory in your controller and let's make the request

angular
	.module('demo.controller.post', ['demo.factory.request'])
	.controller('PostController', PostController);

PostController.$inject = ['$scope', 'requestFactory'];

function PostController($scope, request){
	request.get('/app/featured.json', function(data) {
		$scope.data = data.post;
	});
}

inject the factory module

there, too

use the get function from the factory

11 template

finally, only need to introduce expressions in our html for display the data into the scope

we need to tell the controller directive, don't forget!

<div class="row" ng-controller="PostController">

<h3>{{post.title}}</h3>

and you're done!

don't worry

this is not the end

but ...

06 live

preview

awww...

let's go to see in action!

07 best

practices

we're gonna look at:

directory structure

modules

controllers

directives

templating

comments

i18n

minification

other

services

directory structure

structure the app separating specific components of shared components

why?

1. locate easy all the components

2. reusable

3. separated static/vendor from app files

4. separated all specific components

5. you are free to use npm, bower and grunt/gulp

.
├── app
│   ├── app.js
│   ├── app.routes.js
│   ├── app.config.js
│   ├── app.module.js    // Main controller
│   ├── shared    // acts as reusable components
│   │   ├── sidebar
│   │   │   ├── controllers
│   │   │   │    ├── sidebar.controller.js
│   │   │   │    └── sidebar.controller.spec.js // Test
│   │   │   └── services
│   │   │        └── ...
│   │   └── header
│   │       ├── controllers
│   │       │    ├── header.controller.js
│   │       │    └── header.controller.spec.js // Test
│   │       └── header.routes.js
│   └── components    // each component is treated as a mini Angular app
│       └── product
│           ├── controllers
│           │    ├── product.controller.js
│           │    └── product.controller.spec.js // Test
│           └── partials
│                └── product.partial.html
├── assets
│   ├── css     // All styles and style related files
│   ├── img     // Images and icons for your app
│   └── js      // JavaScript files written for your app that are not for angular  
├── bower_components    // Directory with bower components installed
├── node_components    // Directory with node components installed
├── Gruntfile.js    // Grunt tasks
├── package.json    // Node package for install
└── index.html

modules

should be named with lowerCamelCase

For indicating that module is submodule of module you can nest them by using namespacing like:

ex: smyland.product

it's more easy to identify the parent

b

a

a.b

why?

Declare modules without a variable using the setter syntax

With one component per file, there is rarely a need to introduce a variable for the module

/* avoid */
var app = angular.module('app', ['ngAnimate']);
app.controller('SomeController', SomeController);

function SomeController() { }

/* recommended */
angular
    .module('app', ['ngAnimate'])
    .controller('SomeController', SomeController);

function SomeController() { }

use the same syntax for getters and setters

why?

controllers

do not manipulate DOM in your controllers. Use directives instead

controller's name is done by functionality and the substring Controller in the end

will be named uppercamelcase

ex: ProductController

// Don't do this

module.controller('MyCtrl', function ( ... ) {
  // ...
}

// Do this

module.controller('MyCtrl', MyCtrl);
function MyCtrl( ... ) {
  // ...
}

to prevent problems with minification, you should do:

// Solution - Explicit inject dependencies
module.controller('MainController', MainController);
function MainController($scope) {
    // ... 
};

MainController.$inject = ['$scope'];

we will see about minfication later

use the syntax over the classic controller with $scope syntax

1. it's hard to track where data is coming from

2. removes the use of $scope when no need for special operations. good preparation for angular 2

3. syntax closer to vanilla js

4. the dot rule: more contextual, easy to read and avoid issues that may occur without dot

<!-- avoid -->
<div ng-controller="Customer">
    {{ name }}
</div>

<!-- recommended -->
<div ng-controller="Customer as customer">
    {{ customer.name }}
</div>

controllerAs

why?

the syntax uses inside controllers which get bound to $scope

controllerAs

this

function Customer($scope) {
    $scope.name = {};
    $scope.sendMessage = function() { };
}

function Customer() {
    this.name = {};
    this.sendMessage = function() { };
}

2. You can still bind to the View and still access $scope methods

1. controllerAs is syntactic sugar over $scope

but let's see the next section ...

why?

Use a capture variable for when using the syntax

Choose a consistent variable name such as vm, which stands for ViewModel

controllerAs

this

function Customer() {
    this.name = {};
    this.sendMessage = function() { };
}

function Customer() {
    var vm = this;
    vm.name = {};
    vm.sendMessage = function() { };
}

The this keyword is contextual and when used within a function inside a controller may change its context. Capturing the context of this avoids encountering this problem

why?

Place bindable members at the top of the controller, alphabetized

makes it easy to read and helps you instantly identify which members of the controller can be bound and used in the View

function Sessions() {
    var vm = this;

    vm.gotoSession = function() {
      /* ... */
    };
    vm.refresh = function() {
      /* ... */
    };
    vm.search = function() {
      /* ... */
    };
    vm.sessions = [];
    vm.title = 'Sessions';
}

function Sessions() {
    var vm = this;

    vm.gotoSession = gotoSession;
    vm.refresh = refresh;
    vm.search = search;
    vm.sessions = [];
    vm.title = 'Sessions';

    function gotoSession() {/* */}

    function refresh() {/* */}

    function search() {/* */}
}

why?

define controllers along with their routes When a controller must be paired with a view

remember: If a View is loaded via other means besides a route, then use the controllerAs syntax in html

angular.module('app')
    .config(config);

function config($routeProvider) {
    $routeProvider
        .when('/avengers', {
          templateUrl: 'avengers.html'
        });
}

angular.module('app')
    .config(config);

function config($routeProvider) {
    $routeProvider
        .when('/avengers', {
          templateUrl: 'avengers.html',
          controller: 'Avengers',
          controllerAs: 'vm'
        });
}

<div ng-controller="Avengers as vm"></div>

<div></div>

use the original names of the controller's dependencies. This will help you produce more readable code:

function MyCtrl(s) {
  // ...
}

module.controller('MyCtrl', ['$scope', MyCtrl]);

function MyCtrl($scope) {
  // ...
}

module.controller('MyCtrl', ['$scope', MyCtrl]);

which is less readable than:

avoid writing business logic inside controllers. delegate to a model, using a service

angular.module('Store', [])
.controller('OrderCtrl', function ($scope) {

  $scope.items = [];

  $scope.addToOrder = function (item) {
    $scope.items.push(item);
  };

  $scope.removeFromOrder = function (item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
  };

  $scope.totalPrice = function () {
    return $scope.items.reduce(function (memo, item) {
      return memo + (item.qty * item.price);
    }, 0);
  };
});

we will see business login in service later

templates

use or instead of simple to prevent flashing content

why here

avoid writing complex expressions in the templates

ng-bind

ng-cloak

set the , , and dynamically using:

$scope.divStyle { ... }
<div ng-style="divStyle">...</div>

<div ng-href="{{link}}">...</div>

<img ng-src="{{img}}">

src

ng-src

href

ng-href

ng-style

style

<div href="{{link}}">...</div>

<img src="{{img}}">

instead of using

<div style="{{style}}">...</div>

class

ng-class

<div ng-class="{{class}}">...</div>

<div class="{{class}}">...</div>

directives

create one directive per file. it's easy to mantain

use directives for manipulate dom

but it's difficult to test, so it's preferable to use alternative ways such as ngshow/nghide, css styles or nganimate

use lowercamelcase for naming

use short, unique and descriptive prefix. in the example we use smy-. avoid ng- and ui-* prefix

ex: smySalesCustomerInfo
html: <smy-sales-customer-info>

restrict to elements and attributes, avoid comments and classes

<div class="my-calendar-range"></div> // Avoid
// Recommended
<my-calendar-range></my-calendar-range> // Custom element
<div my-calendar-range></div> // Custom attribute

this will make your code more readable

don't forget to use when you should deal with untrusted content

$sce

function ProductController($scope, $sce) {
    var vm = this;
    vm.title = $sce.trustAsHtml(vm.title.replace("\n", "<br/>"));
}

minification

use for gulp or grunt and comment functions that need automated dependency injection

will catch most dependencies, but it sometimes requires hints using the /* @ngInject */ syntax

angular
    .module('app')
    .controller('Avengers', Avengers);

/* @ngInject */
function Avengers(storage, avengerService) {
 ...
}

angular
    .module('app')
    .controller('Avengers', Avengers);

/* @ngInject */
function Avengers(storage, avengerService) {
 ...
}
Avengers.$inject = ['storage', 'avengerService'];

ng-annotate

services

encapsulate all the business logic in services

why business logic inside a controller is bad?

1. Controllers instantiated for each view and dies when the view unloads

2. Controllers are not reusable - they are coupled with the view

angular.module('Store')
.factory('Order', function () {
    var add = function (item) {
      this.items.push (item);
    };

    var remove = function (item) {
      if (this.items.indexOf(item) > -1) {
        this.items.splice(this.items.indexOf(item), 1);
      }
    };

    var total = function () {
      return this.items.reduce(function (memo, item) {
        return memo + (item.qty * item.price);
      }, 0);
    };

    return {
      items: [],
      addToOrder: add,
      removeFromOrder: remove,
      totalPrice: total
    };
});

//Order is used as a 'model'
angular.module('Store', [])
.controller('OrderCtrl', function (Order) {

  $scope.items = Order.items;

  $scope.addToOrder = function (item) {
    Order.addToOrder(item);
  };

  $scope.removeFromOrder = function (item) {
    Order.removeFromOrder(item);
  };

  $scope.totalPrice = function () {
    return Order.total();
  };
});

service

controller

others

do not use prefix for the names of variables, properties and methods. This prefix is reserved for AngularJS usage

do not pollute your . Only add functions and variables that are being used in the templates

$

$scope

use:

this will make your testing easier and prevent unexpected behavior

use promises ( ) instead of callbacks. It will make your code look more elegant and clean, and save you from callback hell

$q

$timeout

$interval

$window

$http

setTimeout

setInterval

window

$.ajax

instead of

don't use globals. use grunt-wrap or gulp-wrap for wrap your code in iife

When your code is minified and bundled into a single file for deployment to a production server, you could have collisions of variables and many global variables. An IIFE protects you against both of these by providing variable scope for each file

why?

If planning to produce documentation, use jsDoc syntax

Use and to match your app structure

/**
 * Logger Factory
 * @namespace Factories
 */
(function() {
  angular
      .module('app')
      .factory('logger', logger);

  /**
   * @namespace Logger
   * @description Application wide logger
   * @memberOf Factories
   */
  function logger($log) {
      var service = {
         logError: logError
      };
      return service;

      ////////////

      /**
       * @name logError
       * @description Logs errors
       * @param {String} msg Message to log
       * @returns {String}
       * @memberOf Factories.Logger
       */
      function logError(msg) {
          var loggedMsg = 'Error: ' + msg;
          $log.error(loggedMsg);
          return loggedMsg;
      };
  }
})();

@namespace

@memberOf

Any code that needs to run when an application starts should be declared in a factory, exposed via a function, and injected into the run block

Code directly in a run block can be difficult to test.

why?

08 tips

my

start with a

hello world

tutorial

it's simple, easy to read and easy to follow

i recommend codecademy for start

i started with it, and i didn't finish the first module

but you should do!

if you come from another mvc framework, it will be easier

like django, flask ...

or ruby templating like eruby ...

remember dry rule:

don't repeat yourself

split in parts your html an import in the index

if you're going to use bootstrap templates, remember this rule

don't start learning best practices before learn angular syntax

really, don't do.

it's stupid. like start building a house without planes

or like make the filling without the cake

install angularjs plugin in sb3

it's made by angularUI

code completion.

snippets.

quick panel search.

and more.

use grunt to minify js and css and bower for dependencies

you will save a lot of time with bower

and save page load time because only download a CSS and one js

add to your code

use strict

to display the errors and scold the programmer

use

instead of

angular.js

angular

when you download with bower

because angular only downloads angular.js, since angular.js downloads all dependencies of angular (like ngroute, ngcookies...)

install angular batarang in your browser

batarang is made by google for extend the dev tools, adding tools for angular

you can view the models (scopes), performance and dependencies

you can identify fast an angular app looking at the url

http://angular-ui.github.io/angular-google-maps/#!/

- angular 101 -

Table of contents

01

What is Angular?

02

Why angular?

03

best practices

04

angular vs jquery

05

angular basics

06

my first app

07

conclusions

live preview

09

10

credits

my tips

08

01

What is

Angular?

First of all...

what is a framework?

in one word:

a wrapper

is designed to enclose something

like a wrapper of

a candy

hence, Angular is a structural framework for dynamic web apps

angular is what html would have been, had it been designed for applications

some features that makes angular a good choice

100% javascript and client side

We separate the client server, to keep separate data

Reusable components

why make boilerplate code, being able to reuse what already exists? made by you or by other

single page apps

It executes in a single page, thus achieving a user experience closer to a desktop application

all this without refreshing the page or changing the url

MVC architecture

we can divide the code in parts, maintaining the order and reusable code

two way data-binding

It's continuously observing the changes that occur in both the View and the Model and synchronize data between them

what is not angular

Is not for make videogames. there are specific alternatives for that

like panda

or phaser

is not one way data-binding

is not a library, is a framework. a library only serve an specific purpose (slider, animations...)

you're ready to learn why use angular!

02

why

Angular?

why not?

Have a lot of modules made by the community

install and use it

don't do the work who someone else has already done for you

all the tricks that you can need, google has it

Have a lot of documentation and milions of examples in google

google has a solution for your problem because someone had the same

Angular works great with a JSON API delivered from the server

with mean in the back,

delivers better performance than a RoR o Python

write less code

Lovely, is not it?

html

js

in a few minutes you can have a

hello world

working

what for use it?

some examples...

dynamic

like ga.me

beautiful website made

with angular

integrates socket.io for