angularJS 入门基础

前端技术 2023/09/05 JavaScript

angular 　　

所有用到的库, 全部用的CDN：

http://cdn.bootcss.com/jquery/2.1.1/jquery.js\"></script>
    <script src=\"http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js\"></script>
    <link href=\"http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css\" rel=\"stylesheet\">
    <script src=\"http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js\" type=\"text/javascript\"></script>

.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>angular</title>
　　<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">
    <script src=\"http://cdn.bootcss.com/jquery/2.1.1/jquery.js\"></script>
    <script src=\"http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js\"></script>
    <link href=\"http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css\" rel=\"stylesheet\">
    <script src=\"http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js\" type=\"text/javascript\"></script>
</head>
<body ng-app=\"app\">
    <script type=\"text/javascript\">
           var app = angular.module(\"app\",[]);
    </script>
    <div class=\"panel panel-default\">
        <div class=\"panel-heading\">
            angular最强大的东西,数据的绑定binding
        </div>
        <div class=\"panel-body\">
            <div id=\"bind\" ng-controller=\"bf\">
                <input type=\"text\" ng-model=\"data\" />
                {{data}}
                <script>
                    app.controller(\"bf\", function($scope) {
                        $scope.data = \"testData\";
                        //$scope.$apply();
                    });
                </script>
            </div>
        </div>
    </div>
</body>
</html>

通过angular,展示数组对应的数据;.

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>angular</title>
　　<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">
    <script src=\"http://cdn.bootcss.com/jquery/2.1.1/jquery.js\"></script>
    <script src=\"http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js\"></script>
    <link href=\"http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css\" rel=\"stylesheet\">
    <script src=\"http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js\" type=\"text/javascript\"></script>
</head>
<body ng-app=\"app\">
    <script type=\"text/javascript\">
           var app = angular.module(\"app\",[]);
    </script>
    <div class=\"panel panel-default\">
        <div class=\"panel-heading\">
            通过angular,展示数组对应的数据;
        </div>
        <div class=\"panel-body\">
            <div id=\"arr-bind\" ng-app=\"arr-app\" ng-controller=\"arrCon\">
                <style>
                    .s{
                        color:#f00;
                    }
                    li{
                        cursor: pointer;
                    }
                </style>
                <ul>
                    <li ng-repeat=\"i in lists\" ng-click=\"bered($index)\" ng-class=\"{s : $index == flag}\">
                        {{i.name}}----{{i.age}}
                    </li>
                </ul>
                <script>
                    //angular.module(\"arr-app\", []);
                    function arrCon($scope) {
                        $scope.flag = 0;
                        $scope.bered = function(i) {
                            $scope.flag = i;
                        };
                        $scope.lists = [
                            {name : \"hehe\",
                                age:10},
                            {
                                name : \"xx\",
                                age : 20
                            },
                            {
                                name : \"yy\",
                                age : 2
                            },
                            {
                                name : \"jj\",
                                age : 220
                            }
                        ]
                    };
                </script>
            </div>
        </div>
    </div>
</body>
</html>

.数据过滤器的DEMO：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>angular</title>
　　<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">
    <script src=\"http://cdn.bootcss.com/jquery/2.1.1/jquery.js\"></script>
    <script src=\"http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js\"></script>
    <link href=\"http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css\" rel=\"stylesheet\">
    <script src=\"http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js\" type=\"text/javascript\"></script>
</head>
<body ng-app=\"app\">
    <script type=\"text/javascript\">
           var app = angular.module(\"app\",[]);
    </script>
    <div class=\"panel panel-default\">
        <div class=\"panel-heading\">
            数据过滤器;
        </div>
        <div class=\"panel-body\" ng-controller=\"filte\">
            {{sourCode}}
            <br>
            {{sourCode | up}}
        </div>
        <script>
            function filte($scope) {
                $scope.sourCode = \"hehe lala dudu oo zz\";
            };
            app.filter(\"up\" ,function() {
                return function(ipt) {
                    return ipt.replace(/ (\\w)/g,function($0,$1) {
                        return \" \"+$1.toUpperCase();
                    });
                }
            });
        </script>
    </div>
</body>
</html>

.factory工厂, $provider, service等等都是一样样的, 不要感觉很难, 其实就是看出一个数据模型或者实例就好了;：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>angular</title>
　　<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\">
    <script src=\"http://cdn.bootcss.com/jquery/2.1.1/jquery.js\"></script>
    <script src=\"http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js\"></script>
    <link href=\"http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css\" rel=\"stylesheet\">
    <script src=\"http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js\" type=\"text/javascript\"></script>
</head>
<body ng-app=\"app\">
    <script type=\"text/javascript\">
           var app = angular.module(\"app\",[]);
    </script>
    <div id=\"factory\" class=\"panel panel-default\">
        <div class=\"panel-heading\">
            angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;
        </div>
        <div  class=\"panel-body\" ng-controller=\"factory\">
            {{json}}
            <script>
                app.factory(\"ff\", function() {
                    return {
                        \"noting\" : \"json\"
                    };
                });
                app.controller(\"factory\", function($scope, ff) {
                    $scope.json = ff;
                });
            </script>
        </div>
    </div>
    <div class=\"panel panel-default\">
        <div class=\"panel-title\">
            angular的指令;
        </div>
        <div class=\"panel-body\">
            <heh>do you content for?</heh>
            <script>
                app.directive(\"heh\", function() {
                    return {
                        restrict : \"AE\",
                        replace : true,
                        transclude : true,
                        template : \'<div> <button class=\"btn-danger\" ng-transclude></button></div>\'
                    };
                })
            </script>
        </div>
    </div>

</body>
</html>

本文地址：https://www.stayed.cn/item/12687

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案