angular 小记

angular MVC框架具有模型，控制器，视图三者构成，具有双向数据绑定的特点，较传统dom相比减少操作DOM元素，具有一个些ng为前缀的方法，例如ng-if ，ng-repeat,ng-show,ng-hide,ng-click,ng-disabled,ng-class等，也可以自己定义指令（directive），方法(factory)，亦可定义模板template,以下代码为demo,以供大家共同参考学习

1.demo1

<!DOCTYPE html>
    <html ng-app="directiveModule">
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller='test'>
            用户名：<input type="text" ng-model='name'>
            <p say-hello name-attr="name" >{{name}}</p>
            <!-- <say-hello>{{name}}</say-hello> -->
            <!-- <say-hello name-attr="name"></say-hello> -->
            <!-- <say-hello click-myFun></say-hello> -->
        </div>
    </body>
    <script>
        var app=angular.module('directiveModule',[]);
        app.controller('test',function($scope){
            // $scope.name='smith';

        });
        //@建立基于属性的绑定
        //=建立双向数据绑定
        //&调用父作用域中的方法
        app.directive('sayHello',function(){
            return {
                restrict:'AE',
                scope:{
                    name:'=nameAttr',
                    clickMyFun:'&clickMyFun'

                },
                link:function(scope,elem,attrs){
                    scope.name='shi';
                    scope.clickMyFun=function(){
                        console.log('测试我的函数');
                    }               
                },
                transclude:true,
                template:'<h3>hello ,{{name}}</h3><button ng-click="clickMyFun()">clickMyFun!</button><h1>hi <span ng-transclude></span>,welcome to you</h1>'
            }
        })
    </script>

    </html>

2.demo2

<!DOCTYPE html>
    <html ng-app="directiveModule">
    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
        <div ng-controller='test'>
            <repeat-element style='color:red;' my-color='myColor'
                <p>hi {{name}},welcome to you~~~~</p>
            <repeat-element>
        </div>
    </body>
    <script>
        var app=angular.module('directiveModule',[]);
        app.controller('test',function($scope){
            $scope.name='shi';

        });

        app.directive('repeatElement',function(){
            return {
                restrict:'E',
                transclude:true,
                link:function(scope,elem,attrs,ctrl,transcludeFn){
                    for(var i=0;i<5;i++){
                        transcludeFn(function(clone){
                            elem.append(clone)
                        })
                    }       
                },

                template:'<span ng-transclude></span>'
            }
        })
    </script>

    </html>

补:
1.angular,$watch 监听，unwatch()解除监听

2.setTimeout方法更新数据模型，angular无法触发 $digest循环，需要手动调用$ apply()，或者使用$timeout

3.父作用域往子作用域 $broadcast,子作用域往父作用域发用$ emit,接收用$on

4.$routeProvider 对象用于创建路由映射 .when .otherwise 把控制器，视图，url关联

5.url向控制器传参，直接在.when中/:orderId ,controller中使用$routeParam.orderId获取参数

6.ng-include 引入一段html,

7.$location.path（‘/view’）进行视图切换

8.ui-router 根据当前状态改变路由，.state方式实现，使用场景：出现嵌套层级子视图，html中使用ui-self指定定义的状态名进行跳转

9.自定义service

var app=angular.module('myApp',[]);
app.service('myService',function($interval){
    this.outputMsg=function(){
        var i=0;
        $interval(function(){
            i++
            console.log(i);
        },1000)
    }   
})
app.controller('test',function($scope,myService){
    myService.outputMsg();

});

10.factory 和service类似，service方法调用了factory，同样注入到controller中，但是factory是return 的对象

var app=angular.module('myApp',[]);
app.factory('myService',function(){
    return {
        sayHello:function(){
            alert('hello');
        }
    }
})
app.controller('test',function($scope,myService){
    myService.sayHello();

});

11.angular animate 动画，angular cookie
12.promise, $http,$ resource
13.模块：angular-file-upload，ngFile Upload,Flow.js,ngUpload
14.videogular模块实现视频播放器
15.angular Masonry实现照片墙
16.ngDialog实现对话框

猜你喜欢