Agenda

o que é angular
HTML extends
web-components (diretivas)
Two-way data-bind
Arquitetura REST + angular
Gerenciadores de pacotes
Automatizadores de tarefas

AngularJS

é um framework JavaScript open-source, mantido pelo Google, que auxilia na execução de single-page applications.

é extremamente flexivel e escalavel se enquadrando em modelos MVC (model view controller) MVVM (model-view-view-model) e como seus criadores o denominam hoje MVW (model-view-whatever)

HtmlExtends

AngularJS estende os atributos HTML with Diretivas, e bind elementos com Expressões.

Start

Primeiro, nós precisamos de fato configurar o essencial para um projeto Angular. Há certas coisas para se observar antes de começarmos, que geralmente consiste em uma declaração ng-app para definir sua aplicação, um Controller para conversar com sua ‘View’, e alguma ligação DOM e inclusão do Angular. Aqui temos o mínimo essencial:

Mão na massa !

<!DOCTYPE html>
<html>
    <head>
        <title>Angular Talk#1</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    <body ng-app>
	<input type="text" ng-model="nome" placeholder="digite seu nome">
	<h1>Hello {{nome}}!</h1>
    </body>
</html>

Two-Way Data-Bind

Data-binding em apps com AngularJs é a sincronização automática dos dados entre o model e a view

One-Way Data-Bind

Two-Way Data-Bind

Diretivas

ng-app
ng-show/hide
ng-repeat
ng-click
ng-model

Module

angular.module('milfaqApp', [])

angular.module('milfaqApp')

Tudo no angular são módulos, eles nos ajudam a modular nosso projeto e trabalhar em pequenos trechos de código

Modules

<body ng-app="milfaqApp">

    <div id="page-wrapper">
     <div class="container-fluid">
         <h1>oi pessoas</h1>
     </div>
    </div>
  <script src="scripts/app.js"></script>
</body>

angular.module('milfaqApp', [])

Controllers

Definem o comportamento do app setando funções e valores

.controller('UsersIndexController', ['$scope', function($scope) {
  
  $scope.users = {
        nome:'vitor',
        email:'alencar@gmail.com',
        estagiario:true,
        numeroDaCarteira:1234
  }

}])

<div ng-controller="UsersIndexController">
 <h4>Usuários {{users.nome}}</h4>
 <p>{{users.email}}</p>
</div>

Basic

.controller('UsersIndexController', ['$scope', function($scope) {
  
  $scope.users = {
        nome:'vitor',
        email:'alencar@gmail.com',
        estagiario:true,
        numeroDaCarteira:1234
  }

}])

<div ng-controller="UsersIndexController">
 <h4>Usuários {{users.nome}}</h4>
 <p>{{users.email}}</p>
 <p ng-hide="estagiario">{{users.numeroDaCarteira}}</p>
</div>

Basic

.controller('UsersIndexController', ['$scope', function($scope) {
  
  $scope.users =[
      {
        nome:'vitor',
        email:'alencar@gmail.com',
        estagiario:true,
        numeroDaCarteira:1234
      },
      {
        nome:'Marcelo',
        email:'marcelo@gmail.com',
        estagiario:false,
        numeroDaCarteira:1234
      },
    ]
}])

<div ng-controller="UsersIndexController">
  <div ng-repeat="pessoa in users">
     <h4>Usuários {{pessoa.nome}}</h4>
     <p>{{pessoa.email}}</p>
     <p ng-hide="pessoa.estagiario">{{pessoa.numeroDaCarteira}}</p>    
  </div>
</div>

Rotas

Ramificando seu app

.config(function ($stateProvider,$urlRouterProvider) {
   $stateProvider
    .state('/', {
      url:'/',
      templateUrl: 'views/main.html',
      controller: 'MainCtrl'
    })
    .state('usersIndex', {
      url:'/users',
      templateUrl: 'views/users/index.html',
      controller: 'UsersIndexController'
    })

    $urlRouterProvider.otherwise('/');
})

Factory | Service

angular.module('issuresFactory',[])

.factory('issuresFactory', ['$resource',function ($resource) {
	return $resource('http://0.0.0.0:3000/issures/:id/.json', { id: '@_id' });
}]);

angular.module('milfaqApp')

.controller('IssureIndexController',['$scope', 'issuresFactory', function($scope, issuresFactory) {
    
    $scope.index = function(){
      $scope.issures = issuresFactory.index();
    };


  $scope.index();
}]);

Promisses

angular.module('issuresFactory',[])

.factory('issuresFactory', ['$resource',function ($resource) {
	return $resource('http://0.0.0.0:3000/issures/:id/.json', { id: '@_id' });
}]);

angular.module('milfaqApp')

.controller('IssureIndexController',['$scope', 'issuresFactory', function($scope, issuresFactory) {
    
    $scope.index = function(){
       issuresFactory.index()$promise.then(
          //success
          function( data ){
              $scope.issures = data;
          },
          // error
          function( error ){
             // error logic
          },
      );
    };


  $scope.index();
}]);