我生待明日,万事成蹉跎

AngularJS简单入门(2)—Services与指令的使用

本篇笔记主要通过源码注解注明相关知识点,以下是知识点,在源码中有相关说明:
1、如何定义一个Services服务
AngularJS中Services有多种表现形式:value constant(常量) factory service provider(高级使用)
2、如何通过Services在多个Controller中共享数据
3、常用指令的使用
ng-bind,ng-model,ng-show/hide,ng-if,ng-submit,ng-disabled
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <title>AngularJS演示2</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <style type="text/css">
            .tx{
                width: 120px;height: 120px;
            }
        </style>
        <script src="js/angular.js"></script>
    </head>
    <body style="padding:40px" ng-app="theapp">
          <div ng-controller="thectrl">
              Value—{{theUname}}<br />
              Constant—{{tname}}<br/>
              Factory—{{data.msg}}<br />
              Service—{{newname}}
          </div>
          <div ng-controller="c1">
              <input type="text" ng-model="thedata.message">
              {{thedata.message}}
          </div>
          <div ng-controller="c2">
              <input type="text" ng-model="thedata.message">
              {{thedata.message}}
          </div>
          <hr />
    <div ng-controller="newCtrl">
        <form name="f" ng-submit="register(user)">

                  <legend>基本信息</legend>
            <!--ng-show与ng-hide相反  ng-if与ng-show用法相似,不过ng-if是通过移除添加DOM元素来实现-->
            <img src="{{user.icon}}" alt="" ng-class="{'tx':user.showpic}" ng-show="user.isShowpic">
                  <div>
                      <fieldset>
                        <!--  required与ng-disabled搭配使用——required代表为必填
                        ng-disabled当未填时则将按钮置为disabled  disabled还可用于select标签等地方实现相应选择效果-->
                      <input type="text" ng-model="user.uname" placeholder="用户名" required>
                      <input type="password" placeholder="密码">
                      职位:<select>
                      <option value="">--请选择--</option>
                      <option value="1" ng-selected="user.zw=='1'">记者</option>
                      <option value="2" ng-selected="user.zw=='2'">领导</option>
                  </select>
                      性别:
                      <input type="radio" ng-checked="user.gender=='1'" name="gender">&nbsp;男&nbsp;
                      <input type="radio"  ng-checked="user.gender=='2'" name="gender">&nbsp;女&nbsp;
                       </fieldset>
                      <fieldset>
                          <legend>爱好</legend>
                          <div>
                              <input type="checkbox" ng-checked="ischecked(1)" name="hobby">&nbsp;乒乓&nbsp;
                              <input type="checkbox" ng-checked="ischecked(2)" name="hobby">&nbsp;篮球&nbsp;
                              <input type="checkbox" ng-checked="ischecked(3)" name="hobby">&nbsp;足球&nbsp;
                          </div>
                          <button type="submit" class="btn btn-success" ng-disabled="f.$invalid">提交</button>
                      </fieldset>
                  </div>
        </form>
       </div>
    </div>
    </body>
    <script type="text/javascript">
         angular.module('theapp',[])
             //定义Services服务
             .value('uname','youmoren')
             .value('uname','zhangsan')//值可改变
             .constant('tname','papapa')
             .constant('tname','dadada')//常量值不可改变
             .factory('data',function(){
                 return{
                     msg:'Are u OK?',
                     setmsg:function(){
                         this.msg='不OK';
                     }
                 }
             })
             .service('user',function(){
                 this.firstname='darren';
                 this.lastname='carter';
                 this.getname=function (){
                     return this.firstname+this.lastname;
                 }
             })
             //通过services在多个controller中共享数据
                 //应用场景例如:下单页面商品和购物车商品一致
             .factory('facdata',function(){//此时的factory相当于一个存储共用变量的容器
                 return{
                     message:'大鱼慢慢游'
                 }
             })
             .controller('c1',function($scope,facdata){
                   $scope.thedata=facdata;
             })
             .controller('c2',function($scope,facdata){
                 $scope.thedata=facdata;
             })
             //function里的其它参数就是angularjs里的一些依赖注入
             .controller('thectrl',function($scope,uname,tname,data,user){
                 $scope.msg="ffff";
                 $scope.theUname=uname;
                 $scope.tname=tname;
                 $scope.data=data;
                 data.setmsg();
                 $scope.newname=user.getname();
             })
             .controller('newCtrl',function($scope){
                 $scope.user={
                     icon:'img/a.jpg',
                     uname:'张三',
                     pwd:'',
                     zw:'2',
                     gender:'2',
                     aihao:[2,3],
                     showpic:true,
                     isShowpic:true
                 };
                 $scope.ischecked=function(m){
                     var isok=false;
                     for(var i=0;i<=$scope.user.aihao.length;i++){
                          if(m==$scope.user.aihao[i]){
                              isok=true;
                              break;
                          }
                     }
                     return isok;
                 };
                 $scope.register=function(u){ /*接收表单里所有值(获取对象)*/
                     console.log(u)
                 }
             })
    </script>
</html>

未经允许不得转载:徐宏涛博客 » AngularJS简单入门(2)—Services与指令的使用

分享到:更多 ()

评论 抢沙发

评论前必须登录!