5
\$\begingroup\$

I want to know what needs to improve with my application. Maybe there is a better way instead of what I am using currently.

index.html:

    <!DOCTYPE html>

<html lang="en" ng-app="MyApp">
<head>
    <meta http-equiv="x-ua-compatible" content="IE=9" charset="UTF-8"/>
    <title>Angular JS</title>

    <script src="lib/jquery-1.11.1.min.js" type="text/javascript"></script>

    <script src="lib/JSON3.min.js" type="text/javascript"></script>

    <script src="lib/angular/angular.js" type="text/javascript"></script>
    <script src="lib/angular/angular-route.min.js" type="text/javascript"></script>
    <script src="lib/angular/app.js" type="text/javascript"></script>
    <script src="lib/angular/controllers.js" type="text/javascript"></script>
</head>
<body>
<div>
    <h1>My App </h1>
</div>  
<div ng-view>

</div>
</body>
</html>

list.html:

    <section>
    <a href="#/new">New</a>
</section>
<section>
    <select ng-model="orderRecord">
        <option value="Id">Id</option>
        <option value="LastName">LastName</option>
    </select>
    <label>Ascending</label>
    <input type="radio" ng-model="direction" name="direction" checked/>
    <label>Descending</label>
    <input type="radio" ng-model="direction" name="direction" value="reverse"/>
    <input type="text" ng-model="query"/>
</section>
<section>
    <table>
        <tr ng-repeat="item in logs | filter: query | orderBy: orderRecord:direction">
            <td>{{item.Id}}</td>
            <td>{{item.FirstName}}</td>
            <td>{{item.LastName}}</td>
            <td>{{item.Mi}}</td>
            <td><a href="#/details/{{logs.indexOf(item)}}">Edit</a></td>
        </tr>
    </table>
</section>

details.html:

    <section>
    <table>
        <tr>
            <td>Id: <input type="text" ng-model="log.Id" readonly /></td>
        </tr>
        <tr>
            <td>FirstName: <input type="text" ng-model="log.FirstName" /></td>
        </tr>
        <tr>
            <td>LastName: <input type="text" ng-model="log.LastName" /></td>
        </tr>
        <tr>
            <td>Mi: <input type="text" ng-model="log.Mi" /></td>
        </tr>

    </table>
</section>
<section>
    <input type="button" value="Update" ng-click="Update(log)"/>
    <input type="button" value="Delete" ng-click="Delete(log.Id)"/>
</section>

new.html:

    <section>
    <table ng-controller="NewController">
        <tr>
            <td>FirstName: <input type="text" ng-model="FirstName" /></td>
        </tr>
        <tr>
            <td>LastName: <input type="text" ng-model="LastName" /></td>
        </tr>
        <tr>
            <td>Mi: <input type="text" ng-model="Mi" /></td>
        </tr>
        <tr>
            <td><input type="button" ng-click="Create()" value="Create "/></td>
        </tr>
    </table>
</section>

app.js:

var myApp = angular.module('MyApp', [
    'ngRoute',
    'logController'
]);

myApp.config(['$routeProvider', function($routeProvider){
    $routeProvider.
    when('/list', {
        templateUrl: 'partials/list.html',
        controller: 'ListController'
    }).
    when('/details/:itemId', {
        templateUrl: 'partials/details.html',
        controller: 'DetailsController'
    }).
    when('/new', {
        templateUrl: 'partials/new.html',
        controller: 'NewController'
    }).
    otherwise({
        redirectTo: '/list'
    });
}]);

controller.js:

    var logController = angular.module('logController', []);
var logData = null;

logController.controller('ListController', ['$scope', '$http', function ($scope, $http) {
    $http.post('testws.asmx/GetUsers', {
        headers: { 'Content-Type': 'application/json; charset=utf-8' }
    }).success(function (data) {
        $scope.logs = data.d;
        $scope.orderRecord = 'Id';

        logData = $scope.logs;
    })
} ]);

logController.controller('DetailsController', ['$scope', '$http', '$routeParams', '$location', function ($scope, $http, $routeParams, $location) {
    $scope.logs = logData;
    $scope.log = logData[$routeParams.itemId];

    $scope.Update = function (log) {
        $http.post('testws.asmx/UpdateUser', JSON.stringify({ Id: log.Id, FirstName: log.FirstName, LastName: log.LastName, Mi: log.Mi }), {
            headers: { 'Content-Type': 'application/json; charset=utf-8' }
        }).success(function (data) {
            $location.path("/list");
        }).error(function (err) {
            alert(err.Message);
        });
    };

    $scope.Delete = function (id) {
        $http.post('testws.asmx/DeleteUser', JSON.stringify({ Id: id }), {
            headers: { 'Content-Type': 'application/json; charset=utf-8' }
        }).success(function (data) {
            $location.path("/list");
        }).error(function (err) {
            alert(err.Message);
        });
    }

} ]);

logController.controller('NewController', ['$scope', '$http', '$location', function ($scope, $http, $location) {
    $scope.Create = function () {
        var user = {
            FirstName: $scope.FirstName,
            LastName: $scope.LastName,
            Mi: $scope.Mi
        };

        $http.post('testws.asmx/AddUser', JSON.stringify(user), {
            headers: { 'Content-Type': 'application/json; charset=utf-8' }
        }).success(function (data) {
            $location.path("/list");
        }).error(function (err) {
            alert(err.Message);
        });
    }
} ]);
\$\endgroup\$
2
\$\begingroup\$

Interesting,

a readable Angular submission, I quite like it.

The only trouble I see is that controller.js has some serious copy pastage, you might want to consider a helper function for this part:

    $http.post('testws.asmx/AddUser', JSON.stringify(user), {
        headers: { 'Content-Type': 'application/json; charset=utf-8' }
    }).success(function (data) {
        $location.path("/list");
    }).error(function (err) {
        alert(err.Message);
    });

only the URL and the original data is different for your call to 'testws.asmx/DeleteUser' and testws.asmx/AddUser.

I like how this code seems compatible with older IE's without too many hacks.

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.