zoukankan      html  css  js  c++  java
  • angularjs介绍

    由来
    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。———百度百科
    <html ng-app ="hello">
     
    <body>
    <div ng-controller = "TextController">
    <p >{{someText}}</p>
    </div>
     
     
    <div ng-controller ="InputCtrl">
    <input type="text" ng-model='user.name' />
    <input type="text" ng-model='user.last' />
    <span>{{user}}</span>
    </div>
     
    <script type="text/javascript" src="script/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('hello', []).controller('TextController', function($scope) {
        $scope.someText = "Hello World";
    });
    
    function InputCtrl($scope) {
        $scope.user = {
            name: 'guest',
            last: 'visitor'
        };
    }
    </script>
    </body>
    </html>
    angularjs
    常用指令
    ng-app、 ng-init 、 ng-model 、 ng-repeat、ng-disabled、ng-show、ng-hide
    事件指令
    ng-click、ng-dbl-click、ng-mousedown、ng-mouseup、ng-mouseenter、ng-mouseleave、ng-mousemove、ng-mouseover、ng-keydown、ng-keyup、ng-keypress、ng-change
     
    ng-repeat
    <html>
    <head>
    <title>repeat</title>
    <style type="text/css">
    .selected{background:lightgreen;}
    </style>
    <script type="text/javascript" src="../script/angular.min.js"></script>
    </head>
    <body ng-app="repeatApp" ng-controller="repeatController">
    <table>
        <tr>
            <td>Type</td>
            <td>Price</td>
            <td>Count</td>
            <td>totalPrice</td>
        </tr>
        <tr ng-repeat="item in items" ng-click="selecItem($index)" ng-class="{selected:$index==selectRow}">
            <td>{{item.type}}:</td>
            <td>{{item.price | currency}}</td>
            <td>{{item.count}}</td><
            td>{{item.total}}</td>
        </tr>
     
    </table>
     
    </body>
    <script type="text/javascript">
    var arr = [{
        type: "apple",
        price: 6.3,
        count: 10
    }, {
        type: "orange",
        price: 8.1,
        count: 5
    }, {
        type: "egg",
        price: 123,
        count: 6
    }];
    var a = angular.module("repeatApp", []);
    
    function repeatController($scope) {
        $scope.items = arr;
        angular.forEach($scope.items, function(value, key) {
            value.total = value.price * value.count;
        });
        $scope.selecItem = function(row) {
            $scope.selectRow = row;
        }
        window.scope = $scope;
    }
    </script>
    </html> 
    内置服务
    $http、$ templateCache 、$log、$location 、$cookieStore、$animate、$q
    内置方法
    bind,bootstrap,copy,element,equals,extend,forEach,fromJson,identity,injector,isArray,isDate,isDefined,isElement,isFunction,isNumber,isObject,isString,isUndefined,lowercase,module,noop,toJson,uppercase 
    demo
    http:
    伪代码:
    1 $http.get('url',{params:{id:5}
    2 }).success(function(data,status,headers,config){
    3 //success callback
    4 }).error(function(data,status,headers,config){
    5 //error callback
    6 })
    get/head/post/delete/put/JSONP
    $http({
        method: string,
        url: string,
        param: obj,
        data: string or object,
        headers: object,
        transformRequest: function transform(data, headersGetter) or an array of functions,
        transformRespones: function transform(data, headersGetter) or an array of functions,
        cache: boolean or Cache object,
        timeout: number,
        withCredentials: boolean
    })
     
    demo:
    <html>
    <head>
    <title>Time</title>
    <style type="text/css">
    .selected{background:lightgreen;}
    </style>
    <script type="text/javascript" src="../script/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="repeatController">
    <p>date:{{date}}</p>
    <p>time:{{time}}</p>
     
    </body>
    <script type="text/javascript">
    angular.module("myApp", []);
    function repeatController($scope, $http) {
        $http.jsonp("http://service.100bt.com/PubTimeNow.action?callback=JSON_CALLBACK")
            .success(function(data, status, headers, config) {
                $scope.date = data.date;
                $scope.time = data.time;
                console.log(data, status, headers(), config);
            })
    }
    </script>
    </html>
     
    /*
    log();
    Write a log message
     
    <html>
    <head>
    <title>log</title>
     
    <script type="text/javascript" src="../script/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
     
    </body>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);
        myApp.controller("myController",function($scope,$log){
        $log.log("xxx");
    })
    View Code
    info();
    Write an information message
     
    warn();
    Write a warning message
     
    error();
    Write an error message
     
    debug();
    Write a debug message
    */
    </script>
    </html>
     
    templateCache
    <html>
    <head>
    <title>templateCache</title>
    <script type="text/javascript" src="../script/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="control">
    <div ng-include=" 'templateId.html' "></div>
    </body>
    <script type="text/javascript">
    var myApp = angular.module('myApp', []);
    /*
    myApp.run(function($templateCache) {
      $templateCache.put('templateId.html', 'This is the content of the template');
      $templateCache.get('templateId.html');
    }).controller("control",function(){});
    */
    myApp.controller("control", function($scope, $templateCache, $log) {
        $templateCache.put('templateId.html');
        $templateCache.get('templateId.html');
    })
     
    </script>
    </html>
    templateId.html
    <div>xxxxxxxxxxxx</div>
     
    $watch 
    $watch(watchFn,watchAction,deepWatch)
    watchFn:  带有angular表达式或者函数字符串,返回被监控模型的当前值。会执行多次
    watchAction: 一个函数或者表达式,watchFn发生变动时调用,返回watchFn的新旧两个值,和作用域的引用。function(newValue,oldValue,scope)
    deepWatch:  设置了true则会去检查被监控对象的每个属性是否发生了变化。如果要监控数组中的元素,或者对象上的全部属性,而不是一个简单的值,就可以使用这个参数。 
    <html ng-app ="storeData">
     
     
    <body>
     
    <div ng-controller ="InputCtrl">
    <div><button ng-click="toggleShow()">toggleData</button><input type="text" ng-model='newData' ng-keypress="createOnEnter($event)" placeholder="What needs to be done?" /></div>
    <ul ng-show="showMe">
    <li ng-repeat="item in storeData track by $index" ng-mouseover="showBtn($index)">{{item}}<button ng-show="$index==selectRow" ng-click="remove($index)">removeThis</button></li>
    </ul>
    <div>{{count}}ItemLeft</div>
    </div>
     
     
    <script type="text/javascript" src="script/angular.min.js"></script>
    <script type="text/javascript">
     var aaa = angular.module("storeData", [])
         .controller("InputCtrl", function($scope) {
             $scope.storeData = [];
             $scope.count;
             $scope.showMe = true;
             var activeData = [],
                 allData = [],
                 removeData = [],
                 count = 0;
    
             $scope.toggleShow = function() {
                 $scope.showMe = !$scope.showMe;
             };
             $scope.showBtn = function($index) {
                 $scope.selectRow = $index;
             };
             $scope.createOnEnter = function($event) {
                 if ($event.keyCode == 13) {
                     allData.push($scope.newData);
                     activeData.push($scope.newData);
                     $scope.newData = "";
                 }
             }
             $scope.remove = function(index) {
                 var d = allData.splice(index, 1);
                 removeData.push(d);
             }
             $scope.storeData = allData;
             $scope.count = count;
    
    
             function calculateCount(newValue, oldValue, scope) {
                 console.log(1);
                 console.log(newValue, oldValue);
                 $scope.count = newValue.length;
             }
             $scope.$watch(function() {
                 return $scope.storeData
             }, calculateCount, true);
    
         })
    </script>
    </body>
    </html>
    Module  
    controller
    第一种:通过方法名声明依赖
     function mycontroller($scroper,$time){};
    第二种:声明一个数组,依赖列表放前部,注入目标数组放最后
     var mycontroller = [‘$scope’,’$time’,function($scope,$time){}];
    第三种:通过inject属性声明依赖列表
      var mycontroller = function($scope,$time){};
     mycontroller.$inject = [‘$scope’,’$time’];
    Filter  
    {{expression | filterName:paramter1:…paramterN}}
    内置:
    currency、date、number/uppercase
    <html ng-app ="filterModule">
    <title>系统filter</title>
    <style type="text/css">
    .selected{background:lightgreen;}
    </style>
     
    <body>
    <div ng-controller = "priceController">
    <!--JSON-->
    {{ {foo: "bar", baz: 23} | json }} 
     
    <!--货币-->
    <p>{{250 | currency}}</p>
    <p>{{ 250 | currency:"RMB ¥ " }}  </p>
     
    <!--日期-->
    <p>{{ 1427109979466 | date }} </p>
    <p>{{ 1427109979466 | date:"MM/dd/yyyy @ h:mma" }} </p>
    <p>{{ 1427109979466 | date:"yyyy-MM-dd hh:mm:ss" }} </p>
     
     
    <!--数字-->
    <p>{{ 1.234567 | number:1 }} </p>
    <p>{{ 1234567 | number }}</p>    
     
    <!--filter查找-->
    {{ [{"age": 20,"id": 10,"name": "iphone"},  
    {"age": 12,"id": 11,"name": "sunm xing"},  
    {"age": 44,"id": 12,"name": "test abc"}  
    ] | filter:'s'}} 
     
    <!--limitTo截取-->
    <p>{{ "This is angularjs" | limitTo:7 }} </p>
    <p>{{ "This is angularjs" | limitTo:-2 }}</p>
    <p>{{[1,2,3] | limitTo:1 }}</p>
     
    <!--orderBy对像排序-->
     
    {{ [{"age": 20,"id": 10,"name": "iphone"},  
    {"age": 12,"id": 11,"name": "sunm xing"},  
    {"age": 44,"id": 12,"name": "test abc"}  
    ] | orderBy:'id':true }}   //根据id降序排  
      
    {{ [{"age": 20,"id": 10,"name": "iphone"},  
    {"age": 12,"id": 11,"name": "sunm xing"},  
    {"age": 44,"id": 12,"name": "test abc"}  
    ] | orderBy:'id' }}           //根据id升序排  
    </div>
     
     
     
    <script type="text/javascript" src="../script/angular.min.js"></script>
    <script type="text/javascript">
    angular.module('filterModule',[])
      .controller('priceController', function($scope) {
     
      });
     
    </script>
    </body>
    </html>
     
    自定义:
     
    <html>
    <head>
    <title>自定义filter</title>
    <script type="text/javascript" src="../script/angular.min.js"></script>
    </head>
    <body ng-app="filterModule" ng-controller="filterController">
    <h1>{{pageHeading | titleCase }}</h1>
    </body>
     
     
    <script type="text/javascript">
    angular.module('filterModule', [])
        .filter('titleCase', function() {
            return function(text) {
                var words = text.split(' ');
                for (var i = 0, len = words.length; i < len; i++) {
                    words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
                }
                return words.join(' ');
            }
        })
        .controller("filterController", function($scope) {
            $scope.pageHeading = "this is filter";
        })
     
    </script>
     
    </html>
     
     
    factory、service 、provider
    service(name, constructor)
    factory(name,$getFunction())
    provider(name,Objector constructor())
     
     
    <html>
    <head>
    <title>demo</title>
    <script type="text/javascript" src="../script/angular.min.js"></script>
    </head>
    <body ng-app="myApp" ng-controller="myController">
    <p>facetorytest:{{factorytest}}</p>
    <p>servicetest:{{servicetest}}</p>
    <p>providertest:{{providertest}}</p>
     
    </body>
    <script type="text/javascript">
    var myApp = angular.module("myApp", []);
    myApp.factory("factorytest", function() {
        var test = {};
        test.name = "factorytest";
        return test;
    })
    myApp.service("servicetest", function() {
        this.name = "servicetest";
    })
    myApp.provider("providertest", function() {
        this.$get = function() {
            return "providertest";
        }
    
    })
    myApp.controller("myController", function($scope, factorytest, servicetest, providertest) {
        $scope.factorytest = factorytest.name;
        $scope.servicetest = servicetest.name;
        $scope.providertest = providertest;
    })
    </script>
    </html>
     
     
     directive
    myModule.directive(‘directive’,functionfactory(injectables){
        var directiveDefinitionObject ={
       }
      return directiveDefinitionObject ;
    })
    compile和link 
    Angular初始化:
    加载脚本
    编译阶段:(遍历dom,根据指令(template、replace)转换dom结构),存在compile函数则调用 ,scope在链接阶段才会被绑定到元素上,因此compile阶段操作scope会报错;
    链接阶段: 为了让视图成为动态,对每条指令运行一个link函数;
    对于同一个指令的多个实例,compile只会执行一次;而link对于指令的每个实例都会执行一次;
     
    伪代码:
    var myModule = angular.module(...);
    myModule.directive('namespacesDirectiveName',function factory(injectables){
    var directiveDefinitionObject = {
    restrict:string,/* E 元素  A 属性 C 样式类 M 注释 */
    priority:number,
    tamplate:string,
    tamplateUrl:string,
    replace:bool,
    transclude:bool, /*把当前指令中的子节点移动到模板的内部*/
    scope:bool or object,
    controller:function controllerConstructor($scope,$element,$attrs,$transclude){
    ...
    },
    require:string,
    link:function postLink(scope,iElement,iAttrs){
    ...
    },/*实例元素 Instance*/
    compile:function compile(tElement,tAttrs,transclude){
    return {
    pre:function preLink(scope,iElement,iAttrs,controller){...},
    post:function preLink(scope,iElement,iAttrs,controller){...}
    }
    }/*模板元素 tamplate*/
    }
    return directiveDefinitionObject;
    })
     
    var myModule = angular.module(...);
    myModule.directive('namespacesDirectiveName', function factory(injectables) {
        var directiveDefinitionObject = {
            restrict: string,
            /* E 元素  A 属性 C 样式类 M 注释 */
            priority: number,
            tamplate: string,
            tamplateUrl: string,
            replace: bool,
            transclude: bool,
            /*把当前指令中的子节点移动到模板的内部*/
            scope: bool or object,
            controller: function controllerConstructor($scope, $element, $attrs, $transclude) {
                ...
            },
            require: string,
            link: function postLink(scope, iElement, iAttrs) {
                ...
            },
            /*实例元素 Instance*/
            compile: function compile(tElement, tAttrs, transclude) {
                return {
                    pre: function preLink(scope, iElement, iAttrs, controller) {...
                    },
                    post: function preLink(scope, iElement, iAttrs, controller) {...
                    }
                }
            } /*模板元素 tamplate*/
        }
        return directiveDefinitionObject;
    })
    demo1:
    <body ng-app="app">
    <hello></hello>
    </body>
    <script type="text/javascript">
    var appModule = angular.module('app', []);
    appModule.directive('hello', function() {
        return {
            restrict: 'E',
            template: '<div >Hi there</div>',
            replace: false
        };
    });
    </script>
     
    /*
    restrict:
    E 元素 
    A 属性
    C 样式类
    M 注释
    */
    </script>
     
    demo2:
    <body ng-app="app">
     <hello>
    <br/>
    <span>原始的内容,</span><br/>
    <span>还会在这里。</span>
    </hello>
    <hello>
    </hello>
    </body>
    <script type="text/javascript">
    var appModule = angular.module('app', []);
        appModule.directive('hello', function() {
        return {
            restrict: 'E',
            template: '<div>替换内容 <span ng-transclude></span></div>',
            transclude: true
        };
    });
    </script>
     
    demo3:
    <body ng-app="app">
     <hello>
    <span>原始的内容,</span>
    </hello>
    <hello>
    </hello>
    </body>
    <script type="text/javascript">
    var appModule = angular.module('app', []);
    /*
    appModule.run(function($templateCache){
    $templateCache.put('templateId.html','<div>templateUrl</div>')
    })*/
    appModule.directive('hello', function() {
        return {
            restrict: 'E',
            templateUrl: 'templateId.html',
            transclude: true
        };
    });
    </script>
    demo4:
    <html>
    <head>
    <title></title>
    <script type="text/javascript" src="../script/angular.min.js"></script>
    <style type="text/css">
    .expander {
    border: 1px solid red;
    width: 250px;
    }
     
    .expander>.title {
     
    color: white;
    padding: 1em 3em;
    cursor: pointer;
    }
     
    .expander>.body {
    padding: 1em 3em;
    }
    .close{display:none;}
    </style>
    </head>
    <body ng-app="app" ng-controller="SomeController">
    <expander class="expander" aa-a="title" expander-text="text">
    {{text}}
    </expander>  
     
    <!--<input type="text" ng-model="title"/>-->
     
    </body>
    <script type="text/javascript">
    var appModule = angular.module('app', []);
    
    appModule.directive('expander', function() {
        return {
            restrict: 'E',
            replace: true,
            transclude: true,
            scope: {
                Title: '=aaA'
            },
            /*创建scope的局部属性,与父scope中的expander-title绑定*/
            template: '<div>' +
                '<div class="title" ng-click="toggle()">{{Title}}</div>' +
                '<div class="body" ng-transclude></div>' +
                '</div>',
            link: function(scope, element, attrs) {
                console.log(element)
                var titleElement = angular.element(element.children().eq(0));
                var bodyElement = angular.element(element.children().eq(1));
                titleElement.bind('click', toggle);
    
                function toggle() {
                    bodyElement.toggleClass('close');
                }
            }
        };
    });
    appModule.controller("SomeController", function($scope) {
        $scope.title = "Click me to expand";
        $scope.text = 'Toggle Information';
    })
     
    </script>
    </html>
    templateId.html
    <div>xxxxxxxxxxxx</div>
     
    route
    通过$routeRrovider服务上的函数来创建路由,把需要创建的路由当成配置块传给模块即可。  
    var someModule = angular.module('someModule', [..moduleDependencies..])
    someModule.config(function($routerProvider) {
        $routerProvider.
        when('url', {
            controller,
            templateUrl: '/path/to/template'
        }).
        when(...other mappings
            for you app...).
        otherwise(...what to do
                if nothing
            else matches...)
    })
     
    index.html
    <html ng-app='AMail'>
     
    <head>
    <script type="text/javascript" src="http://angular.100bt.com/script/angular.min.js"></script>
    <script type="text/javascript" src="http://angular.100bt.com/angular-route.js"></script>
    <script type="text/javascript" src="script/controllers.js"></script>
    </head>
     
    <body>
    <h1>A-Mail</h1>
    <div ng-view></div>
     
     
    </body>
     
    </html>
     
    list.html
     
    <table>
        <tr>
            <td><strong>Sender</strong></td>
            <td><strong>Subject</strong></td>
            <td><strong>Date</strong></td>
        </tr>
            <tr ng-repeat='message in messages'>
            <td>{{message.sender}}</td>
            <td><a href="#/view/{{message.id}}">{{message.subject}}</a></td>
            <td>{{message.date}}</td>
        </tr>
    </table>
     
     
    detail.html
    <div><strong>Subject:</strong>{{message.subject}}</div>
    <div><strong>Sender:</strong>{{message.sender}}</div>
    <div><strong>Date:</strong>{{message.date}}</div>
    <div>
    <strong>To:</strong>
    <span ng-repeat='recipient in message.recipients'>{{recipient}}</span>
    </div>
    <div>{{message.message}}</div>
    <a href="#/">Back to message list</a>
     
    controllers.js
    var aMailServices = angular.module('AMail', ["ngRoute"])
    
    function emailRouteConfig($routeProvider) {
        $routeProvider.when('/', {
            controller: ListController,
            templateUrl: 'list.html'
        }).when('/view/:id', {
            controller: DetailController,
            templateUrl: 'detail.html'
        }).otherwise({
            redirectTo: '/'
        });
    }
    
    aMailServices.config(['$routeProvider', emailRouteConfig]);
    
    messages = [{
        id: 0,
        sender: '0@qq.com',
        subject: '0mail',
        date: "0:00:00",
        recipients: ['00.qq.com'],
        message: 'this is 0 mail'
    }, {
        id: 1,
        sender: '1@qq.com',
        subject: '1mail',
        date: "1:00:00",
        recipients: ['11.qq.com'],
        message: 'this is 1 mail'
    }, {
        id: 2,
        sender: '2@qq.com',
        subject: '2mail',
        date: "2:00:00",
        recipients: ['22.qq.com'],
        message: 'this is 2 mail'
    }]
    
    function ListController($scope, $routeParams) {
        $scope.messages = messages;
    }
    
    function DetailController($scope, $routeParams) {
        $scope.message = messages[$routeParams.id];
    }
     
     
  • 相关阅读:
    Mac上的USB存储设备使用痕迹在新版操作系统有所变化
    Beware of the encrypted VM
    A barrier for Mobile Forensics
    Second Space could let suspect play two different roles easily
    Take advantage of Checkra1n to Jailbreak iDevice for App analysis
    Find out "Who" and "Where"
    Where is the clone one and how to extract it?
    Downgrade extraction on phones running Android 7/8/9
    高版本安卓手机的取证未来
    How to extract WeChat chat messages from a smartphone running Android 7.x or above
  • 原文地址:https://www.cnblogs.com/peace1/p/4448235.html
Copyright © 2011-2022 走看看