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

  • 30 Просмотры
  • Последний пост 30 декабря 2016
Maxim Shulga разместил пост 30 декабря 2016

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

 

Код
<!DOCTYPE html>
<html ng-app="appNotepad">
<head>
    <title>Дополнительное задание 1</title>

    <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>

</head>
<body ng-controller="appNotepadCtrl">
    <div class="container" >
        <div class="row">
            <p>Files:</p>
            <ul class="list-group" style="cursor: pointer">
                <li class="list-group-item" ng-repeat="item in listFiles" id="id{{item.id}}" ng-click="open(item)">{{item.name}}</li>
            </ul>

            <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>

</body>
</html>

 

 

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

Отсортировать по: Стандартный | Последний | Голоса
Maxim Shulga разместил пост 30 декабря 2016

Задание 1

 

Код
<!DOCTYPE html>
<html ng-app="task">
<head>
    <title>Задание 1</title>

    <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>

</head>
<body ng-controller="taskCtrl">

    <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>
</body>
</html>

 

 

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

Maxim Shulga разместил пост 30 декабря 2016

Задание 2

 

Код
<!--view\add.html-->
<div>
    <h3>Add record</h3>
    <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="save(newItem)">Save</button>
        <button type="button" class="btn btn-default" ng-click="cancel()">Cancel</button>
    </form>
</div>


<!--view\view.html--> <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> <button type="button" class="btn btn-default" ng-click="add()">Add</button>




<!DOCTYPE html> <html ng-app="task"> <head> <title>Задание 2</title> <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> </head> <body ng-controller="taskCtrl"> <div class="container"> <div ng-view></div> <div>{{errorMsg}}</div> </div> </body> </html>

 

 

Close