AngularJS Essential. Урок 8. AJAX. Домашнее задание.

Frontend developer Frontend Домашние задания
1

Дополнительное задание 1.

Код 
    Дополнительное задание 1

<script src="../Libraries/angular.js"></script>
<link href="../Libraries/bootstrap-theme.css" rel="stylesheet"/>
<link href="../Libraries/bootstrap.css" rel="stylesheet" />

<script>
    angular.module("appNotepad", [])
    .constant("baseUrl", "http://localhost:2403/records/")
    .controller("appNotepadCtrl", function ($scope, $http, baseUrl) {

        $scope.listFiles = {};

        $scope.load = function () {
            $http.get(baseUrl).then(
                function (response) {
                    $scope.listFiles = response.data;
                }, showError);
        }
        
        $scope.open = function (item) {
            $scope.file = angular.copy(item);
        }

        $scope.create = function () {

            var name = prompt("Input file name");
            if (name.length == 0) return;

            $http.post(baseUrl, {name:name, text:""}).then(
                function (response) {
                    $scope.listFiles.push({ id: response.data.id, name: response.data.name, text: "" });
                    $scope.open(response.data);
                }, showError);

        }

        $scope.save = function () {
            $http.put(baseUrl, $scope.file).then(
            function (response) {
                for (var i = 0, len = $scope.listFiles.length; i < len; i  ) {
                    if ($scope.listFiles[i].id == $scope.file.id) {
                        $scope.listFiles[i].text = $scope.file.text;
                        break;
                    }
                }
            }, showError);
        }

        $scope.cancel = function () {
            $scope.file = undefined;
        }

        function showError(error) {
            $scope.error = "Error code: "   error.status;
        }

        $scope.load();
    })
</script>




    

        

            
Files:

            
    
                
  • {{item.name}}
    • 
            


        <div class="panel panel-body panel-default">
            <p>Opened file: {{file.name}}</p>
            <textarea class="form-control" rows="5" ng-model="file.text" ng-disabled="!file"></textarea>
            <button class="btn bg-primary" ng-click="create()">New</button>
            <button class="btn bg-primary" ng-click="save()" ng-disabled="!file">Save</button>
            <button class="btn bg-primary" ng-click="cancel()" ng-disabled="!file">Cancel</button>

            <div>
                {{error}}
            </div>
        </div>
    </div>
</div>

И всех с наступающим, 2017 Новым годом! CyberBionic Systematics спасибо за поздравления с рассылки

2

Задание 1

Код 


    Задание 1

<script src="../Libraries/angular.js"></script>
<link href="../Libraries/bootstrap.css" rel="stylesheet" />
<link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />
<script>
    
    angular.module("task", [])
    .constant("baseUrl", "http://localhost:2403/tasks/")
    .controller("taskCtrl", function ($scope, $http, baseUrl) {

        $scope.tasks = [];

        $scope.load = function () {
            $http.get(baseUrl).then(
                function (response) {
                    $scope.tasks = response.data;
                }, handleError);
        }

        $scope.addItem = function () {
            $http.post(baseUrl, {
                name: $scope.newItem.name,
                duedate: $scope.newItem.duedate.toLocaleDateString(),
                description: $scope.newItem.description,
                completed: ($scope.newItem.completed ? true : false)
            }).then(
                function (response) {
                    $scope.tasks.push({
                        id: response.data.id,
                        name: response.data.name,
                        duedate: response.data.duedate,
                        description: response.data.description,
                        completed: response.data.completed
                    })
                }, handleError);

        }

        function handleError(error) {
            $scope.errorMsg = "Error code: "   error.status;
        }

        $scope.load();
    })

</script>





<div class="container">

    <h3>ToDo List</h3>

    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Date</th>
                <th>Completed</th>
            </tr>
        </thead>
        <tr ng-repeat="item in tasks">
            <td>{{item.name}}</td>
            <td>{{item.description}}</td>
            <td>{{item.duedate}}</td>
            <td>{{item.completed}}</td>
        </tr>
    </table>

    <div>
        <form role="form">
            <div class="form-group">
                <label class="control-label" for="name">Name</label>
                <input type="text" class="form-control" id="name" placeholder="Name" ng-model="newItem.name">
            </div>
            <div class="form-group">
                <label class="control-label" for="date">Due Date</label>
                <input type="date" class="form-control" id="date" placeholder="Date" ng-model="newItem.duedate">
            </div>
            <div class="form-group">
                <label class="control-label" for="description">Description</label>
                <textarea rows="2" class="form-control" id="description" placeholder="Description" ng-model="newItem.description"></textarea>
            </div>

            <div class="checkbox">
                <label>
                    <input type="checkbox" ng-model="newItem.completed"> Completed
                </label>
            </div>
            <button type="button" class="btn btn-default" ng-click="addItem()">Add</button>
        </form>
    </div>
    <div>{{errorMsg}}</div>
</div>

В задании писалось попробовать реализовать совою серверную часть - этого не делал.

3

Задание 2

Код 

    
Add record

    
        

            Name
            
        

        

            Due Date
            
        

        

            Description
            
        


    <div class="checkbox">
        <label>
            <input type="checkbox" ng-model="newItem.completed"> Completed
        </label>
    </div>
    <button type="button" class="btn btn-default" ng-click="save(newItem)">Save</button>
    <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
</form>








ToDo List
Name Description Date Completed
{{item.name}} {{item.description}} {{item.duedate}} {{item.completed}}
Add




Задание 2 
<base href="/Samples/04_Homework/" />

<script src="../Libraries/angular.js"></script>
<script src="../Libraries/angular_route.js"></script>

<link href="../Libraries/bootstrap.css" rel="stylesheet" />
<link href="../Libraries/bootstrap-theme.css" rel="stylesheet" />

<script>
    
    angular.module("task", ["ngRoute"])
    .constant("baseUrl", "http://localhost:2403/tasks/")
    .config(function ($locationProvider, $routeProvider) {

        $locationProvider.html5Mode(true);

        $routeProvider.when("/view", {
            templateUrl: "/Samples/04_Homework/view/view.html"
        });

        $routeProvider.when("/add", {
            templateUrl: "/Samples/04_Homework/view/add.html"
        });

        $routeProvider.otherwise({templateUrl: "/Samples/04_Homework/view/view.html"});
    })
    .controller("taskCtrl", function ($scope, $http, baseUrl, $location) {

        $scope.tasks = [];

        $scope.load = function () {
            $http.get(baseUrl).then(
                function (response) {
                    $scope.tasks = response.data;
                }, handleError);
        }

        $scope.save = function (newItem) {
            $http.post(baseUrl, {
                name: newItem.name,
                duedate: newItem.duedate.toLocaleDateString(),
                description: newItem.description,
                completed: (newItem.completed ? true : false)
            }).then(
                function (response) {
                    $scope.tasks.push({
                        id: response.data.id,
                        name: response.data.name,
                        duedate: response.data.duedate,
                        description: response.data.description,
                        completed: response.data.completed
                    })

                }, handleError);
            $location.path("/view");
        }

        $scope.add = function() {
            $location.path("/add");
        }

        $scope.cancel = function () {
            $location.path("/view");
        }

        function handleError(error) {
            $scope.errorMsg = "Error code: "   error.status;
        }

        $scope.load();
    })

</script>

<div class="container">
    <div ng-view></div>
    <div>{{errorMsg}}</div>
</div>