好好学习,认真工作

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];
}

 

 
 
posted on 2015-04-22 18:02  peace_1  阅读(343)  评论(0编辑  收藏  举报