$routeProvider-routeParams – Tutorial AngularJS Crashkurs

  • $routeProvider wird verwendet um routes zu konfigurieren deren übergeordneter Service $route ist
  • Mit $routeParams können auch Parameter übergeben werden in Form eines Doppelpunkt nach dem Pfad
  • Bitte zuvor das Video Routing (016) anschauen

RouteProvider.html

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<script src=„lib/angular-route.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>RouteProvider</title>
</head>

<body>

<div ng-app=„myApp“ ng-controller=„myCtrl“>
<ng-view>{{value}}</ng-view>

</div>

<script>
var app=angular.module(‚myApp‘, [’ngRoute‘]);

app.config(function($routeProvider) {
$routeProvider
.when(‚/‘,
{
templateUrl: ‚Page.html‘,
})
.when(‚/parameter:value‘, {
template: ‚Parameter value‘,
controller: ‚myCtrl‘
})
.otherwise({
templateUrl: ‚Error.html‘,
})
});

app.controller(‚myCtrl‘, function($scope, $routeParams) {
$scope.value=$routeParams.value;
})
</script>

</body>

</html>

Page.html

<!DOCTYPE html>
<html>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Routing</title>
</head>

<body>

<div>
Hauptseite
</div>

</body>

</html>

Error.html

<!DOCTYPE html>
<html>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Routing</title>
</head>

<body>

<div>
Seite existiert nicht
</div>

</body>

</html>

HTTP Get-Express.js – Tutorial AngularJS Crashkurs

  • Express.js ist ein serverseitiges Web Application Framework für Node.js
  • Durch Express.js wird das entwickeln von Webanwendungen auf der Plattform Node.js stark vereinfacht
  • Ermöglicht das aufsetzen eine Middleware um so auf HTTP-Requests zu antworten
  • Es können Routes definiert werden die mit bestimmten Aktionen verbunden und ausgeführt werden
  • js ermöglicht zudem das Rendering von Inhalten
  • Der Zugriff auf Datenbanken wie beispielsweise MongoDB wird durch Express.js vereinfacht

Server.js

var express = require(‚express‘);
var app = express();
var cors = require(‚cors‘);

app.use(cors());
app.set(‚port‘, 3000);

app.get(‚/users‘, function(req, res){
console.log(‚Get Users‘);

var pages = [
{page:„http://easeflow.net/“},
{page:„http://tiptopplaces.com/“},
{page:„http://easeflow.net/wordpress/“}];

res.send(pages);
});

app.listen(3000);
console.log(‚Running‘);

index.html

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>http get-express.js</title>
</head>

<body>
<div ng-app=„myApp“ ng-controller=myCtrl>
<table>
<tr ng-repeat=data in pages>
<td>{{data.page}}</td>
</tr>
</table>
</div>

<script>
var app=angular.module(‚myApp‘,[]);

app.controller(‚myCtrl‘, function($scope, $http, $log) {

$http({
method: ‚GET‘,
url: ‚http://localhost:3000/users‘,
}).then(function successCallback(response) {
$scope.pages = response.data;
$log.debug(response);

}, function errorCallback(response) {
alert(‚Error‘);
$log.debug(response);
});
});
</script>

</body>

</html>

 

Modules – Tutorial AngularJS Crashkurs

film Snowden 2016

  • Module ermöglichen den Sourcecode in sinnvolle Einheiten zu gliedern wie:
    • Config
    • Routes
    • Filter
    • Directive
    • Factory
    • Service
    • Provider
    • Controller
  • Im Umkehrschluss sollten sämtliche in AngularJS ausgeführten Codes immer in einen Modul ausgeführt werden um die Übersichtlichkeit zu erhöhen
  • Im einer Div-Sektion wird ein Modul wie folgt definiert:
    <div ng-app=“myApp“ ng-controller=“myCtrl“>
  • In einem Script wird ein Modul wie folgt definiert:
    var app= angular module(„myApp“);
    oder
    var app = angular.module(„myApp“, []):Zu beachten gilt, das innerhalb des Parameter mit den eckigen Klammern Abhängigkeiten sprich Dependeny Injections definiert werden können