angularjs 使用中的积累

来源：互联网发布：木马编程编辑：程序博客网时间：2024/06/05 15:16

感觉AngularJS最大的优点

1. 改变操作dom的方式
将传统的JQuery的先选择元素，再操作的方式改变成了直接对于元素本身的操作。
这依赖于强大的Html Parser的能力和directive灵活。

2. 后端MVC前端化

是的，http://ASP.net MVC， strucs的很多机制，完全可以用AngularJS替代

3. 数据操作
依赖于良好的后端restful接口的配合，完全的变成了早些年pb这样的数据集成化开发
module是angular中重要的模块组织方式，它提供了将一组内聚的业务组件（controller、service、filter、directive…）封装在一起的能力。同时module也是我们angular代码的入口，首先需要声明module，然后才能定义angular中的其他组件元素，如controller、service、filter、directive、config代码块、run代码块等。
对于angular.module方法，我们常用的方式有有种，分别为angular.module(‘com.ngbook.demo’, [可选依赖])和angular.module(‘com.ngbook.demo’)。请注意它是完全不同的方式，一个是声明创建module，而另外一个则是获取已经声明了的module。

第一章
angularjs简介：
放弃了ie8，引入了单向数据绑定
删掉了一些过时的api
2.angularjs 4大核心特性：MVC、模块化、指令系统、双向数据绑定
其他特性：依赖注入、过滤器、服务
mvc: Model数据模型层、View视图层、Controller业务逻辑和控制逻辑
mvc的好处：职责清楚，代码模块化

第四章.angularjs开发移动app
一.
1.Native APP 原生app
2.WEB APP 用js html开发用其他的打个包
3.Hybrid APP 混合式式开发一部分用原生一部分用html的这种如qq、酷狗音乐
纯原生成本太大开发时间慢、更新慢；webapp操作体验性不是那么很好； Hybrid混合式开发呢则是两者中和，都还行
常用打包工具：
Phonegap、Appcan(国内)、appcelerator

常见web app框架：
jquery 技术栈统一成本低缺点：低端安卓机存在性能问题
Sencha Touch 各项技术架构很完善学习成本高
angularjs

第五章前端自动化测试工具

第二章Angularjs
2.1 angulargis是怎么样实现mvc的
如何使用Control：
都是由$scope来进行的，在页面html标签中加上了ng-app来识别， <button ng-click="save()" >
2.2路由、模块、依赖注入
一些都是从模块开始的，模块化实现

一。
1.angularjs点击事件跳转【2017-3-31】
//定义一个控制器
app.controller('addPersonnelCtrl', ['$http', '$location', function ($http, $location) {
var self = this;
self.jumpToUrl = function (path) {
$location.path(path);
};
}]);
<input ng-click="ctl.jumpToUrl('/app/admin/managePersonnel')" type="button" value="查看信息" class="sp-btn-blue sp-radius" />
self.viewManagePersonnel = function () {
self.jumpToUrl('/app/admin/managePersonnel');
};

2.angularjs的 ui-sref中传递参数【2017-3-31】
例如：路由配置如下：
$stateProvider.state('admin.userList', {
url: '/listUser?id&role', //参数必须先在这边声明
templateUrl: requirejs.toUrl('../../user/user_list.html'),
})
页面中：
<a ui-sref="admin.userList({id: 1, role: 2})" class="btn">按钮</a>
在js的指令中，接收用到了$stateParams
app.controller('retiredCtrl', ['$http', '$stateParams', function ($http, $stateParams) {
var getID = $stateParams.id; //获取到编号id
var getType = $stateParams.type; //获取到编号id
}]);

3.【2017-04-02】angularjs的ng-model与laydae一起使用的解决办法
/**
* 使用示例
* <input def-laydate type="text" id="id1" ng-model="startTime"/>
*/
app.directive('defLaydate', function () {
return {
require: '?ngModel',
restrict: 'A',
scope: {
ngModel: '='
},
link: function (scope, element, attr, ngModel) {
var _date = null, _config = {};

// 初始化参数
_config = {
elem: '#' + attr.id,
format: attr.format != undefined && attr.format != '' ? attr.format : 'YYYY-MM-DD',
max: attr.hasOwnProperty('maxDate') ? attr.maxDate : '',
min: attr.hasOwnProperty('minDate') ? attr.minDate : '',
choose: function (data) {
scope.$apply(setViewValue);

},
clear: function () {
//ngModel.$setViewValue(null);
}
};
// 初始化
_date = laydate(_config);
// 模型值同步到视图上
//ngModel.$render = function () {
// element.val(ngModel.$viewValue || '');
//};
// 监听元素上的事件
element.on('blur keyup change', function () {
scope.$apply(setViewValue);
});
setViewValue();

// 更新模型上的视图值
function setViewValue() {
var val = element.val();
//ngModel.$setViewValue(val);
}
}
}
});

4. ng-show 判断
<a ng-show="'{{user.STATUS}}'=='未生效'" ui-sref="app.app_install({id:'{{item.ID}}',appid:{{item.APPID}}})" class="ligblue">安装</a>
5.指令 directive
<a ui-sref="" toggle-main-menu>首页</a>
angular.module('app').directive("toggleMainMenu", function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
$(elem).click(function() {
if($(this).next().hasClass('sub-menu') === false) {
return;
}
console.log("click");
});
}
}
});

6,。
$http({
method: 'get',
url: 'json/message.txt',
data: { info: self.info }
}).success(function (response) {
//成功之后，提示继续添加，还是查看信息
if (response.success) {
special.dialog(response.message);
} else {
special.dialog("添加失败！");
}
});

7.ng-click传参数
<a ng-click="ctl.deleteWorksheet('{{item.ID}}')" class="sp-color-red">删除</a>
var self = this;
self.deleteWorksheet = function (str) {
var getID = str;
alert(getID);
}

8.声明控制器
app.controller('myappCtrl', ['$http', function ($http) {
}]);

9.angularjs中的img
<img class="sp-upload-photo" alt="" ng-src="{{ctl.info.photo2}}" />

10.angularjs教程：
10.1. ng-app指令：标记了AngularJS脚本的作用域，在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域
10.2. 双大括号绑定的表达式： AngularJS模板的核心功能——绑定，这个绑定由双大括号{{}}，这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中
10.3. ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。
ng-init 指令初始化应用程序数据。
10.4. AngularJS 使用$scope 对象来调用控制器。在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
10.5. AngularJS 过滤器过滤器可以使用一个管道字符（|）添加到表达式和指令中
AngularJS 过滤器可用于转换数据：
10.5.1. currency 格式化数字为货币格式。
<div ng-app="myApp" ng-controller="costCtrl">
数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">
<p>总价 = {{ (quantity * price) | currency }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
</script>
10.5.2. uppercase 格式化字符串为大写
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | uppercase }}</p>
</div>
10.5.3. lowercase 格式化字符串为小写。
<div ng-app="myApp" ng-controller="personCtrl">
<p>姓名为 {{ lastName | lowercase }}</p>
</div>
10.5.4. orderBy 过滤器根据表达式排列数组：
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
10.5.5. 输入过滤器
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
10.5.6. 自定义过滤器
以下实例自定义一个过滤器 reverse，将字符串反转：
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
10.5.7. 常用实例
1、uppercase，lowercase 大小写转换
{{ "lower cap string" | uppercase }} // 结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} // 结果：tank is good
2、date 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
3、number 格式化（保留小数）
{{149016.1945000 | number:2}}
4、currency货币格式化
{{ 250 | currency }} // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00
5、filter查找
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集
// 查找name为iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}
6、limitTo 截取
{{"1234567890" | limitTo :6}} // 从前面开始截取6位
{{"1234567890" | limitTo:-4}} // 从后面开始截取4位
7、orderBy 排序
// 根id降序排
{{ [{"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' }}

11.自定义过滤器
<div ng-app="myApp" ng-controller="myCtrl">
姓名: {{ msg | reverse }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖，进行反转
return function(text) {
return text.split("").reverse().join("");
}
});
</script>

11.2. 过滤时间：
<td ng-bind="ctl.info.BIRTHDAY | date:'yyyy-MM-dd'"></td>

0 0