俗话说“好记性不如烂笔头”，编程的海洋如此的浩大，养成做笔记的习惯是成功的一步！

此笔记主要是angularjs1.6.2版本的笔记，并且笔记都是博主自己一字一字编写和记录，有错误的地方欢迎大家指正。

---

一、基础知识：
1、angularjs  是一个 JavaScript 框架。它可通过
  



2、AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效。
例如：ng-app="" 写法等于  data-ng-app=""


3、自定义指令：
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive。

例如:

















4、scope 作用域是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

而scope 是模型，所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。

{{lastname}} 家族成员:

• {{x}} {{lastname}}

5、angularjs的过滤器：可以使用一个管道字符 | 添加到表达式和指令中。
   (1)系统自带的过滤器：
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。


例如：

名字：

输入的大些名字为：{{name | uppercase}}




(2)自定义过滤器：
var mymod = angular.module("mymod",[]);
//myformat是过滤器名称，后面的函数里再返回函数对象，返回的函数对象就是格式化需要调用的对象
//返回函数的第一个参数是格式化的数据，后面参数是格式化时传入的参数。
mymod.filter("myformat", function() {
return function(input, isUppercase) {
var out = "fm:" + input
if (isUppercase) {
out = out.toUpperCase();
}
return out;
}
});

使用方式：

名字：

输入的大些名字为：{{name | myformat:true}}







6、angularjs的服务：
(1)服务是一个函数或对象，可在你的 AngularJS 应用中使用，AngularJS 内建了30 多个服务，
比较常用的服务有：$location、$http、$timeout、$interval等。

使用例子：
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
//使用服务时，必须先在函数参数中说明服务
$scope.myUrl = $location.absUrl();
});

(2)自定义服务：
mymod.service("myser", function() {
this.addSerFlag = function (arg) {
return "myser:" + arg
}
})

使用方式：
var mymod = angular.module("mymod",[]);
//在controller控制器中使用自定义的服务。
mymod.controller("mycrl", function($rootScope, myser){
$rootScope.name = myser.addSerFlag("李四abc")
});

//在自定义的过滤器中使用自定义的服务。
mymod.filter("myformat", ["myser", function(myser) {
return function(input,isUppercase) {
var out = myser.addSerFlag("fm:" + input)
if (isUppercase) {
out = out.toUpperCase();
}
return out;
}
}]);



7、事件绑定：


点我！

{{ count }}

弹框





8、表单校验：
angular对表单校验也有支持，表单校验有几个常用的属性：
属性 描述
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

使用表单校验是，必须通过form的name来做绑定个子元素的name，例如myForm.myEmail
例子：

邮箱：

这邮箱是必须的
这邮箱是非法的

9、使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容，ng-include 指令除了可以包含 HTML 文件外，
  还可以包含 AngularJS 代码。
  
  默认情况下， ng-include 指令不允许包含其他域名的文件。如果你需要包含其他域名的文件，你需要设置域名访问白名单：
例子：







三、附加：
1、angularjs框架拥有许多实用的工具方法，常用的工具方法用：
   'bootstrap': bootstrap,
'copy': copy,
'extend': extend,
'merge': merge,
'equals': equals,
'element': jqLite,
'forEach': forEach,
'injector': createInjector,
'noop': noop,
'bind': bind,
'toJson': toJson,
'fromJson': fromJson,
'identity': identity,
'isUndefined': isUndefined,
'isDefined': isDefined,
'isString': isString,
'isFunction': isFunction,
'isObject': isObject,
'isNumber': isNumber,
'isElement': isElement,
'isArray': isArray,
'version': version,
'isDate': isDate,
'lowercase': lowercase,
'uppercase': uppercase,
'callbacks': {$$counter: 0},
'getTestability': getTestability,
'reloadWithDebugInfo': reloadWithDebugInfo,
'$$minErr': minErr,
'$$csp': csp,
'$$encodeUriSegment': encodeUriSegment,
'$$encodeUriQuery': encodeUriQuery,
'$$stringify': stringify

用法：angular.copy(arg); //angular是框架定义的window属性（全局变量），所有工具类的使用都是通过借助该变量来引用。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！