zoukankan      html  css  js  c++  java

  • Angular JS 入门基础

    AngularJS 的指令与表达式：

    AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
    【AngularJS常用指令】
    1、ng-app:声明Angular所管辖的区域。一般写在body或html上，原则上一个页面只有一个；
    <body ng-app=""></body>

    2、ng-model:把元素值（比如输入域的值）绑定到应用程序的变量中。
    <input type="text" ng-model="name"/>

    3、ng-bind:把应用程序变量中的数据绑定到 HTML视图中。可用表达式{{ }}替代；
    <div ng-bind="name"></div>
    <div>{{name}}</div>

    4、ng-init:初始化 AngularJS应用程序中的变量。
    <body ng-app="" ng-init="name=123">

    5、表达式： {{}} 绑定表达式，可以包含文字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=""替代
    {{ 5 +""+ 5 + ',Angular'}}

    【基本概念】
    指令：AngularJS中，通过扩展HTML的属性提供功能。所以，ng-开头的新属性，被我们称为指令

    MVC与作用域：

    [MVC三层架构]

    1、Model(模型)：应用程序中用于处理数据的部分。(保存或修改数据到数据库、变量等)。AngularJS中的Model特指的是：数据

    View(视图)：用户看到的用于显示数据的页面；

    Controller(控制器)：应用程序中处理用户交互的部分。负责从视图读取数据，控制用户输入，并向模型发送数据。

    2、工作原理： 用户从视图层发出请求，controller接收到请求后转发给对应的model处理，model处理完成后返回结果给controller，并在view层反馈给用户。

    创建一个Angular模块，即ng-app所绑定的部分,需传递两个参数：
    ① 模块名称，即ng-app所需要绑定的名称。ng-app="myApp"
    ② 数组：需要注入的模块名称，不需要可为空。
    var app = angular.module("myApp",[]);

    在Angular模块上，创建一个控制器Controller，需要传递两个参数
    ① Controller名称，即ng-controller需绑定的名称。ng-controller="myCtrl"
    ② Controller的构造函数：构造函数可以传入多个参数，包括$scope/$rootScope以及各种系统内置对象；

    [AngularJS中的作用域]
    ① $scope:局部作用域，声明在$scope上的属性和方法，只能在当前Controller中使用；
    ② $rootScope:根作用域，声明在$rootScope上的属性和方法，可以在ng-app所包含的任何区域使用(无论是否同一Controller，或是否在Controller包含范围中)。
    >>> 若没有使用$scope声明变量，而直接在html中使用ng-model绑定的变量作用域为：
    1.如果ng-model在某个ng-controller中，则此变量会默认绑定到当前Controller的$scope上；
    2.如果ng-model没有在任何一个ng-controller中，则此变量将绑定在$rootScope上；

    AngularJS中，变量作用域的机制：
    1、作用域与DOM树一样，是树状结构
    2、子作用域能够访问父作用域，但父作用域无法访问子作用域
    3、子作用域只能读取父作用域，但无法修改父作用域数据
    　　基于第三条，如果子作用域需要访问父作用域并且修改其中的值则可以使用引用数据类型，
    　　因为如果是基本数据类型，子作用域会把父作用域中变量的值取到，但取到后修改变量值不会影响父作用域，
    　　但如果是引用数据类型，子作用域取到父作用域的变量，实际是取到了变量的地址，此时修改变量的值也会使父作用域的值改变

    <div ng-controller="myCtrl">
            <input type="text" ng-model="name"/>
            <div ng-bind="name"></div>
            <div ng-bind="classes.name"></div>
</div>

app.controller("myCtrl",function($scope,$rootScope){
            //$scope.name = "hahaha";
            $rootScope.age = 14;
            $scope.classes = {
                name:"hehehe",
                num:"33"
            };
        });

    过滤器：

    AngularJS中，过滤器可以使用一个管道字符（|）添加到表达式和指令中。包括系统内置过滤器和自定义过滤器
    >>> 系统内置过滤器：
    currency 格式化数字为货币格式。
    filter 从数组项中选择一个子集。
    lowercase 格式化字符串为小写。
    orderBy 根据某个表达式排列数组。
    uppercase 格式化字符串为大写。

    <div class="form-group">
            <label>请输入筛选信息：</label>
            <input type="text" ng-model="search" />
</div>
        
<table class="table table-bordered">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>成绩</th>
            </tr>
        </thead>
            <tr ng-repeat="item in classes| filter:search | orderBy:'score'">
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.score}}</td>
            </tr>
</table>

angular.module("app",[])
        .controller("ctrl",function($scope){
            $scope.classes = [
                {name:"张二",age:"12",score:"88"},
                {name:"张三",age:"12",score:"88"},
                {name:"李四",age:"15",score:"78"},
                {name:"李五",age:"15",score:"78"},
                {name:"王大麻子",age:"18",score:"98"},
                {name:"王二麻子",age:"18",score:"98"}
            ];
            
            
})

     自定义过滤器

    .filter('reverse', function() {
            
          return function(text) {
                if(!angular.isString(text)){
                    return "您输入的内容不是字符串";
                }else{
                    return text.split("").reverse().join("");
                }
                
         }
})

    AngularJS服务：

    【服务Service】
    * 1、内置服务：
    * >>> 使用内置服务,必须在Controller中通过函数的参数注入进来！！！！！
    * $location：返回当前页面的 URL地址。
    * $http:向服务器发送请求，应用响应服务器传送过来的数据,类似于Ajax
    * $timeout：相当于setTimeout();
    * $interval：相当于setInterval();

    <pre>{{local}}</pre>
<p ng-bind="myHeader"></p>
<p ng-bind="num"></p>

angular.module("app",[])
        .controller("ctrl",function($scope,$location,$timeout,$interval,$hexafy){
            $scope.local = $location.$$host;
            $timeout(function () {
                $scope.myHeader = "How are you today?";
            }, 2000);
            $scope.num = 0;
            $interval(function(){
                $scope.num ++;
            },1000);
            
})

    自定义服务

    <p>{{123|filt}}</p>
        
<p>{{123|filt1}}</p>

.service('hexafy', function() {
        this.$$gongneng = "将转入的数字，转为16进制";
         this.myFunc = function (x) {
                return x.toString(16);
         }
})
.filter("filt",function(){
    return function(x){
        return x.toString(16);
    }
})
/*在过滤器中，调用自定义服务*/
.filter("filt1",function(hexafy){
    return function(x){
        return hexafy.myFunc(x);
    }
})

    【服务factory】
     factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
    通常我们使用 factory 函数来计算或返回值。(使用上与service差距不大)

    <p >
    [功能]<br />
    {{gongneng}}
</p>
<p>255转成16进制</p>
        

angular.module("app",[])
    .controller("ctrl",function($scope,hexafy){
            $scope.gongneng = hexafy.gongneng;
            $scope.num = hexafy.myFunc(255);
        })
        
    .factory("hexafy",function(){
        var obj = {
                gongneng : "将转入的数字，转为16进制",
                myFunc : function(x){
                    return x.toString(16);
            }
        };
        return obj;
})

    【自定义服务provide】
    1、在AngularJS中，Service，factory都是基于provider实现的。
    2、在provider中，通过$get()方法提供了factory的写法，用于返回 value/service/factory。；
    3、provider是三种自定义服务中，唯一可以写进config配置阶段的一种。

    如果服务，必须要在配置阶段执行，那么必须使用provider。否则，一般使用Service或factory

    <p>
        [功能]<br/>
        {{gongneng}}
</p>


.config(function($provide){
        $provide.provider('hexafy',function(){
                //默认使用Service的写法
    //            this.gongneng = "将转入的数字，转为16进制";
            this.$get = function(){
                var obj = {
                    gongneng : "将转入的数字，转为16进制",
                    myFunc : function(x){
                        return x.toString(16);
                    }
                }
                return obj;
            }
        })
})

    .controller("ctrl",function($scope,hexafy){
    　　$scope.gongneng = hexafy.gongneng;
    　　$scope.num = hexafy.myFunc(255);
    })

    /*定义一个provider服务*/
        .provider('hexafy',function(){
            //默认使用Service的写法
//            this.gongneng = "将转入的数字，转为16进制";
            this.$get = function(){
                var obj = {
                    gongneng : "将转入的数字，转为16进制",
                    myFunc : function(x){
                        return x.toString(16);
                    }
                }
                return obj;
            }
        })

    【HTTP&select】

    $Http：
    1、在AngularJS中，Service，factory都是基于provider实现的。
    2、在provider中，通过$get()方法提供了factory的写法，用于返回 value/service/factory。；
    3、provider是三种自定义服务中，唯一可以写进config配置阶段的一种。

    如果服务，必须要在配置阶段执行，那么必须使用provider。否则，一般使用Service或factory

    angular.module("app",[])

    .controller("ctrl",function($scope,$http){
        // 简单的 GET 请求，可以改为 POST
        $http({
               method: 'GET',
               url: 'h51701.json'
         }).then(function successCallback(res) {
                 $scope.res = res.data; //data 从返回的信息中，
          }, function errorCallback(response) {
                    // 请求失败执行代码
        });
            
})

    $select:

    1、使用数组作为数据源，其中x表示数组每一项，
    默认将x直接绑定到option的value中，而option显示的内容，由前面的x for...决定

    <select ng-model="name" ng-options="x.site for x in sites"></select>

    2、使用对象作为数据源,其中，（x，y）表示键值对， x 为键(key), y 为值(value)，
    默认将y绑定到option的value中，而option显示的内容，由前面的x for...决定

    <select ng-model="name" ng-option="x for (x,y) in sites"></select>

    DOM操作和事件：

    ng-click 定义了anjular 中的点击事件，只能触发绑定在anjular作用域中的属性方法

    <div ng-app="" ng-init="mySwitch=true">
    <p>
        <button ng-disabled="mySwitch">点我!</button>
    </p>
            
    <p>
        <input type="checkbox" ng-model="mySwitch">按钮
    </p>
            
    <p>
        {{ mySwitch }}
    </p>
</div>

    表单输入和验证：

    angularJS中的表单验证：
    1、表单中常用的验证操作：
    　　$dirty 表单有填写记录
    　　$valid 字段内容合法的
    　　$invalid 字段内容是非法的
    　　$pristine 表单没有填写记录
    　　$error 表单验证不通过的错误信息
    2、验证时需给表单及需要验证的input设置name属性，
    　　给form及input设置name后会将form表单信息默认绑定到scope作用域中，
    　　故可以使用formName.inputName.$验证操作 得到验证结果：
    例：formName.inputName.$dirty = "true" 表示表单被填写过
    　　formName.inputName.$invalid = "true" 表单输入不合法
    　　formName.inputName.$error.required = "true" 表单必填但未填
    $error 支持的验证有：required、pattern、email、number、date、URL、maxlength、minlength 等

    3、为避免冲突，例如使用type= "email" 时，H5也会进行验证操作，
    如果只想使用angularJS验证，可以使用<form novalidate></form>属性，禁用H5自带验证功能

    <p style="color: red;margin: 0;"ng-show="myForm.name.$invalid && myForm.name.$dirty">
        <span ng-show="myForm.name.$error.required">用户名必填</span>
        <span ng-show="myForm.name.$error.minlength">最小长度为4</span>
        <span ng-show="myForm.name.$error.maxlength">最大长度为10</span>
</p>
 <!--当有填写记录且不合法时，p显示 -->
  • 相关阅读:
    ubuntu下安装pip
    [算法]获得最短路径的Floyd与Dijkstra算法
    win2003终端服务授权
    Cookie 读取,解决中文乱码
    MOSS自动备份
    MOSS 开发收藏
    Private Protect Partial Internal Public 区别
    怎么设置OUTLOOK接收邮件时，网站邮箱的原始文件也保存着？
    正则表达式实战
    SQL Server 2005 数据库用户和登录帐户设置关链
  • 原文地址：https://www.cnblogs.com/greedymonkey/p/6809820.html
Copyright © 2011-2022 走看看