我不能导入材料设计项目angularjs

时间:2016-03-24 09:48:04

标签: javascript html css angularjs

我有一个项目。我在html中列出了一些东西,它有angularjs的crud操作。但我想现在使用材料作为该列表。

这是我想要使用的设计:

http://codepen.io/zavoloklom/pen/IGkDz?editors=1100

我的索引页面是这样的:

 <!DOCTYPE html>
<html ng-app="todoApp">
<head><script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script></head>
<!--//<head>
   // <script>

      //  var app=angular.module('todoApp',[]);
      //  app.controller('todoController',function($scope, $rootScope) {


                //for (var i = 1; i <= 3; i++) {
                 //  $rootScope.list = '1afsdasasda'
           //         $rootScope.list= "asdasasda"
                    //alert("Rabbit " + i + " out of the hat!");


        //    }
       // })

    //</script>

//</head>-->

<body>
<div class="main-container" ng-controller="todoController">
    <div class="client-area">
        <label fo.table-container tabler="txt"></label>

         <input type="text" ng-model="title" placeholder="enter movie name here">
        <input type="text" ng-model="actors" placeholder="enter movie actors here">
        <!--<p>lsist :{{list}}</p>-->
        <button ng-click="addMovie(title,actors)">Add Movie</button>
        <table id="tab">
            <thead>
            <tr><th>Actors</th><th>ID</th><th>Name</th><th colspan="2">Options</th></tr>
            </thead>
            <tbody>


            <tr ng-repeat="task in tasks">
                <td ng-repeat="(key, val) in task">{{val}}   </td><td>

                <button ng-click="editMovie(task.id)">Edit</button><button ng-click="deleteMovie(task.id)">Delete</button></td>
            </tr>


            </tbody>
        </table>
    </div>
</div>
</body>
</html>

从那个材料项目中,我下载了4个文件。 index.js:

 * Material Design Responsive Table
 * Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7
 * You can use this table in Bootstrap (v3) projects. Material Design Responsive Table CSS-style will override basic bootstrap style.
 * JS used only for table constructor: you don't need it in your project
 */
var app=angular.module('todoApp',[]);
$(document).ready(function() {

    var table = $('#table');

    // Table bordered
    $('#table-bordered').change(function() {
        var value = $( this ).val();
        table.removeClass('table-bordered').addClass(value);
    });

    // Table striped
    $('#table-striped').change(function() {
        var value = $( this ).val();
        table.removeClass('table-striped').addClass(value);
    });

    // Table hover
    $('#table-hover').change(function() {
        var value = $( this ).val();
        table.removeClass('table-hover').addClass(value);
    });

    // Table color
    $('#table-color').change(function() {
        var value = $(this).val();
        table.removeClass(/^table-mc-/).addClass(value);
    });
});

// jQuery’s hasClass and removeClass on steroids
// by Nikita Vasilyev
// https://github.com/NV/jquery-regexp-classes
(function(removeClass) {

    jQuery.fn.removeClass = function( value ) {
        if ( value && typeof value.test === "function" ) {
            for ( var i = 0, l = this.length; i < l; i++ ) {
                var elem = this[i];
                if ( elem.nodeType === 1 && elem.className ) {
                    var classNames = elem.className.split( /\s+/ );

                    for ( var n = classNames.length; n--; ) {
                        if ( value.test(classNames[n]) ) {
                            classNames.splice(n, 1);
                        }
                    }
                    elem.className = jQuery.trim( classNames.join(" ") );
                }
            }
        } else {
            removeClass.call(this, value);
        }
        return this;
    }

})(jQuery.fn.removeClass);

我只添加了

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

因为没有调用这个js。

style.css和 normalize.css由于字符限制,我不能把它们放在这里。

我的angularjs文件,script.js:

var app=angular.module('todoApp',[]);
app.controller('todoController',function($scope,$http,$window){

  //  $window.alert("in todoctrl");
    $scope.addMovie=function(title,actors){
     //   $window.alert("ititle actors "+title+actors)
      //  $scope.title="title clicked "+title;

      //  $scope.actors="actors clicked "+actors;

       // $scope.added="the movie '"+title+"' with those actors '"+actors+"' added successfully";

        $http({
            method: 'POST',
            headers: {

                "Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
                "Access-Control-Allow-Origin": "*"
            },
            url: 'http://localhost:8181/MovieDb/add/'+title+"/"+actors
        }).then(function successCallback() {// $window.alert("in addmoviesuccess");
            //  $scope.check = response.data;

            //    $scope.names = response.data.title;

            $scope.listMovie();

        })

        //$window.alert("bitiste addmovie")
       // $scope.listMovie();
    },

        $scope.deleteMovie=function(id) {
            // $scope.id="id clicked "+id;


             //  $scope.deleted="the movie with id '"+id+"' deleted successfully";
         //    $window.alert("in deletemovie id"+id);

             $http({
             method: 'DELETE',
             headers: {
             "Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
             "Access-Control-Allow-Origin": "*",
             "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"

             },
             url: 'http://localhost:8181/MovieDb/remove/'+id
             }).then(function successCallback() {// $window.alert("in removemoviesuccess");
                 //  $scope.check = response.data;

                 //    $scope.names = response.data.title;

                 $scope.listMovie();

             })


            /* $http.get('http://localhost:8181/MovieDb/remove/'+id).then(function(){

             $http.get('http://localhost:8181/MovieDb/list').then(function successCallback(response) { $window.alert("in listmoviesuccess");
             //  $scope.check = response.data;
             console.log(response);
             $scope.tasks = response.data;
             //    $scope.names = response.data.title;

             }, function errorCallback(response) {$window.alert("in listmovie err");
             //  console.log(response);
             // $scope.check = response;

             }

             //$scope.listMovie();
             );});},*/

        },
        $scope.editMovie=function(id){
            $scope.id="id clicked "+id;

            //  $scope.deleted="the movie with id '"+id+"' deleted successfully";
         //   $window.alert("in edittemovie id"+id);
            $http({
                method: 'PUT',
                headers: {
                    "Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
                    "Access-Control-Allow-Origin": "*",
                    "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"

                },
                url: 'http://localhost:8181/MovieDb/edit/'+id+title+actors
            }).then(function successCallback() {// $window.alert("in removemoviesuccess");
                //  $scope.check = response.data;

                //    $scope.names = response.data.title;

                $scope.listMovie();

            })
        },

        $scope.listMovie=function(){
      //      var list = 1
        //    $window.alert("in listmovie");
            $scope.check='NO';
        //    $scope.list="list clicked "+list;
         //   $window.alert(" listmovie "+list);
          // $scope.listed="the movies are listing: "+list;
            $http({
                method: 'GET',
                headers: {

                    "Authorization": "55d5927329415b000100003b63a9e1b480b64a1040a902a26da862d3",
                    "Access-Control-Allow-Origin": "*"
                },
                url: 'http://localhost:8181/MovieDb/list'
            }).then(function successCallback(response) { //$window.alert("in listmoviesuccess");
              //  $scope.check = response.data;
                console.log(response);
              $scope.tasks = response.data;
            //    $scope.names = response.data.title;



            }, function errorCallback(response) {//$window.alert("in listmovie err");
              //  console.log(response);
               // $scope.check = response;
            }
            );

            //$window.alert("in listmovie end");
        };
    //$window.alert("after listmovieq");
    $scope.listMovie();

    //$window.alert("after listmovie");

});

我将项目的html更改为与我合并:

<!DOCTYPE html>
<html lang="en" ng-app="todoApp">
<head>
    <meta charset="UTF-8">
    <title>yavuz</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script>
    <script src="index.js"></script>
</head>
<body>


<div id="demo">
    <h1>Material Design Responsive Table</h1>
    <h2>Table of my other Material Design works (list was updated 08.2015)</h2>

    <!-- Responsive table starts here -->
    <!-- For correct display on small screens you must add 'data-title' to each 'td' in your table -->
    <div class="table-responsive-vertical shadow-z-1" ng-controller="todoController">
        <!-- Table starts here -->
        <table id="table" class="table table-hover table-mc-light-blue">
            <thead>

            <tr><th>Actors</th><th>ID</th><th>Name</th><th colspan="2">Options</th></tr>

            </thead>
            <tr ng-repeat="task in tasks">
                <td ng-repeat="(key, val) in task">{{val}}   </td><td>

                <button ng-click="editMovie(task.id)">Edit</button><button ng-click="deleteMovie(task.id)">Delete</button></td>
            </tr>

        </table>
    </div>

    <!-- Table Constructor change table classes, you don't need it in your project -->
    <div style="width: 45%; display: inline-block; vertical-align: top">
        <h2>Table Constructor</h2>
        <p>
            <label for="table-bordered">Style: bordered</label>
            <select id="table-bordered" name="table-bordered">
                <option selected value="">No</option>
                <option value="table-bordered">Yes</option>
            </select>
        </p>
        <p>
            <label for="table-striped">Style: striped</label>
            <select id="table-striped" name="table-striped">
                <option selected value="">No</option>
                <option value="table-striped">Yes</option>
            </select>
        </p>
        <p>
            <label for="table-hover">Style: hover</label>
            <select id="table-hover" name="table-hover">
                <option value="">No</option>
                <option selected value="table-hover">Yes</option>
            </select>
        </p>
        <p>
            <label for="table-color">Style: color</label>
            <select id="table-color" name="table-color">
                <option value="">Default</option>
                <option value="table-mc-red">Red</option>
                <option value="table-mc-pink">Pink</option>
                <option value="table-mc-purple">Purple</option>
                <option value="table-mc-deep-purple">Deep Purple</option>
                <option value="table-mc-indigo">Indigo</option>
                <option value="table-mc-blue">Blue</option>
                <option selected value="table-mc-light-blue">Light Blue</option>
                <option value="table-mc-cyan">Cyan</option>
                <option value="table-mc-teal">Teal</option>
                <option value="table-mc-green">Green</option>
                <option value="table-mc-light-green">Light Green</option>
                <option value="table-mc-lime">Lime</option>
                <option value="table-mc-yellow">Yellow</option>
                <option value="table-mc-amber">Amber</option>
                <option value="table-mc-orange">Orange</option>
                <option value="table-mc-deep-orange">Deep Orange</option>
            </select>
        </p>
    </div>
    <div style="width: 45%; display: inline-block; vertical-align: top; margin-left: 30px;">
        <h2>Description</h2>
        <p>Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7</p>
        <p>You can use this table in Bootstrap (v3) projects. Material Design Responsive Table CSS-style will override basic bootstrap style.</p>
        <p class="mdt-subhead-2"><strong>Donate:</strong> You can support me via <a class="paypal" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&amp;business=s%2ekupletsky%40gmail%2ecom&amp;lc=US&amp;item_name=Material%20Design%20Responsive%20Table&amp;currency_code=USD&amp;bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted">PayPal</a>, <a class="webmoney" href="https://funding.webmoney.ru/material-design-iconic-font/donate">WebMoney</a> or <a class="gratipay" href="http://gratipay.com/zavoloklom/" target="_blank">Gratipay</a></p>
    </div>
</div>
</body>
</html>

它有一次加载我的列表,旧的html风格,但之后我无法加载。

ng-controller="todoController" I put this to anywhere but it doesn't work. I put alert to script.js if it is invoked but still it is not invoked. I can't understand why.

编辑:当我删除html中的index.js时,我可以看到我的输出为旧样式。

我做了那些

bower install bootstrap --save

凉亭安装角度材料

1 个答案:

答案 0 :(得分:0)

我没有在html中看到对所需的.js和.css文件的引用。

您需要:
1. angular-material.js(或angular-material.min.js)
2. angular-material.css(或angular-material.min.css)
3. angular-material.layouts.css(或angular-material.layouts.min.css)

您可能还需要:
1. angular-animate.js(或angular-animate.min.js)
2. angular-aria.js(或angular-aria.min.js)

最后,您应该将ngMaterial注入主应用模块。

var app = angular.module('todoApp', [ 'ngMaterial' ]);