AngularJS——1初学

最新推荐文章于 2024-06-11 09:53:37 发布

呆傻大哥

最新推荐文章于 2024-06-11 09:53:37 发布

阅读量625

点赞数

分类专栏： angularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/cj403522231/article/details/46683027

版权

angularJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近读文章，发现很多做前端开发的程序员都会学习AngularJS，今天我也尝试学习google提供的这个前端框架。

首先介绍一下“指令”，AngularJS 通过被称为 “指令”的新属性来扩展 HTML，以ng-开头，下面介绍常用的“指令”：

引用自http://www.w3cschool.cc/angularjs/angularjs-reference.html

下面是我做的一个简单的例子

<!doctype html>
<html ng-app>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>

    </head>
    <body>

        <div ng-controller="controller">
            <form novalidate class="css-form">
                Name: <input type="text" ng-model="user.name" required /><br>
                E-mail: <input type="email" ng-model="user.email" required /><br>
                Age: <input type="number" ng-model="user.age" min="1" max="99" required /><br>
                Gender: <input type="radio" ng-model="user.gender" value="male"/>male
                    <input type="radio" ng-model="user.gender" value="female" />female<br>
                <button ng-click="reset()">reset</button>
                <button ng-click="update(user)">save</button>
            </form>
            <pre>form = {{user | json}}</pre>
            <pre>master = {{master | json}}</pre>
        </div>

        <style type="text/css">
            .css-form input.ng-invalid.ng-dirty {
                background-color: #FA787E;
            }
            .css-form input.ng-valid.ng-dirty {
                background-color: #78FA89;
            }
        </style>
        <script type="text/javascript">
            function controller($scope){
                $scope.master = {};
                $scope.update = function(user){
                    $scope.master = angular.copy(user);
                };
                $scope.reset = function(){
                    $scope.user = angular.copy($scope.master);
                };
                $scope.reset();
            }
        </script>
    </body>
</html>

该例中有ng-controller、ng-model、ng-click指令的用法。

在后面的学习中，我将更多的学习AngularJS的原理和相关特性，同时在项目中尝试运用

呆傻大哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS——1初学

最近读文章，发现很多做前端开发的程序员都会学习AngularJS，今天我也尝试学习google提供的这个前端框架。首先介绍一下“指令”，AngularJS 通过被称为 “指令”的新属性来扩展 HTML，以ng-开头，下面介绍常用的“指令”：引用自http://www.w3cschool.cc/angularjs/angularjs-reference.html下面是我做的一
复制链接

扫一扫