AngularJS - 框架

********************

https://docs.angular.org & https://www.angularjs.net.cn

Angular 1.0 基于js 的架构 2.0 typescripts

基于MVC 模型架构.

*********************

A. 指令

A1 边界指令 ng-app

Angular 在引入Angular.js 之外, 还要为框架指明边界使用范围，如果不适用边界指令，则引入angluar.js失效。通常在html 标签内，表明当前页面angular 都生效.

A2. 呈现指令 {{}}, 在花双括号中可以显示ng 的变量、表达式

A3 信息指令 ng-mode 作用域input textarea 保存用户输入信息的变量 <textarea ng-mode='userinfo'></textarea>

A4 绑定指令 ng-bind 作用于非输入性标签的类似于{{}}指令

A5 初始化指令 ng-init 初始化变量通常放于body

B. 控制器

B1 angular.module() 用于生成页面数据模型的方法 var xxx = angular.module(边界名称，[注入信息]）

var myApp=angular.module('app',[]) 此时myApp 就相当于DOM

B2 声明页面中控制器指令angular.controller （控制器用来操作视图和数据）

所有该页面的变量/事件/回调等脚本操作都写再2这个控制器中，也即完成了页面与脚本的分离.

　　只要声明了控制器标签，这个控制器就必须定义

B3. 实现控制器方法页面数据模型.controller(‘控制器名称’,[$scope,funciton('$scope'{...})])

　　 myApp.controller('mainController',[$scope, function('$scope'{....})]) 通过$scope全局变量可以访问相应的变量

B4. 事件监听

通过对标签内添加ng-事件名来实现该元素的事件监听，而事件监听的回调函数通过controller中$scope实现，类似于html的事件（写在scripts中）

在控制器方法中，

$scope.func= function (形参或空){

　　　　....

　}

　　例子：<html ng-app='app' ng-controller='mainController'>

　　　　 <head>

</head></br></br></br>

<button ng-click='clickHandler()'>Testing Button</button>

　　　　　　<ul>

　　　　　　</ul>

　　　　　　　　　　</span>

　　　　　　　　　</div>

　　　　　　 <span>{{comment}}</span>

　　　　 <a href="javascript:;" class="btn btn-danger" ng-click="deleteConment($index)">删除本评论</a>

　　　　 </li">

</ul>

</div>

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

　　　　　　　　app.controller('mainController',[$scope, function($scope){

　　　　　　　　　　$scope.mainTitle='lesson 123';

　　　　　　　　　　$scope.showflag=true;

　　　　　　　　　　$scope.msg='this is a testing...';

　　　　　　　　　　$scope.clickHandler =function(){

　　　　　　　　　　　　console.log('testing button click...');

　　　　　　　　　　　　$scope.showflag=!$scope.showflag;

　　　　　　　　　　};

$scope.li_infos=['123','456','789'];

　　　　　　　　　　$scope.li_click=function(index){

　　　　　　　　　　　　console.log('click item index:'+$scope.li_infos[index]);

　　　　　　　　　　};

　　　　　　　　　　// 评论功能

　　　　　　　　　　$scope.commArr=[];

　　　　　　　　　　$scope.submitComment=function(comm) {

　　　　　　　　　　　　$scope.commentArr.puch(comm);

　　　　　　　　　　　　$scope.comm='';

　　　　　　　　　　}

　　　　　　　　　　// 删除评论

　　　　　　　　　　$scope.deleteComment=function(index){

　　　　　　　　　　　　$scope.commentArr.splice(index,1); // 删除指定元素

　　　　　　　　　　　　//_winthout($scope.commentArr,$scope.commentArr[indeex]); // 删除可重复的元素

　　　　　　　　　　}

　　　　　　　　}]);

</script>

</html>

C 多控制器

模块化类似于div 思想，可以嵌套,外层变量可以给内层使用，一旦声明就必须通过.controller（）实现. 首页的通常将mainCotroller 作为唯一一个根控制器

D 路由

路由模块化.....

控制器之间传递变量

E: 服务

前面$rootScope 就是一种系统服务，提供跨控制器进行数据交互

可以这么认为，服务是一个名词，认为是全局变量。再ng框架中存在多种服务，可以系统服务（有$前缀,不需要定义服务的内容，可以直接注入到控制器中使用），也可以自定义服务（没有$前缀）。

E1 系统服务 $http 用于处理网路（包括ajax请求等）

....

　　app.controller('控制器名'，[$scope, $http,function($scope,$http){

　　　　//--- get ----

　　　　$http({

　　　　　　method:'GET',

　　　　　　url:'lesson4_httpservice.php' //<?php $success =array('msg'=>'ok','src'=>'mypic.jpg'); echo json($success); ?>

　　　　　　}).success(function(data){

　　　　　　　　console.log(data);

　　　　　　　　$scope.imgSrc=data.src;

}).error(function(err){

　　　　　　　　console.log(err);

　　　　　　});

　　　　}])

　　　　//post

　　　　$http({

　　　　　　method:'POST',

　　　　　　url:'lesson4_httpService.php',

　　　　　　headers:{

　　　　　　　　//"Content-Type":"multipart/form-data"

　　　　　　　　//"Content-Type":"applicaiton/json"

　　　　　　　　"Content-Type":"application/x-www-form-urlencoded",

　　　　　　　　}

　　　　　　data:'userName=Frank&password=123456'

　　　　　　}).success(function(data){

　　　　　　　　console.log(data);

　　　　　　　　$scope.imgSrc=data.src;

}).error(function(err){

　　　　　　　　console.log(err);

　　　　　　});

　　　　})

E2 过滤服务

　　$filter {{任意内容|过滤器}} $filter虽然是系统服务，但也支持自定义

　　支持4种过滤器

在控制器注入的地方可以添加$filter

app.controller('controllerName',['$scope','$filter',function('$scope','$filter'){

,,,,}])

　　（1）****|currency:'货币符号' 将内容转换为货币格式，默认为美元

　　 (2) **** | filter:子集数组

<!--

　　　　<ul><li ng-repeat='pname in pnames | filter:filter_input'>{{pname}}</li></ul>

　　　　.....

控制器中初始化 $scope.filter_input=''; $scope.pname=['abc','abbb','abggg']; ....　

　　　-->

　　(3) ****|uppercse, lowercase

(4) ****| orderBy:'表达式‘ 一般用于ng-repeat 且数据不是简单数据结构

<!--

　　　　<ul><li ng-repeat='info in infos | orderBy:'name'>{{info.name+' :'+info.score}}</li></ul>

　　　　.....

控制器中初始化 $scope.infos=[{name:'abc',scope:90},{name:'ssss',score:80}]; ....　

　　　-->

　　(5) 自定义过滤器：直接用数据模型.filter() 进行定义 app.filter('过滤器名称'，function(){return function（text){ .....}})

　　　　app.filter('suffix'，function(){return function(text){ return text.conat('---By -- frank ');}})

<!--

<p>{{msg| suffix}}</p>

--->

E3 时间轴服务

需要在controller中注入，有三种类型【间隔调用服务$interval】【超时服务$timeout】【清除时间轴服务- 无需注入】

app.controller('xxx',['$scope','$interval',‘$timeout',function('$scope','$interval',‘$timeout'){

　　　　var timer=null;

　　　　timer=$interval (function(){

　　　　　 //$interval.cancel(timer) 取消间隔调用　

　　　　}，1000);

　　　　var timeout=null;

　　　　timeout=$timeout(function(){

　　　　　 //$timeout.cancel(timer) 取消延时调用　

　　　　}，2000);

　　}]);

E4 监听服务$watch，在使用时不需要在控制器中注入

　　$scope.$watch('监听变量'， function（）{

}）；

E5 自定义服务 - value 服务

通常服务在注入后才启用内存

.value() 服务是对数据模型的扩展，是在不同控制器之间的全局变量

app.value('自定义服务名称'，json内容）；相当于$rootScope

E6 自定义服务 - constant 服务

　　基本与value 类似，申明之后，在controller之外不能更改，之类可以更改

E7 自定义服务 - factory 服务

　　通过factory（）方法实现创建一个object 对象并直接返回

　　返回的对象和value 直接提供的对象似乎并没有差别，但是这个对象可以在函数内进行任意操作，

　　但value无法对其结构进行操作

E8 自定义服务 - service服务

　　相当于一个class, 并构建了一个空白对象，外部controller中访问只能tongguo访问this元素。

E9 自定义服务 - provider服务

　不注入的时候，也驻内存.　所以无论是否注入都进行初始化的，其它和service 同

　　通过.provider()方法添加，并在第二个函数参数内通过this.$get=function(){...}固定结构扩充

app.provider('providerService',function(){

　　　　this.$get=function(){

　　　　　　var obj={};

　　　　　　obj.pname='Frank';

　　　　　　return obj

　　　　};

　　});

F 自定义指令

　　指令可以理解为属性，自定义指令是一个组件、标签

　　app.directive('自定义指令名'，function(){ //指令名称必须小写；

　　　　return {

　　　　restrict:'指令类型'，//'A'-- attribute 属性;'E' --- Element 元素； ’C' -- class； ‘M' -- Comment 以注释方式唤醒；如果是'M' replace 必须写true

　　　　template:'指令结构', // html 结构或 URL

　　　　replace:'指令复写' //

　　　　};

　　});

posted @ 2022-03-24 21:58 Hai-Zhong 阅读(275) 评论(0) 收藏举报

刷新页面返回顶部

Haizhong

AngularJS - 框架

公告