我生待明日,万事成蹉跎

AngularJS简单入门(1)

AngularJS是为了克服HTML在构建应用上的不足,主要用于CRUD应用。搭配上Bootstrap的css样式使用的话,增删改查+页面美观度都非常的棒

以下是本文源码简单功能示例:

GIF

这篇学习笔记主要根据练习的代码进行注释讲解。下面列出本文用到的相关知识点,请各位看官结合代码看。

1、引入AngularJS,使用ng-app指令声明AngularJS管理边界
ng-app指令标记了AngularJS脚本的作用域,在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。也可以在局部使用ng-app指令,如<div ng-app>,则AngularJS脚本仅在该<div>中运行。
<html ng-app="todolist"><html>
2、AngularJS双向绑定简单使用   双大括号{{}}
3、常用指令演示  ng-model  ng-bind
 
4、在 $scope 中变量和方法的使用
5、Controllers的使用
下面是源码+注解:
<html class="no-js" lang="en" ng-app="todolist">
    <head>
        <meta charset="utf-8">
        <title>AngularJS演示</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <script src="js/angular.js"></script>
    </head>
    <body style="padding:40px" ng-controller="testCtrl">
    <div id="h">
        Hello {{'World'}}!
    </div>
    <div class="input-group">
        <input type="text" class="form-control" ng-model="task">
        <input type="text" class="form-control" ng-model="tasktest">
         <span class="input-group-btn">
             <button class="btn btn-default" ng-click="add()">提交</button>
         </span>
    </div>
    <h5>{{task}}</h5>
<!--    <div>{{'用户名'+task}}</div>   也可以用下面的-->
        <div ng-bind="'用户名'+task"></div>
<!--使用ng-bind可以不用双大括号,以免页面加载时显示{{}},不美观   也可以用ng-clock-->
       <div>$scope中定义了的:{{tasktest}}</div>
    <div class="{{task}}">输入则显示相应标签的效果--{{task}}</div>
<!--    <h4 ng-hide="tasks.length==0">任务列表</h4>   也可以用下面的-->
    <h4 ng-if="tasks.length>0">任务列表</h4>
    <h6>{{testname}}</h6>
    <ul class="list-group">
        <li  ng-repeat="theitems in tasks track by $index"
             class="list-group-item">{{theitems}}
            <a ng-click="tasks.splice($index)">删除</a>
        </li>
    </ul>
    <div ng-controller="ctrl2">
        <textarea ng-model="tasktest" id="" cols="30" rows="10">
        </textarea>
       另外controller的: {{tasktest}}<br/>
       <!--<h1 ng-bind="reverseFunction()">调用方法(反转方法):</h1>-->
        <input type="text" ng-model="user.uname">
        <input type="password" ng-model="user.pwd">
        <div ng-show="errormsg.length>0">{{errormsg}}</div>
        <button class="btn btn-success" ng-click="login()">登录</button>
    </div>

    </body>
    <script type="text/javascript">
        //testCtrl相当于controller   $scope相当于model(其所在函数里所有的都是model)    
         //view则是testCtrl绑定的html标签
        angular.module('todolist',[])//module创建一个angular模块  
        //todolist是自定义模块名,必须在某标签用ng-app声明
            .controller('testCtrl',function($scope){//  $scope是angular自带变量     
            //testCtrl是自定义控制器名,必须在某模块声明ng-controller
            $scope.tasktest="";//声明一个名为task的自定义变量  ng-model进行变量绑定
            $scope.tasks=[];//声明一个名为tasks的自定义数组变量 ng-repeat绑定并遍历  
            //数组变量不能重复(可通过track by $index解决)
            $scope.add=function(){//声明一个点击事件
               $scope.tasks.push($scope.task);
            };
            $scope.testname="测试测试";
        })
            .controller('ctrl2',function($scope){
                $scope.tasktest="";
                $scope.user={uname:'',pwd:''};
                $scope.reverseFunction=function(){
                    return $scope.tasktest.split("").reverse().join("");//反转字符串
                };
                $scope.login=function(){
//                     console.log($scope.user)
                    if($scope.user.uname=="admin32" && $scope.user.pwd=="admin"){
                        alert("登陆成功");
                        $scope.errormsg="";
                    }else{
                        $scope.errormsg="用户名或密码错误";
                    }
                };
                $scope.errormsg="";
            });
    </script>
</html>

未经允许不得转载:徐宏涛博客 » AngularJS简单入门(1)

分享到:更多 ()

评论 抢沙发

评论前必须登录!