› 首页 ›HTML5›前端框架›正文

angularJS学习三部曲--第一部-基础

景先 前端框架 2015-11-05 806 0 angular

今天打算重新写一篇关于angularjs的贴子，之前写过一个不太全面，现在重新来写一个全面的。

angularJS的简介

用于增删改查类交互多的项目及SPA（单页面应用）中的并不适用于游戏，效果多，偏于展示的页面。

官网：http://www.angularjs.org

现在使用版本1.5.x;

手册：
        https://docs.angularjs.org/api
        http://docs.angularjs.cn/api

兼容：高版本浏览器


angularJS的静态函数

angular.bind(self,fn,args)  --改变this指向

<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<script>
function show(){
   alert(this);
}
angular.bind(12,show)();
</script>

编译结果：12


<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
 <script>
        function show(a,b){
            alert('this:->'+this+'\n'+
                'a:->'+a+'\n'+
                'b:->'+b
            );
        }
 
        angular.bind(1,show,12,5)();
    </script>

编译结果：

this:->1
a:->12
b:->5

<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<script>
        function show(a,b){
            alert('this:->'+this+'\n'+
                'a:->'+a+'\n'+
                'b:->'+b
            );
        }

        //show(12,5);
        //angular.bind(1,show,12,5)();
        var fn=angular.bind(1,show,12);
        fn(5);
    </script>

编译后：

this:->1
a:->12
b:->5

angular.copy(source, [destination]);  对象克隆

<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
    <script>
        var json={a:1,b:2};
        var json2={};


        angular.copy(json,json2);

        console.log(json,json2);
    </script>

编译后：

Object a: 1b: 2

Object a: 1b: 2

<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
    <script>
        var json={a:1,b:2};
        var arr=[4,5];
        angular.copy(json,arr);
        console.log(json,arr);
    </script>

 编译后：请运行。。。


angular.element(元素)    
jq-lite 小型jquery

类似于jQuery的一些操作

比如1：

<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
    <script>
        angular.element(document).ready(function(){
            alert(1);
        });
    </script>

比如2：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>angular</title>
    <style>
        #div1{
            width:200px;
            height:200px;
            background: #ccc;
        }
    </style>
    <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
    <script>
        angular.element(document).ready(function(){
            var oDiv=document.getElementById('div1');

            //angular.element('#div1').css('background','red');  ×

            angular.element(oDiv).css('background','red');
        });
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

angular.equals()           比较相等

比较的是两个对象是否相等。

比如1：

    <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
    <script>

        var a={a:1,b:2};
        var b={a:1,b:2};


        var c=angular.equals(a,b);

        console.log(c);
    </script>

比如2：

<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
<script>
    var c=angular.equals(NaN,NaN);
    console.log(c);
</script>

angular.extend(args1,args2,...)           合并多个对象

例子1：

<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
    <script>
        var json={a:1,b:2};
        var json2={c:3,d:4,a:101};
        var json3={e:110};

        var con=angular.extend(json,json2,json3);

        console.log(con);
    </script>

例子2：

    <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
    <script>
        var arr=[1,2,3];
        var arr2=[4,5,6,7];

        var c=angular.extend(arr,arr2);

        console.log(c);
    </script>

angular.forEach()           循环

<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.min.js"></script>
    <script>
        
        var json={a:1,b:2,c:3};

        angular.forEach(json,function(value,key){
            alert(value+','+key);
        });
    </script>

angular.isDate()  typeof  instanceof  constructor

例子：

 <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
    <script>
        var arr=[1,2,3];
        var oDate=new Date();
        var str='2016-2-16';
        alert(angular.isDate(oDate));
    </script>

第一个angular的程序

现在说一下angular了，angular也是一个mvc的前端框架，

m    数据

v     视图  

c     控制

其中v的展示是使用模板，使用方式类似于js的前端模板，{{数据名称}}

在下面例子中，input：输入，作用是产生数据

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>第一个angular程序</title>
   <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
</head>
<body>
    <div>
        <input type="text" ng-model="a">
        <div>{{a}}</div>
    </div>

    <div>
        <input type="text" ng-model="b">
        <div>{{b}}</div>
    </div>
</body>
</html>

指令：

ng-指令名称

扩展html语法功能，增强标签，属性

    directive  指令

建议：html标签：


展示数据：

    a). {{name}}        挂掉，展示一堆花括号
    b). ng-bind="name"   网速慢，挂掉，用户体验好点

例子a:

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>{{数据}}</title>
    <style>

    </style>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
    <script>
        
    </script>
</head>
<body>
    <div>
        <input type="text" ng-model="a">
        <div>{{a}}</div>
        <strong>{{a}}</strong>
    </div>
</body>
</html>

例子b:

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>ng-bind</title>
 
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
 
</head>
<body>
    <div>
        <input type="text" ng-model="a">
        <div>{{a}}</div>
        <strong ng-bind="a"></strong>
    </div>
</body>
</html>

angular指令

ng-init初始化数据

初始化数据的写法有：

    ng-init="name=value"
    ng-init="name=value; name2=value2..."
    ng-init="arr=[1,2,3]"
    ng-init="json={a:1,b:2}"

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>ng-init</title>
   
    <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>

</head>
<body>
    <div ng-init="a=123">
        {{a}}
    </div>
    <div ng-init="a=123; b=456">
        {{a}}
        <br>
        {{b}}
    </div>
    <div ng-init="a=123; b=456">
        {{a+b}}
    </div>
    <div ng-init="arr=[1,2,3,4]">
        {{arr[0]}}
    </div>
    <div ng-init="json={name:'abc',age:30}">
        我的名字为:{{json.name}}, 年龄为:{{json.age}}
    </div>
</body>
</html>

ng-Show&&ng-Hide--显示隐藏

用法：

ng-show="true/false"
ng-hide="true/false"

例子1：

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>ng-Hide</title>
    <style>
        div{
            width:200px;
            height:200px;
            margin:20px;
            background: #ccc;
        }
    </style>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>>
</head>
<body ng-init="a=true,b=false">
    <div id="div1" ng-hide="b"></div>
    <div id="div2" ng-show="a"> </div>
</body>
</html>

例子2：

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
    <style>
        #div1{
            width:200px;
            height:200px;
            background: #ccc;
        }
    </style>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
</head>
<body>
<input type="checkbox" ng-model="a">
<br>
<div id="div1" ng-show="a"></div>
</body>
</html>

例子3：

   ng-click
   ng-mouseover
   ng-mouseout

    .....

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>button</title>
    <style>
        #div1{
            width:200px;
            height:200px;
            background: #ccc;
        }
    </style>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
</head>
<body ng-init="a=true">
<input type="button" value="按钮" ng-mouseover="a=!a">

<div id="div1" ng-show="a"></div>
</body>
</html>

ng-class

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>ng-class</title>
    <style>
        div{
            width:200px;
            height:200px;
             margin:20px
            background: #ccc;
        }
        .box{
            border: 10px solid #000;
        }
        .box2{
            background: red;
        }
    </style>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
</head>
<body>

<div id="div1" ng-class="{box:true}"></div>
<div id="div2" ng-class="{box:true, box2:true}"></div>
<input type="checkbox" ng-model="a">
<input type="checkbox" ng-model="b">
<div   ng-class="{box:a, box2:b}"></div>
</body>
</html>

ng-style

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>ng-style</title>
    <style>
        div{
            width:200px;
            height:200px;
            background: #ccc;
        }
    </style>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
 
</head>
<body ng-init="box={width:'100px', height:'100px'}">
<input type="button" value="设置样式">
<input type="button" value="设置样式" ng-click="box={width:'300px', height:'300px', background:'red'}">

<div id="div1" ng-style="{width:'100px', height:'100px'}"></div>
<div   ng-style="box"></div
</body>
</html>

ng-repeat

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
    <style>
        div{
            width:200px;
            height:200px;
            background: #ccc;
        }
    </style>
<script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular.js"></script>
 
</head>
<body>
<ul ng-init="arr=[1,2,3,4,5]">
    <li ng-repeat="i in arr">{{i}}</li>
</ul>
<ul ng-init="arr=['apple','banana','orange','pear','tomato']">
    <li ng-repeat="value in arr">{{value}}</li>
</ul>

<ul ng-init="arr=['apple','banana','orange','pear','tomato']">
    <li ng-repeat="(key,value) in arr">{{key}} -> {{value}}</li>
</ul>

<ul ng-init="json={a:1,b:2,c:3,d:4}">
    <li ng-repeat="(key,value) in json">{{key}} -> {{value}}</li>
</ul>

</body>
</html>


版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。

相关文章

评论

热门文章