Sunday, 20 August 2017

simple crud using angular js

<!DOCTYPE html>
<html ng-app="myApp">
<head >
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.js"></script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
                    <li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content" ng-controller="GreetingController">
        @RenderBody()

        <input type="text" ng-model="listitem" />
        <button value="add item" ng-click="additem()">add item</button>
        <hr />
        {{greeting}}-<a ng-click="showdata()">show list</a>
        <ul>
            <li ng-repeat="item in myWelcome" ng-click="getitembyid(item)" >{{item}}--<a ng-click="removeitem(item)">remove item</a></li>
        </ul>
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    <script>

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

        myApp.controller('GreetingController', function ($scope,$http) {
         
            $scope.showdata = function showdata() {
                $http.get(
                   'api/values/'
               ).then(function mySuccess(response) {
                   $scope.myWelcome = response.data;
               }, function myError(response) {
                   $scope.myWelcome = response.statusText;
               });
            };
            $scope.getitembyid = function getitembyid(item) {
                $http.get(
                 'api/values/' + 1
             ).then(function mySuccess(response) {
                 //$scope.myWelcome = response.data;
                 //alert(response.data);
             }, function myError(response) {
                 $scope.myWelcome = response.statusText;
             });

            };

            $scope.removeitem = function removeitem(item) {
             
                var index = $scope.myWelcome.indexOf(item);
                $scope.myWelcome.splice(index, 1);
            }

            $scope.additem = function additem() {
             
                $scope.myWelcome.push($scope.listitem);
                $scope.listitem = "";
            }
           
        }
     
        );
    </script>
</body>
</html>

No comments:

Post a Comment