大家好，又见面了，我是你们的朋友全栈君。
1. AngularJS简介AngularJS是一个JavaScript框架，用js编写的库
代码语言：javascript复制
1.1. AngularJS 扩展了 HTMLAngularJS 通过 ng-directives扩展了HTML
ng-app 指令定义一个 AngularJS 应用程序。 若不声明，将直接显示表达式。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。一般使用 **{
{ ng-model 的值 }}**获取数据
代码语言：javascript复制
名字 :
Hello {
{name}}
2. AngularJS表达式AngularJS 使用 表达式 把数据绑定到 HTML
使用{
{ 表达式 }}进行数据的输出
表达式可以包含字符，操作符，变量表达式可以写在HTML中不支持条件判断，循环及异常支持过滤器代码语言：javascript复制
我的第一个表达式: {
{ 5 + 5 }}
代码语言：javascript复制
总价： {
{ quantity * cost }}
代码语言：javascript复制
姓名： {
{ firstName + " " + lastName }}
代码语言：javascript复制
姓为 {
{ person.lastName }}
代码语言：javascript复制
第三个值为 {
{ points[2] }}
指令带有前缀 ng- ng-app指令用来初始化一个 AngularJS应用程序
3.1. 数据绑定表达式**{
{ firstName }}** 通过 ng-model=“firstName” 进行同步。
代码语言：javascript复制
{
{ firstName }}
代码语言：javascript复制
- {
{ i }}
代码语言：javascript复制
- {
{ i.name + "," + i.country }}
3.5. ng-model 指令代码语言：javascript复制/// ng-model="name" 声明一个name变量
/// $scope.name 使用name变量绑定应用程序数据到 HTML 控制器(input, select, textarea)的值为应用程序数据提供类型验证（number、email、required）为应用程序数据提供状态（invalid、dirty、touched、error）为 HTML 元素提供 CSS 类绑定 HTML 元素到 HTML 表单将输入域的值（$scope）与 AngularJS 创建的变量绑定
代码语言：javascript复制
名字:
双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改
代码语言：javascript复制
你输入了： {
{ name }}
验证用户输入 ng-show
代码语言：javascript复制
为应用数据提供状态值 （invalid, dirty, touched, error）代码语言：javascript复制
CSS类，基于它们的状态为 HTML 元素提供了 CSS 类代码语言：javascript复制
ng-empty 为空的时候
ng-not-empty 不为空的时候
ng-touched 控件已失去焦点
ng-untouched 控件未失去焦点
ng-valid 验证通过
ng-invalid 验证失败
ng-dirty 值改变的时候
ng-pending 任何为满足 $asyncValidators 的情况
ng-pristine 控件为初始状态3.6. ng-repeat指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。用于循环输出
3.7. 创建自定义指令声明：使用 .directive 函数来添加自定义的指令，声明时使用 驼峰命名法
代码语言：javascript复制
调用：调用时使用 – 分割
元素名：
属性：
类名：
必须设置 restrict 的值为 “C” 才能通过类名来调用指令。
代码语言：javascript复制注释：
添加 replace 属性，使注释可见
设置 restrict 的值为 “M”
代码语言：javascript复制4. AngularJS Scope(作用域)Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
4.1. 使用Scope在AngularJS创建控制器时，可以将$scope对象当作一个参数传递
代码语言：javascript复制
{
{ carName }}
4.2. Scope概述AngularJS应用组成如下：
View（视图），即HTML scope的属性和方法Model（模型），当前HTML中可用的数据 scopeController（控制器），JavaScript函数，可以添加或修改属性 scope的属性和方法代码语言：javascript复制
{
{ greeting }}
4.3. Scope作用范围根作用域：$rootScope
作用在 ng-app 指令包含的所有HTML元素中用 $rootScope 定义的值，可以在各个controller中使用代码语言：javascript复制
{
{ lastName }} 家族成员:
- {
{x}} {
{lastname}}
5. AngularJS控制器ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
5.1. 控制器方法代码语言：javascript复制
姓：
名：
姓名：{
{ fullName() }}
5.2. 外部文件中的控制器将 6. AngularJS 过滤器过滤器可以使用一个**管道字符（|）**添加到表达式和指令中。
6.1. 过滤器分类currency： 格式化数字为货币格式filter： 从数组项中选择一个子集lowercase: 格式化字符串为小写orderBy: 根据某个表达式排列数组uppercase: 格式化字符串为大写6.2. 表达式中添加过滤器将字符串格式化为大写 小写
代码语言：javascript复制
姓名为:{
{ fullName | uppercase }}
代码语言：javascript复制
总价:{
{ (quantity * price) | currency }}
代码语言：javascript复制
-
{
{ x.name + "," + x.country }}
代码语言：javascript复制
输入过滤：
-
{
{ (x.name | uppercase) + "," + x.country }}
代码语言：javascript复制
姓名：{
{ msg | reverse }}
7. AngularJS 服务(service)在 AngularJS 中，服务是一个函数或对象，可在 AngularJS 应用中使用。
7.1. $location服务返回当前页面的URL地址
代码语言：javascript复制7.2. $http服务服务向服务器发送请求，应用响应服务器传送过来的数据
代码语言：javascript复制7.3. $timeout 服务两秒后显示信息
代码语言：javascript复制7.4. $interval 服务每隔一秒显示信息
代码语言：javascript复制7.5. 创建自定义服务创建自定义服务，用于转换16进制数
代码语言：javascript复制
{
{ hex }}
7.6. 在过滤器中使用服务（自定义）代码语言：javascript复制
- {
{x | myFormat}}
8. AngularJS 选择框(select)AngularJS 可以使用数组或对象创建一个下拉列表选项。
8.1. 使用 ng-options 创建选择框创建一个下拉列表，列表项通过对象和数组循环输出
代码语言：javascript复制
8.2. 数据源为数组代码语言：javascript复制
你选择的是：{
{ selSite.site }}
网址为：{
{ selSite.url }}
8.3. 数据源为对象x 为键(key) y 为值(value)
代码语言：javascript复制
你选择的是: {
{ selCar.brand }}
型号为: {
{ selCar.model }}
颜色为: {
{ selCar.color }}
9. AngularJS表格ng-repeat 指令可以完美的显示表格。
代码语言：javascript复制
| {
{ $index+1 }} |
{
{ x.Name }} |
{
{ x.Country | uppercase }} |
10. AngularJS SQL使用 $http 从后台请求数据，后端代码可以访问数据库，然后将结果以 json 的形式返回
代码语言：javascript复制11. AngularJS HTML DOMAngularJS 为 HTML DOM 元素的 属性 提供了绑定应用数据的指令。
11.1. ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。 案例：同意协议才能下一步
代码语言：javascript复制
我已阅读并同意
ng-disabled 指令绑定应用程序数据 "mySelected" 到 HTML 的 disabled 属性。
ng-model 指令绑定 "mySelected" 到 HTML input checkbox 元素的内容（value）。11.2. ng-show指令隐藏或显示一个 HTML 元素
代码语言：javascript复制
我是可见的。
我是不可见的。
我是可见的。
代码语言：javascript复制
我是不可见的。
我是可见的。
{
{ count }}
13. AngularJS 表单13.1. 输入框 使用 ng-model 进行数据绑定
13.2. 复选框(Checkbox)checkboc的值为 true 或 false ，可以使用 ng-model 指令绑定，值可以用于应用中
代码语言：javascript复制
My Header
代码语言：javascript复制
Dogs
Welcome to a world of dogs.
Tutorials
Learn from examples.
Cars
Read about cars.
13.4. 下拉菜单使用
代码语言：javascript复制
{
{ selecteName.name }}
{
{ selecteName.msg }}
13.5. 表单实例novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。
代码语言：javascript复制
form = {
{ user }}
master = {
{ master }}
14. AngularJS 输入验证form的name.input的name.$dirty 表单有填写记录$valid 字段内容合法的$invalid 字段内容是非法的$pristine 表单没有填写记录基本的表单验证实例，novalidate 用于禁用浏览器默认的验证
代码语言：javascript复制
15. AngularJS API复制对象 angular.copy()
代码语言：javascript复制//原型
angular.copy(source, [destination]);
var obj = {
a: 1};
var obj2 = angular.copy(obj)比较对象 angular.equals()
代码语言：javascript复制var obj1 = {
a: 1};
var obj2 = obj1;
// 引用一致，则相等
console.log(angular.equals(obj1, obj2)); // true遍历对象或者数组 angular.forEach()
代码语言：javascript复制//原型
angular.forEach(obj, iterator, [context]);
/// 对象
var values = {
name: 'misko', gender: 'male'};
angular.forEach(values, function (value, key) {
console.log(key + ' = ' + value);
});
/// 数组
var arr = ['misko', 'male'];
angular.forEach(arr, function (value, i) {
console.log(i + ' = ' + value);
});将对象，数组，日期，字符串，数字转换为 json 字符串 angular.toJson()
代码语言：javascript复制//原型
angular.toJson(obj, pretty); //pretty为美化输出格式用
var obj = {
p1: 1, p2: true, p3: '2'};
var jsonString = angular.toJson(obj);
console.log(jsonString);将 JSON 字符串转换为 JSON 对象 angular.fromJson()
代码语言：javascript复制//原型
angular.fromJson(/*string*/ jsonString)
var jsonString = '{"p1": "xx", "p2": 1, "p3": true}';
var jsonObj = angular.fromJson(jsonString);
console.log(jsonObj);16. AngularJS Bootstrap代码语言：javascript复制
具体需要学习bootstrap
17. AngularJS 跨域包含使用 ng-include 包含其他文件，使用 $sceDelegateProvider 设置跨域包含
代码语言：javascript复制
18. AngularJS 依赖注入依赖注入（DI）：是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
==》 没事你不要来找我，有事我会去找你。
18.1. factory组件factory 是一个函数用于 返回 值。在 service 和 controller 需要时创建。
代码语言：javascript复制var app = angular.module("mainApp", []);
// 创建 factory "MathService" 用于两数的乘积
app.factory("MathService", function(){
var myFactory = {
};
myFactory.multiply = function(a, b){
return a * b
}
return myFactory;
});
// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){ 18.2. value组件用于向控制器传递值（配置阶段）
代码语言：javascript复制var app = angular.module("mainApp", []);
// 创建 value 对象 "defaultInput" 并传递数据
app.value("defaultInput", 5);
// 将 "defaultInput" 注入到控制器
app.controller('CalcController', function($scope, CalcService, defaultInput) { 18.3. provider组件AngularJS 中通过 provider 创建一个 **service、factory **等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。
代码语言：javascript复制var app = angular.module("mainApp", []);
// 使用 provider 创建 service 定义一个方法用于计算两数乘积
app.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {
};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});18.4. 具体实例使用 factory value 组件
代码语言：javascript复制
输入一个数字：
结果: {
{ res }}
使用 provider 组件
代码语言：javascript复制/// 使用 app.config 替换了 app.factory
app.config(function($provide) {
$provide.provider('MathService', function() {
this.$get = function() {
var factory = {
};
factory.multiply = function(a, b) {
return a * b;
}
return factory;
};
});
});19.AngularJS 路由通过 AngularJS 可以实现 多视图的单页 Web 应用（single page web application，SPA）。
AngularJS 路由通过 #! + 标记 区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
创建了两个 URL： /first 和 /second。每个 URL 都有对应的视图和控制器。
代码语言：javascript复制
函数$routeProvider.when('URL', 路由配置对象)
路由配置对象
代码语言：javascript复制$routeProvider.when(url, {
template: 简单的HTML内容
templateUrl: 插入HTML模板文件
controller: string, function 或 array
controllerAs: 为controller指定别名
redirectTo: 重定向的地址
resolve: 指定当前controller所依赖的其他模块
});实例
代码语言：javascript复制
20. AngularJS 实例代码语言：javascript复制
我的备忘录
{
{ x.todoText }}
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/164209.html原文链接：https://javaforall.cn