AngularJS: Unterschied zwischen den Versionen

Aus wiki
Wechseln zu: Navigation, Suche
(→‎Small Angular JS App)
(→‎authorization data)
 
(6 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
== Basic Authentication on HTTP ==
 +
$http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line
 +
 +
== read all variables from object ==
 +
<pre>
 +
    var output = '';
 +
    for (var property in $scope.entry) {
 +
        output += property + ': ' + $scope.entry[property]+'; ';
 +
    }
 +
</pre>
 +
 +
== check for undefined method ==
 +
            if (typeof $scope.entry.$update !== 'undefined') {
 +
                console.log('update is not anymore undefined!!');
 +
            }
 +
 +
= check for method =
 +
if (typeof me.onChange === "function") {
 +
    // safe to use the function
 +
}
 
== Small Angular JS App ==
 
== Small Angular JS App ==
 +
index.html
 
<pre><!doctype html>
 
<pre><!doctype html>
 
<html class="no-js">
 
<html class="no-js">
Zeile 54: Zeile 75:
 
</body>
 
</body>
 
</html>
 
</html>
 +
</pre>
 +
 +
main.js
 +
<pre>
 +
var app = angular.module('taskmanApp', ['ngStorage']);
 +
 +
app.filter('myJsonFilter', function () {
 +
    return function (inputArray) {
 +
        var outputArray = [];
 +
 +
        angular.forEach(inputArray, function (item) {
 +
            var temp = JSON.parse(item);
 +
            outputArray.push(temp);
 +
        });
 +
 +
        return outputArray;
 +
    };
 +
});
 +
 +
 +
app.controller('taskController', function ($scope, $localStorage) {
 +
 +
    //  $scope.$storage = $localStorage;
 +
    $scope.$storage = $localStorage.$default({
 +
        tasks: new Array()
 +
    });
 +
 +
    $scope.$storage.tasks = [];
 +
 +
    $scope.addTask = function () {
 +
        var pushMe = angular.toJson({
 +
            name: $scope.$storage.task.name,
 +
            prio: $scope.$storage.task.prio
 +
        });
 +
 +
        $scope.$storage.tasks.push(pushMe);
 +
    };
 +
});
 
</pre>
 
</pre>

Aktuelle Version vom 17. Februar 2015, 15:36 Uhr

Basic Authentication on HTTP

$http.defaults.headers.common['Authorization'] = 'Basic ' + $rootScope.globals.currentUser.authdata; // jshint ignore:line

read all variables from object

    var output = '';
    for (var property in $scope.entry) {
        output += property + ': ' + $scope.entry[property]+'; ';
    }

check for undefined method

           if (typeof $scope.entry.$update !== 'undefined') {
               console.log('update is not anymore undefined!!');
           }

check for method

if (typeof me.onChange === "function") { 
    // safe to use the function
}

Small Angular JS App

index.html 

<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title>TaskMan - AngularJS TaskManager with local Storage</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="styles/main.css">

    <script src="scripts/angular.js"></script>
    <script src="scripts/ngStorage.js"></script>
    <script src="scripts/controllers/main.js"></script>
</head>
<body ng-app="taskmanApp">

<!-- Add your site or application content here -->
<div class="container">
    <div class="header">
        <h3>taskman</h3>
    </div>

    <div class="content" ng-controller="taskController">
        <div>
            Create a new Task:
            <form ng-submit="addTask()">

                <input placeholder="insert task" ng-model="$storage.task.name">

                <select ng-model="$storage.task.prio">
                    <option value="high">High Prio</option>
                    <option value="middle">Middle Prio</option>
                </select>
                <input type="submit" class="btn-primary" value="Insert">
            </form>
        </div>
        <div>
            <span> Anzahl Einträge: {{$storage.tasks.length}}</span>
            <ul>
                <li ng-repeat="acttask in $storage.tasks | myJsonFilter">
                    <p>Text: {{acttask.name}}<br>Priorität: {{acttask.prio}}</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="footer">
        <p><span class="glyphicon glyphicon-heart">Greets</span> from the TaskMan team</p>
    </div>
</div>



</body>
</html>

main.js 

var app = angular.module('taskmanApp', ['ngStorage']);

app.filter('myJsonFilter', function () {
    return function (inputArray) {
        var outputArray = [];

        angular.forEach(inputArray, function (item) {
            var temp = JSON.parse(item);
            outputArray.push(temp);
        });

        return outputArray;
    };
});


app.controller('taskController', function ($scope, $localStorage) {

    //   $scope.$storage = $localStorage;
    $scope.$storage = $localStorage.$default({
        tasks: new Array()
    });

    $scope.$storage.tasks = [];

    $scope.addTask = function () {
        var pushMe = angular.toJson({
            name: $scope.$storage.task.name,
            prio: $scope.$storage.task.prio
        });

        $scope.$storage.tasks.push(pushMe);
    };
});
Von «https://wiki.christofbuechi.ch/index.php?title=AngularJS&oldid=90»