Angularjs入門

angularJs资源
http://www.angularjs.org/
https://www.github.com/angular/
http://www.angularjs.cn/
http://www.ngnice.com/
http://woxx.sinaapp.com/
angularJs下载
http://www.bootcdn.cn/angular.js/
npm install angular

以下走示例仅基于angular1.3.0，高版本不兼容

架子

function Aaa($scope,$rootScope){ //$rootScope全局 ，函数的形参
    $scope.name = 'hello' /* M */
    $rootScope.age = 20; //$scope，只会有Aaa起作用
}}

<div ng-controller="Aaa" ng-app>
    <p>{{name}}</p>
    <p>{{age}}</p>
</div>

angularJs的MVC方式

数据的挂载
ng-controller
双大括号表达式

angularJs的作用域

$scope
$rootScope
依赖注入
服务

angularJs的指令系统

ng- 指令； ng-app:初始化；，不写则不会执行；初始化可以写到任何位置，按标签来启动； ng-controller ：控制器连接桥梁；

angular双向数据绑定

MVVM; 当M（数据）发生改变时，会自动让视图改变，而视图改变，可以让相关的数据改变，
$timeout
ng-click
ng-model

数据影响视图

function Aaa($scope,$timeout){ //注入$timeout
    $scope.name = 'hello' /* M */
    $timeout(function(){
        $scope.name = 'hi' /* M */
    },2000)//改变后视图也改 ；

    $scope.show = function () {
        $scope.name = 'hahahas'
    }
}

<div ng-controller="Aaa" ng-click="show()">  <!-- C -->  <
    <p>
        {{name}}  <!-- V -->
    </p>
</div>

视图影响数据

function Aaa($scope,$timeout){ //注入$timeout
    $scope.name = 'hello' /* M */
    $timeout(function(){
        $scope.name = 'hi' /* M */
    },2000)//改变后视图也改 ；

    $scope.show = function () {
        $scope.name = 'hahahas'
    }
}

<div ng-controller="Aaa">  <!-- C -->
    <input type="text" name="" id="" ng-model="name"/>  <!-- 输入框改东西会影响到p标签里的name，ng-model指的即为数据 ； -->
    <p>
        {{name}}  <!-- V -->
    </p>
</div>

过滤器

currency

$watch

监听数据变化
三个参数

function Aaa($scope,$timeout){ //注入$timeout
    $scope.iphone = {
        money:50,
        num:1,
        fre:10
    }
    $scope.sum = function(){
        return $scope.iphone.money * $scope.iphone.num
    }
    $scope.$watch('iphone.money',function(newVal,oldVal){ 
    //  ('字符串(不加$scope)',function(){} ,true) //第三个参数针对集合监听，注意字符串也必须是集合；
    //  console.log(newVal); //监听时iphone.money改变时触发 ；
    //  console.log(oldVal); //监听时iphone.money改变时触发 ；
    // newVal ：新值，
    // oldVal:  旧值
    },true) 


    $scope.$watch($scope.sum,function(newVal,oldVal){
        console.log(newVal); //监听时iphone.money改变时触发 ；
        console.log(oldVal); //监听时iphone.money改变时触发 ；
        $scope.iphone.fre =   newVal>=100?0:10; //当大于100时运费免费
    })
}

<div ng-controller="Aaa">  <!-- C -->
    <input type="text" name="" id="" ng-model="name"/>  <!-- 输入框改东西会影响到p标签里的name，ng-model指的即为数据 ； -->
    <p>
       价格：<input type="text" name="" id="" ng-model="iphone.money"/>
    </p>
    <p>个数：<input type="text" name="" id="" ng-model="iphone.num"/></p>
    <p>费用：<span>{{sum()| currency:'￥' }}</span></p>
    <p>运费：<span>{{iphone.fre | currency:'￥'}}</span></p>  <!-- html里的代码不需要写$scope -->
    <p>总额度：<span>{{sum()+iphone.fre | currency:'￥'}}</span></p>
</div>

angularJs的模块化

angular.module
压缩的问题

angularJs的工具方法

angular.bind ：是当于$.proxy,改this指向；
angular.copy ：复制
angular.extend ：对象的复制，相当于继承

var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope',function($scope){  //m1.controller控制器（函数名，函数内容）
        $scope.name = 'hello'
    }])

function show(n1,n2){
    alert(n1)
    alert(n2)
    alert(this)
}
angular.bind(document,show,3)(4)  //改this为document指向；

var a = { name:'hello' },b = { age:20 };
    var c = angular.copy(a)
    var d = angular.copy(a,b) //a把报有值给了b,相当于 b复制了a;
    console.log(d);


var a = { name:'hello' },b = { age:20 };
    var c = angular.extend(a,b)  //相当于把a 、b 都给了a
    console.log(a);  //所以此时 c == a;

angularJs的工具方法

angular.isArray
angular.isDate
angular.isDefined
angular.isUndefined
angular.isFunction
angular.isNumber
angular.isObject
angular.isString
angular.isElement
angular.version
angular.equals
angular.forEach
angular.fromJson/toJson
angular.identity/noop:传什么输出即什么/空函数
angular.lowercase/uppercase ：大小写
angular.element：获取元素，相当于$
angular.bootstrap:初始化的一种方式动态初始化代替ng-app
angular.injector:注册器，主要在内部使用，外部较少使用

function noop(){} //空函数
//可能的作用如下：如果不传可能出问题；
function transformer(transformationFn,value){
    return (transformationFn || angular.identity(value)) ;
}

//不使用ng-app时
document.onclick = function () {
    var _div = document.getElementsByTagName('div')
    angular.bootstrap(_div[0],['myApp1'])
    angular.bootstrap(_div[1],['myApp2']) //分别初始化调用，（目标元素，加载模块）
  //angular.bootstrap(document,['myApp']) //初始化在document上， 想要触发时再触发发；
}

var _div = document.getElementById('div1')
angular.element(_div).css('background','red')

$scope

$scope.$watch
$scope.$apply

angular.module

controller
run

function Aaa($scope) { //不注入$timeout
    $scope.name = 'hello'
    setTimeout(function(){  //使用原生
        $scope.$apply(function () {  //可以监听函数下的数据是否变化，如果有变化就会影响到视图，可以在第三方的库或原生js直接使用；
            $scope.name = 123
        })
    },2000)
}

angularJs的过滤器

currency
number
lowercase/uppercase
json
limitTo
date
orderBy
filter

过滤器扩展部分

可组合使用过滤器
JS中使用过滤器
$scope/$rootScope/$timeout
$filter

    var m1 = angular.module('myApp',[]);  //模块的写法 模块的写法要带出参数
        m1.controller('Aaa',['$scope',function($scope){
            $scope.name = '456456456.0322021'
            $scope.name = 'heoow'
            $scope.name = {'name':'elmok','age':30}
            $scope.name = ['a','b','c']
            $scope.name ='1231235'
            $scope.name = [   //orderBy,针对下面这种形式，数组里json
                {color:'red',age:20},
                {color:'yeloo',age:22},
                {color:'yeloo',age:23},
                {color:'#f9f9f9',age:24}
            ]
        }])

<div ng-controller="Aaa"> 
    {{name | currency:"￥"}}
    {{name | number :2}} //number只加分隔符 有小数情况下只截取前3位 后面参数代表要保留几位小数点；
    {{name | uppercase}}
    <pre>{{name | json}}</pre> //格式化 注意，需要在pre标签里
    {{name | limitTo:2}}  //后面即代表需要截取几位
    {{ name | date:'yyyy-MM-dd HH:mm:ss Z'}}  //Jan 1, 1970
    {{name | orderBy:'age':true}}  //加true 相反排序 
    {{name |filter:'l'}}   //  针对数据中的value值  加true==整个value值匹配，不能字符匹配
    
</div>

自定义过滤器

angular.module
controller/run
filter

var m1 = angular.module('myApp',[]);

//模块对象下的方法filter调用； 创建首字母变大写的过滤器；
m1.filter('filterUppercase',function(){
    return function (str,num) {
        console.log(num); //2,可找到num了，所以可做下一步操作；
        console.log(str);//返回的是传入的
        return str.charAt(0).toUpperCase() + str.substring(1)
    }
})

//使用
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
/*
    $scope.name = '456456456.0322021'
    $scope.name = 'heoow'
    $scope.name = {'name':'elmok','age':30}
    $scope.name = ['a','b','c']
    $scope.name ='1231235'
    $scope.name = $filter('uppercase')('heoow') //转大写操作；
    $scope.name = $filter('number')('123456') //转大写操作；
    $scope.name = $filter('number')('123456.12312',1) //转大写操作； //后面为限制小数点个数
    $scope.name = $filter('date')('4512312123','hh') //转日期；
*/
    $scope.name = $filter('filterUppercase')('heoow','2')
}])

ng-repeat指令

遍历集合, 通过in的方式遍历每一项, $index :$index每一项返回index
$first :$first 第一项返回true，其它返回false
$middle: $middle，除非第一项与最后一项，其它返真
$last: $last 最后一项返回true，其它返回true;
$even :偶数行返回true,奇数行返回false
$odd :与上相反
ng-repeat-start : 只循环一个li
ng-repeat-end

var m1 = angular.module('myApp',[])
    m1.controller('Aaa',['$scope',function($scope){
        $scope.dataList = [
                'aaa','bbb','ccc'
        ]
    }])

 <li ng-repeat="d in dataList">{{d}}</li> <!-- d 循环中的每一项 -->

表格小例

var m1 = angular.module('myApp',[])
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
    var oriArr = [
        {name:'red',age:'29'},
        {name:'black',age:'22'},
        {name:'blue',age:'23'},
        {name:'yellow',age:'24'}
    ];;
    $scope.dataList =oriArr;
    $scope.fnSort = function (arg) {
        //函数挂属性：分别有开关,加属性；一次真一次假，
        arguments.callee['fnSort' + arg] = !arguments.callee['fnSort' + arg];
        $scope.dataList = $filter('orderBy')($scope.dataList, arg, arguments.callee['fnSort' + arg]);
        //排序完结果重新赋值
    }
    $scope.fnfilter = function (){
        $scope.dataList = $filter('filter')(oriArr,$scope.filterVal)
    }
}])

<div ng-controller="Aaa">
    <input type="text" name="" id="" ng-model="filterVal"/> <input type="button" value="Search" ng-click="fnfilter()"/>
    <table border="1">
        <tr>
            <th ng-click="fnSort('name')">姓名</th>
            <th ng-click="fnSort('age')">年龄</th>
        </tr>
        <tr ng-repeat="d in dataList">
            <td>{{d.name}}</td>
            <td>{{d.age}}</td>
        </tr>
    </table>
</div>

隔行变色等；

var m1 = angular.module('myApp',[])
m1.controller('Aaa',['$scope',function($scope){
    $scope.dataList = [
        'aaa','bbb','ccc','ddd','eee','ggg'
    ]
}])

<div ng-controller="Aaa">
    <ul>
    <li ng-repeat="d in dataList">{{$index}}</li> <!-- d 循环中的每一项 -->   $index每一项返回index        
        <li class="{{$even ? 'active' : ''}}" ng-repeat="d in dataList">{{$odd}}</li>
        <li class="{{$even ? 'active' : ''}}" ng-repeat="d in dataList">{{d}}</li>
    </ul>
    
    <!--需求，下面的循环，不改变结构-->
    <div ng-repeat-start="d in dataList">{{d}}</div>
    <p>{{d}}</p>
    <div ng-repeat-end>{{d}}</div>
</div>

事件指令

ng-click/dblclick
ng-mousedown/up
ng-mouseenter/leave
ng-mousemove/over/out
ng-keydown/up/press
ng-focus/blur
ng-submit
ng-selected
ng-change
ng-copy
ng-cut
ng-paste
ng-disabled
服务 $interval
ng-readonly
ng-checked
ng-value
ng-bind
ng-cloak
ng-bind-template
ng-bind-html
http://www.bootcdn.cn/angular.js/
ng-non-bindable

var m1  = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.name = 'hwoow'
}])

<div ng-controller="Aaa">
    <input type="checkbox" name="" id="" ng-model="aaa"/> <!-- 点击则aaa改为true,所以选中 -->
    <select name="" id="">
        <option value="1">111</option>
        <option value="2" ng-selected="aaa">222</option>

    </select>
    <input type="text" name="" id="" ng-change="bbb='heoo" ng-model="bbb"/>{{bbb}}
    <!--ng-change必须与ng-model相配合才有用-->
    <br/>
    <input type="text" name="" id="" value="sdaflskldfj" ng-copy="ccc='dd'"/>{{ccc}}  <!-- 复制会输出 -->
    <input type="text" name="" id="" value="sdaflskldfj" ng-cut="ccc=true"/>{{ccc}}  <!-- 剪切会输出 -->

    <input type="text" name="" id="" value="sdaflskldfj" ng-paste="ccc=true"/>{{ccc}}

</div>

var m1 = angular.module('myApp', [])
m1.controller('Aaa', ['$scope', '$interval', function ($scope, $interval) {
    var inow = 5;
    $scope.text = inow + 's'
    $scope.isDisabled = true;
    var _t = $interval(function () {
        $scope.text = inow + 's'
        inow--
        if (inow == 0) {
            $interval.cancel(_t)   //清除定时器；
            $scope.text = '可以点击啦'
            $scope.isDisabled = false;
        }
    }, 1000)
}])

<div ng-controller="Aaa">
    <input type="button" value="{{text}}" ng-disabled="isDisabled"/> <!-- 动态修改按钮的状态； -->
    <input type="text" value="{{text}}" ng-readonly="isDisabled"/>
    <input type="checkbox" value="{{text}}" name="" id="" ng-checked="isDisabled"/>     <!-- 选中与不选 中； -->

    <input type="text" ng-value="text"/> <!-- 加上ng后value ，不需要{}  区别不大，推荐所有使用ng-value 提高用户体验 -->
</div>

var m1 = angular.module('myApp',['ngSanitize']) /* 操作html需要下载：angular-sanitize.js */ 
m1.controller('Aaa',['$scope',function($scope){
    alert(123)
    $scope.text = '<h1>hello</h1>'
}])

<div>{{text}},{{text}}</div>
//换个写法；
<div ng-bind-template="{{text}},{{text}}"></div>
<div ng-cloak>{{text}}</div> <!--  相当于未解析完时标签是display:none;,解析完再显示；-->
<div ng-non-bindable="">{{text}}</div>  <!-- 不想被解析时； -->

css操作

* ng-class
* ng-style
* ng-href
* ng-src
* ng-attr-(suffix) //通用写法；

var m1 = angular.module('myApp',[]) /* 操作html */
m1.controller('Aaa',['$scope',function($scope){
    $scope.text = '<h1>hello</h1>';
    $scope.style = "{color:'red',background:'#f3f3f3}'"
    $scope.sClass={red:true,yellow:true}
    $scope.url="http://www.baidu.com"
}])
var m2 = angular.module('myApp2',[])
m2.controller = ('Bbb',['$scope',function($scope){
}])

<div ng-controller="Aaa">
    <div ng-class="{red:true,color:true}">{{text}}</div>
    <div ng-class="{{sClass}}">{{text}}</div><!-- 注意此处需要加{{}} -->
    <div ng-style="{color:'red',background:'#f3f3f3'}">{{text}}</div>
    <div ng-style="{{style}}">{{text}}</div> <!-- 注意此处需要加{{}} -->
    <a ng-href="{{url}}">aaa</a>
    <a ng-attr-href="{{url}}" ng-attr-title="{{text}}">aaa</a>
</div>

dom操作

ng-show
ng-hide :ng-show与ng-hide：对display操作；
ng-if
ng-swtich :有选择性进行切换；不需要属性，了解即可；
on
default
when
ng-open :ng-open; ff不支持；

var m1 = angular.module('myApp',[]) /* 操作html */
m1.controller('Aaa',['$scope',function($scope){
        $scope.btn = true;
}])

<input type="checkbox" name="" id="" ng-model="btn"/> 
<div ng-switch on="btn"><p ng-switch-default>默认是的</p><p ng-switch-when="false">切换隐藏的</p></div>

未完

Angularjs入門

最新文章

最近回复

分类

归档

其它