O que podemos fazer com o “redirectTo”

Nesse exemplo mostra o que podemos fazer com o “redirectTo”

app.config(function($routeProvider) {
    $routeProvider
      .when('/',
      {
        templateUrl: "app.html",
        controller: "AppCtrl"
      })
      .when('/pizza/:crust/:toppings', {
        redirectTo: function(routeParams, path, search) {
            console.log(routeParams);
            console.log(path);
            console.log(search);
            return "/" + routeParams.crust;
        }
      })
      .when('/deep', {
        template: 'Deep dish'
      })
      .otherwise({
        redirectTo: "/"
      })
});

Diferença entre $routeProvider e $route

O $routeProvider nada mais é do que uma Factory que é usada:

app.config(function($routeProvider) {
  $routeProvider.when('/',
    {
      templateUrl: "app.html",
      controller: "AppCtrl"
    }
  )
});

O $route nada mais é do que um Service que pode ser usado assim também:

app.config(function($routeProvider) {
//  $routeProvider.when('/',
//    {
//      templateUrl: "app.html",
//      controller: "AppCtrl"
//    }
//  )
});
 
app.controller("AppCtrl", function($scope, $route) {
    $route.routes["/"] = {
        templateUrl: "app.html",
        controller: "AppCtrl"
    }
 
    $scope.model = {
        message: "This is my app!!!"
    }
});

Se você perceber ele substitui o $routeProvider.

AngularJS – TemplateCache

    <zippy title="{{model.title}}">
        The content is: {{model.content}}
    </zippy>
var app = angular.module("app", []);
 
app.run(function($templateCache) {
  $templateCache.put("zippy.html", '<div><h3 ng-click="toggleContent()">{{title}}</h3><div ng-show="isContentVisible" ng-transclude></div></div>');
});
 
app.directive("zippy", function() {
    return {
        restrict: "E",
        transclude: true,
        scope: {
            title: "@"
        },
        templateUrl: 'zippy.html',
        link: function(scope) {
            scope.isContentVisible = false;
 
            scope.toggleContent = function() {
                scope.isContentVisible = !scope.isContentVisible;
            };
        }
    };
});

AngularJs – templateUrl

<script type="text/ng-template" id="zippy.html">
        <div><h3 ng-click="toggleContent()">{{title}}</h3>
          <div ng-show="isContentVisible" ng-transclude></div>
        </div>
    </script>
var app = angular.module("app", []);
 
app.directive("zippy", function() {
    return {
        restrict: "E",
        transclude: true,
        scope: {
            title: "@"
        },
        templateUrl: 'zippy.html',
        link: function(scope) {
            scope.isContentVisible = false;
 
            scope.toggleContent = function() {
                scope.isContentVisible = !scope.isContentVisible;
            };
        }
    };
});

Criando um filtro de dados com ngRepeat.

Pesquisar:

{{actor.name}} {{actor.character}}


<!DOCTYPE html>
<html>
<head>
  <title>AngularJS Tutorials</title>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.4.7/css/foundation.css">
</head>
<body>
 
  <div ng-app="myApp">
    <div ng-controller="AvengersCtrl as avengersCtrl">
      <input type="text" ng-model="search.$">
      <table>
        <tr ng-repeat="actor in avengersCtrl.avengers.cast | filter:search">
            <td>{{actor.name}}</td>
            <td>{{actor.character}}</td>
        </tr>
      </table>
    </div>
  </div>
 
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
 
myApp.factory('Avengers', function() {
    var Avengers = {};
    Avengers.cast = [
      {
        name: "Robert Downey Jr.",
        character: "Tony Stark / Iron Man"
      },
      {
        name: "Chris Evans",
        character: "Steve Rogers / Captain America"
      },
      {
        name: "Mark Ruffalo",
        character: "Bruce Banner / The Hulk"
      },
      {
        name: "Chris Hemsworth",
        character: "Thor"
      },
      {
        name: "Scarlett Johansson",
        character: "Natasha Romanoff / Black Widow"
      },
      {
        name: "Jeremy Renner",
        character: "Clint Barton / Hawkeye"
      },
      {
        name: "Tom Hiddleston",
        character: "Loki"
      },
      {
        name: "Clark Gregg",
        character: "Agent Phil Coulson"
      },
      {
        name: "Cobie Smulders",
        character: "Agent Maria Hill"
      },
      {
        name: "Stellan Skarsgard",
        character: "Selvig"
      },
      {
        name: "Samuel L. Jackson",
        character: "Nick Fury"
      },
      {
        name: "Gwyneth Paltrow",
        character: "Pepper Potts"
      },
      {
        name: "Paul Bettany",
        character: "Jarvis (voice)"
      },
      {
        name: "Alexis Denisof",
        character: "The Other"
      },
      {
        name: "Tina Benko",
        character: "NASA Scientist"
      }
    ];
    return Avengers;
});
 
function AvengersCtrl(Avengers) {
  var avengersCtrl = this;
    avengersCtrl.avengers = Avengers;
}
 
myApp.controller("AvengersCtrl", AvengersCtrl); 
</script>
</body>
</html>

Criar um repositório primeiros passos

Quando você já tem um projeto em sua máquina e ele ainda não é versionado basta seguir esses passo no terminal:
Inicial o repositório:

git init

Adicionar todo que deseja comitar:

git add .

Comitar tudo que foi adicionado antes, lembrando que esse comite é no seu repositório local:

git commit -m "Comite incial."

Agora precisamos configurar o repositório remoto para aonde seu código vai:

git remote add origin https://github.com/user/repo.git

Depois de ter configurado o repositório basta enviar, lembrando que no próximo “push” que você fizer depois desse será só “git push”:

git push --set-upstream origin master