Skip to content

Instantly share code, notes, and snippets.

@PepDevils

PepDevils/Angular1Imp.js

Last active November 20, 2017 16:42
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save PepDevils/ba0eeffca4844079882837fa6af74da5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save PepDevils/ba0eeffca4844079882837fa6af74da5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Angular1Imp.js
//ANGULAR JS 1
//create a app and make a title in html page
// feito para criar single page aplications - o browser não actualiza a pagina mas sim o javascript unicamente onde é preciso
//js/app.js - criar a app
// js/controllers/MainController.js - adicionar controlador a app e adicionar titlo ao scopo
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Top Sellers in Books';
}]);
//index.html - ligar o controlador e a app ao body html, e ligar o titulo ao h1 dentro de um div
<body ng-app="myApp">
<div class="main" ng-controller="MainController">
<div class="container">
<h1>{{ title }}</h1>
</div>
</div>
</body>
//PASSO 2
//como podemos ver agora todas as views dentro do body,estão ligadas ao controlador, vamos acrescenter mais uma varivel
// e fazer o teste
// js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Top Sellers in Books';
$scope.promo = 'Promotion'; //adicionado
}]);
//index.html
<h2>{{ promo }}</h2> //adicionado por baixo de h1
//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--
// FILTERS -- FILTERS -- FILTERS -- FILTERS -- FILTERS -- FILTERS -- FILTERS -- FILTERS -- FILTERS -- FILTERS
//aplicar um filtro num resultado no html
// por exemplo para o preço
//index.html
<p class="price"> {{ product.price | currency }} </p> // "| currency" vai acrescentar o char de moeda ao numero
// js/controllers/MainController.js
$scope.product = {
name: 'The Book of Trees',
price: 19
}
// então 19 ficará como $19.00
//outros filtros
// como data
// js/controllers/MainController.js
$scope.product = {
name: 'The Book of Trees',
price: 19 ,
pubdate: new Date('2014', '03', '08')
}
//index.html
<p class="date"> {{ product.pubdate }} </p> // "2014-04-07T23:00:00.000Z"
<p class="date"> {{ product.pubdate | date}} </p> // Apr 8, 2014
<p class="date"> {{ product.pubdate | date | uppercase}} </p> // APR 8, 2014
//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--
// ARRAYS -- ARRAYS -- ARRAYS -- ARRAYS -- ARRAYS -- ARRAYS -- ARRAYS -- ARRAYS -- ARRAYS -- ARRAYS -- ARRAYS
//criar array produtos, para ser mostrado numa lista cada produto
// js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Top Books';
$scope.promo = 'Promotion';
$scope.products = [
{
name: 'The Book of Trees',
price: 19,
pubdate: new Date('2014', '03', '08'),
cover: 'img/the-book-of-trees.jpg'
},
{
name: 'Program or be Programmed',
price: 8,
pubdate: new Date('2013', '08', '01'),
cover: 'img/program-or-be-programmed.jpg'
}
]
}]);
//index.html
<div ng-repeat="product in products" class="col-md-6"> //ng-repeat="product in products" é como um foreach
<div class="thumbnail">
<img ng-src="{{ product.cover }}"> //ng-src substitui src, mas para controllers
<p class="title">{{ product.name }}</p>
<p class="price">{{ product.price | currency }}</p>
<p class="date">{{ product.pubdate | date }}</p>
</div>
</div>
//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--
// EVENT CLICK -- EVENT CLICK -- EVENT CLICK -- EVENT CLICK -- EVENT CLICK -- EVENT CLICK -- EVENT CLICK -- EVENT CLICK
// como fazer um botão para acrescentar likes num produto
// js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.title = 'Top Books';
$scope.promo = 'Promotion';
$scope.products = [
{
name: 'The Book of Trees',
price: 19,
pubdate: new Date('2014', '03', '08'),
likes: 0,
cover: 'img/the-book-of-trees.jpg'
}
]
$scope.plusOne = function(index) { //função para adicionar likes
$scope.products[index].likes += 1;
};
}]);
//index.html
<div ng-repeat="product in products" class="col-md-6">
<div class="thumbnail">
<img ng-src="{{ product.cover }}">
<p class="title">{{ product.name }}</p>
<p class="price">{{ product.price | currency }}</p>
<p class="date">{{ product.pubdate | date }}</p>
<div class="rating">
<p class="likes" ng-click="plusOne($index)">+ {{ product.likes }}</p> //ng-click para adicionar a função ao elemento
</div>
</div>
</div>
//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--
//DIRECTIVES -- DIRECTIVES -- DIRECTIVES -- DIRECTIVES -- DIRECTIVES -- DIRECTIVES -- DIRECTIVES -- DIRECTIVES -- DIRECTIVES
//TEMPLATE
//como frgaments em android, esta é uma utilização reciclaverl de elemntos html dentro de outro
//acrescentar informação no conrtoller
//js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.move = {
icon: 'img/move.jpg',
title: 'MOVE',
developer: 'MOVE, Inc.',
price: 0.99
};
$scope.shutterbugg = {
icon: 'img/shutterbugg.jpg',
title: 'Shutterbugg',
developer: 'Chico Dusty',
price: 2.99
};
$scope.gameboard = {
icon: 'img/gameboard.jpg',
title: 'Gameboard',
developer: 'Armando P.',
price: 1.99
};
}]);
// criar a diretiva
// js/directives/appInfo.js
app.directive('appInfo', function() {
return {
restrict: 'E', //specifies how the directive will be used in the view The 'E' means it will be used as a new HTML element.
scope: {
info: '=' // usado como argumento do elemento ex: <app-info info="shutterbugg"></app-info>
},
templateUrl: 'js/directives/appInfo.html'
};
});
//podemos ver que esta tem um template, este sera o nosso html que vai ser inserido no index
//js/directives/appInfo.html
<img class="icon" ng-src="{{ info.icon }}">
<h2 class="title">{{ info.title }}</h2>
<p class="developer">{{ info.developer }}</p>
<p class="price">{{ info.price | currency }}</p>
// por fim vamos acrescentar a diretiva chamar o template no index.html
//index.html
<!-- Directives -->
<script src="js/directives/appInfo.js"></script>
<div class="card">
<app-info info="move"></app-info>
</div>
<div class="card">
<app-info info="shutterbugg"></app-info>
</div>
<div class="card">
<app-info info="gameboard"></app-info>
</div>
//usando outra directiva ja conhecida com ng-repeat, podemos encortar o codigo
// js/controllers/MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.apps = [
{
icon: 'img/move.jpg',
title: 'MOVE',
developer: 'MOVE, Inc.',
price: 0.99
},
{
icon: 'img/shutterbugg.jpg',
title: 'Shutterbugg',
developer: 'Chico Dusty',
price: 2.99
},
{
icon: 'img/gameboard.jpg',
title: 'Gameboard',
developer: 'Armando P.',
price: 1.99
},
{
icon: 'img/forecast.jpg',
title: 'Forecast',
developer: 'Forecast',
price: 1.99
}
];
}]);
// index.html
<div class="main" ng-controller="MainController">
<div class="container">
<div class="card" ng-repeat="app in apps">
<app-info info="app"></app-info>
</div>
</div>
</div>
//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--
// DIRETIVA -- DIRETIVA -- DIRETIVA -- DIRETIVA -- DIRETIVA -- DIRETIVA -- DIRETIVA -- DIRETIVA -- DIRETIVA --
// CLICK
//agora vamos criar uma diretiva para acrescentar um tipo de click
//js/directives/installApp.js
app.directive('installApp', function() {
return {
restrict: 'E',
scope: {}, //scopo vazio, n recebe argumentos
templateUrl: 'js/directives/installApp.html',
link: function(scope, element, attrs) {
scope.buttonText = "Install",
scope.installed = false,
scope.download = function() {
element.toggleClass('btn-active')
if(scope.installed) {
scope.buttonText = "Install";
scope.installed = false;
} else {
scope.buttonText = "Uninstall";
scope.installed = true;
}
}
}
};
});
//index.html
<!-- Directives -->
<script src="js/directives/installApp.js"></script>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="card" ng-repeat="app in apps">
<app-info info="app"></app-info>
<install-app></install-app> // sem argumentos, basta por as tags
</div>
</div>
</div>
//js/directives/installApp.html
<button class="btn btn-active" ng-click="download()">
{{ buttonText }}
</button>
//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--
// SERVICES -- SERVICES -- SERVICES -- SERVICES -- SERVICES -- SERVICES -- SERVICES -- SERVICES -- SERVICES --
// use services to comunicate with a server
//create a service
// js/services/forecast.js
app.factory('forecast', ['$http', function($http) {
return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
//add a service to html index
// index.html
<script src="js/services/forecast.js"></script>
//add data received in the service, to the controller
//js/controllers/MainController.js
app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) { //service its now with scope
//service saving data in fiveDay
forecast.success(function(data) {
$scope.fiveDay = data;
});
}]);
//novamente no index colocar a logica para o uso de dados na view
//index.html
<div class="main" ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-sm-5 col-sm-offset-7">
<h1>{{ fiveDay.city_name }}</h1>
<h2>5-day forecast</h2>
<div class="forecast" ng-repeat="day in fiveDay.days">
<div class="day row">
<!-- datetime -->
<div class="weekday col-xs-4">
<p class="datetime">{{ day.datetime | date }}</p>
</div>
<!-- icon -->
<div class="weather col-xs-3">
<img class="icon" ng-src="{{ day.icon }}">
</div>
<div class="col-xs-1"></div>
<!-- high -->
<div class="high col-xs-2">
<p class="high">{{ day.high }}</p>
</div>
<!-- low -->
<div class="low col-xs-2">
<p class="low">{{ day.low }}</p>
</div>
</div>
</div>
</div>
</div>
</ul>
</div>
</div>
//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--
// ROUTING -- ROUTING -- ROUTING -- ROUTING -- ROUTING -- ROUTING -- ROUTING -- ROUTING -- ROUTING -- ROUTING
// application routes - use multiple templates that display different pieces of data
//index.html
<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
<link href="css/main.css" rel="stylesheet" />
<!-- Include the core AngularJS library -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<!-- Include the AngularJS routing library -->
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="GalleryApp">
<div class="header">
<div ng-view></div>
<div class="container">
<a href="/#/">
<img src="img/logo.svg" width="80" height="80"> &#12501; &#65387; &#12488; &#12501; &#65387; &#12488;
</a>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/HomeController.js"></script>
<script src="js/controllers/PhotoController.js"></script>
<!-- Services -->
<script src="js/services/photos.js"></script>
</body>
</html>
//js/apps.js
var app = angular.module('GalleryApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.otherwise({
redirectTo: '/'
});
});
//views/home.html
<div class="main">
<div class="container">
<h2>Recent Photos</h2>
<div class="row">
<div class="item col-md-4" ng-repeat="photo in photos">
<a href="#/photos/{{$index}}">
<img class="img-responsive" ng-src="{{ photo.url }}">
<p class="author">by {{ photo.author }}</p>
</a>
</div>
</div>
</div>
</div>
//views/photo.html
<div class="photo">
<div class="container">
<img ng-src="{{ detail.url }}">
<h2 class="photo-title"> </h2>
<p class="photo-author"> </p>
<p class="photo-views"> </p>
<p class="photo-upvotes"> </p>
<p class="photo-pubdate"> </p>
</div>
</div>
//js/controller/HomeController.js
app.controller('HomeController', ['$scope', 'photos', function($scope, photos) {
photos.success(function(data) {
$scope.photos = data;
});
}]);
//neste momento temos uma lista de imagens com titulo, ao clicar nesta nada acontece, vamos então acrescentar o template para a photo
//js/apps.js
var app = angular.module('GalleryApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/photos/:id', { //novo
controller: 'PhotoController', //novo
templateUrl: 'views/photo.html' //novo
}) //novo
.otherwise({
redirectTo: '/'
});
});
//agora ao clicar na lista esta vai para o template das fotos
//agora basta actualizar esse template para que mostre os dados que vem no json service do seguinte link:
https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/photos.json
//views/photo.html
<div class="photo">
<div class="container">
<img ng-src="{{ detail.url }}">
<h2 class="photo-title"> {{ detail.title }}</h2>
<p class="photo-author">{{ detail.author }} </p>
<p class="photo-views"> {{ detail.views | number }}</p>
<p class="photo-upvotes"> {{ detail.upvotes | number}}</p>
<p class="photo-pubdate">{{ detail.pubdate | date }} </p>
</div>
</div>
//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--//--//---//--//...//--//___//--
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment