angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令，数据绑定 3-模型和作用域 scope 4-控制器和过滤器 5-service 服务 service 服务 angular...由于 angular 的局限性 angular 需要实时的监控 在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location...对象在 AngularJS 应用中有一定的局限性。...服务向服务器发送请求，应用响应服务器传送过来的数据。...var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $http) { $http.get
在项目中创建一个接口，按照后端返回的数据信息进行属性的定义，用来映射请求的响应信息（Angular 只能将请求响应对象转换成接口类型，不能自动转换成类实例） ng g interface interfaces...，引入请求响应对象的接口定义，然后设定 get 请求的响应对象为 GetQuotesResponseModel，之后在使用时就可以以一种结构化数据的方式获取请求返回的数据信息 import { Injectable...; } } 当请求发生错误时，通过在 HttpClient 方法返回的 Observable 对象中使用 pipe 管道将错误传递给自定义的错误处理器，从而完成捕获错误信息的后续操作 ?...4.2.2、请求重试 某些情况下存在因为特殊原因导致短时间的请求失败，这时可以在 pipe 管道中，当请求失败后，使用 retry 方法进行多次的请求重试，在进行了多次重试后还是无法进行数据通信后，则进行错误捕获...当我们需要对请求进行修改时，例如在请求的 header 中添加上 token 信息，此时我们需要先克隆一个原始的请求对象，在这个克隆后的请求上进行操作，最终将这个克隆后的请求传递给下一个拦截器 import
2-表达式和指令，数据绑定 angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令，数据绑定 3-模型和作用域 scope 4-控制器和过滤器 一 表达式 ng-init...ng-bind 两者都可以像 JavaScript 一样内嵌原生的 js代码，并且很好的运行 其中数字，字符串，object 对象，数组和表达式都和 JavaScript 的展现方法相同。...如果有多个 ng-app 可以手动加载 // 页面加载完成后,再加载模块 angular.element(document).ready(function() { //手动加载myApp2 ng-app...要调用自定义指令，HTML 元素上需要添加自定义指令名。...}; }); //restrict 值可以是以下几种: 复制代码 总结一下 angular 自定义的几种写法 1、上面这种要清晰一下 // angular.module('MyApp',[]) //
用rootscope定义的值，可以在各个controller中使用。...XSFR令牌的cookie名称 transformRequest: 函数或者函数数组，用来对http请求的请求体和头信息进行转换，并返回转换后的结果。 ...transformResponse: 函数或者函数数组，用来对http响应的响应体和头信息进行转换，并返回转换后的结果。 ...请求的响应对象 $http请求的响应对象 angular传递给then方法的响应对象包括以下几个属性 data: 转换之后的响应体 status: http响应状态码...replace( )：如果被调用，就会用改变后的URL直接替换浏览器中的历史记录，而不是在历史记录中新建一条信息，这样可以阻止『后退』。
在AngularJS中，服务是一个函数或对象，在你的AngularJS 应用中使用。 有个$location 服务，他可以返回当前页面的URL地址。 ...$http 服务 $http 是AngularJS 应用中做常用的服务。服务像服务器发送请求。应用响应服务器传递过来的数据。 ...实例： 使用$http 服务器服务器请求数据： var app = angular.module('myApp',[]); ...，需要在定义过滤器的时候独立添加： 实例： 使用自定义的服务hexafy 将一个数组转换为16 进制。 ...，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服服务器中使用它。
4-控制器和过滤器 angular1.x 学习目录 1-angular 学习导航和基础 2-表达式和指令，数据绑定 3-模型和作用域 scope 4-控制器和过滤器 基本 AngularJS 应用程序被控制器控制...ng-controller 指令定义了应用程序控制器。 控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。...应用程序在 内运行。 ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。 myCtrl 函数是一个 JavaScript 函数。...AngularJS 使用$scope 对象来调用控制器。 在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。...控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。 控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ngAfterViewInit：Angular创建组件的视图后。 ngAfterViewChecked：在Angular检查组件视图的绑定之后。 2. ...要定义应用程序（JavaScript / Typescript）对象的类型，我们应该在应用程序相应模块的models文件夹中，定义接口和实体类。...更少的Http请求数：如果应用程序没有捆绑来支持延迟加载（或任何原因），对于每个关联的HTML和CSS，都会有一个单独的服务器请求。...如果服务器的HTTP请求结果或其它一些异步操作不再需要，则Observable的订阅者可以取消订阅，而Promise将最终调用成功或失败的回调，即使你不需要通知或其提供的结果。...其中，反应最为迅速的就是Wijmo，Wijmo 在 Angular2 发布几个小时后就发布了支持 Angular2 正式版本的 Wijmo。
@angular/forms 构建响应式表单 RouterModule @angular/router 使用前端路由 HttpClientModule @angular/common/http 发起...http 请求 JavaScript 模块与 NgModule 在 JavaScript 中，每一个 js 文件就是一个模块，文件中定义的所有对象都从属于那个模块。...在使用 @NgModule 装饰器时，通常会使用到下面的属性来定义一个模块 declarations：当前模块中的组件、指令、管道 imports：当前模块所需的其它 NgModule 模块...exports：其它模块中可以使用到当前模块可声明的对象 providers：当前模块向当前应用中其它应用模块暴露的服务 bootstrap：用来定义整个应用的根组件，是应用中所有其它视图的宿主...每个组件都只能声明在一个 NgModule 类中，同时，如果你使用了未声明过的组件，Angular 将会报错 同样的，对于当前模块使用到的自定义指令、自定义管道，也需要在 declarations 数组中进行声明
2.5 ng-controller: (指定控制器) $scope 的贯穿整个AngularJS App应用，所有变量，函数，对象全都绑定在$scope对象中，它在视图和控制器间建立一个通道，基于作用域视图在修改数据时会立刻更新...) //定义一个模块 var app = angular.module("dintalk", []); //定义模块函数 app.controller("myController", function... {{arr}} 2.7 ng-repeat: (循环对象数组...: (发送ajax请求) $http.get(url).success(function(data){}) $http.post(url,params).success(function(data){...异步请求的方式 $http.get('..
://www.codingcool.com:8080/api应该这么传入： $resource("http://www.codingcool.com\\:8080/api"); 这种情况在ng的1.2.0rc1...actions（可选） 对象类型，用来定义$resource提供的可以使用方法，声明细节和$http一样。...服务~ 当异步请求成功，数据从服务器端取回后，被封装到一个$resource服务的一个对象实例中，这个对象可以被save,remove,delete方法直接操作，这种封装并提供简单的CRUD操作的方式，...这些函数接受的参数不仅仅是简单的对象，而是经过包装之后的对象，会被添加$save(), $remove(), $delete三个方法，可以直接调用这三个方法来后服务端进行交互。... transformResponse:函数或者函数数组 cache:布尔型或缓存对象 timeout:数值或promise对象 withCredentials:布尔类型
在很多服务中，比如 $location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在 AngularJS 应用中有一定的局限性...实例 使用 $http 服务向服务器请求数据: var app = angular.module('myApp', []); app.controller('myCtrl', function($scope...实例 两秒后显示信息: var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $timeout...当你创建了自定义服务，并连接到你的应用上后，你可以在控制器，指令，过滤器或其他服务中使用它。...'hexafy', function(hexafy) { return function(x) { return hexafy.myFunc(x); }; }]); 在对象数组中获取值时你可以使用过滤器
AngularJS 服务(service) 在 AngularJS 中，服务是一个函数或对象，可在 AngularJS 应用中使用。 7.1....$http服务 服务向服务器发送请求，应用响应服务器传送过来的数据 var app = angular.module("myApp", []); app.controller('myCtrl...', function($scope, $http){ // 使用 $http 服务向服务器请求数据 $http({ method: 'GET', url: '请求地址' }...AngularJS SQL 使用 $http 从后台请求数据，后端代码可以访问数据库，然后将结果以 json 的形式返回 app.controller('sqlCtrl', function...，则相等 console.log(angular.equals(obj1, obj2)); // true 遍历对象或者数组 angular.forEach() //原型 angular.forEach
1.2.3 依赖注入 依赖注入(Dependency Injection,简称DI)是一种设计模式，指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则此对象在创建时，其依赖的对象由框架来自动创建并注入进来...1.3.6 循环数组 AngularJS入门小Demo-6 循环数组 angular.min.js">...1.3.7 循环对象数组 AngularJS入门小Demo-7 循环对象数组 angular.min.js...在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。...ID的数组，当我们点击复选框后判断是选择还是取消选择，如果是选择就加到数组中，如果是取消选择就从数组中移除。
管理指令、管道、组件 在模块中定义的提供商是会加到根模块中去，正常引导的话，如果是惰性加载的话，就会放在一部分中（在loading范围内的根模块）。...模块没有父子关系，只有引入 ---- 用@NgModule来定义应用中的模块。 Angular 模块是带有 @NgModule 装饰器的函数。...@NgModule接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。 它标记出该模块拥有的组件、指令和管道， 并把它们的一部分公开出去，以便外部组件使用它们。... Angular模块是由一个@NgModule装饰器提供元数据的类，元数据包括： 1-导入其他模块 2-声明哪些组件、指令、管道属于该模块 3-公开某些类，以便其他的组件模块可以使用它们...ModuleWithProviders对象有两个属性： ngModule - XxxModule类 providers - 配置好的服务提供商 知识点 NgModel是Angular指令。
pluck(prop:string)- 操作符，提取对象属性值，是一个柯里化后的函数，只接受一个参数。 二....Angular应用中的Http请求 Angular应用中基本HTTP请求的方式: import { Injectable } from '@angular/core'; import { Observable.../message.service';//某个自定义的服务 import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http...使用Rxjs构建Http请求结果的处理管道 3.1 基本示例 尽管看起来Http请求的返回结果是一个可观测对象，但是它却没有map方法，当需要对http请求返回的可观测对象进行操作时，可以使用pipe操作符来实现...,{observe:'response'}); } http请求默认返回一个冷Observable，每当返回的流被订阅时就会触发一个新的http请求,Rxjs中通过shareReplay( )操作符将一个可观测对象转换为热
管理多个异步数据请求会比较困难，但我们可以借助 Angular Http 服务和 RxJS 库提供的功能来实现上述的功能。处理多个请求有多种方式，使用串行或并行的方式。...仅当内部的 Observable 对象发出值后，才会合并源 Observable 对象输出的值，并最终输出合并的值。...请求 我们先来看一下 Angular Http 服务简单示例： import { Component, OnInit } from '@angular/core'; import { HttpClient...即我们在需要在上一个请求的回调函数中获取相应数据，然后在发起另一个 HTTP 请求。...一旦列表的 Observable 对象都发出值后，forkJoin 操作符返回的 Observable 对象会发出新的值，即包含所有 Observable 对象输出值的数组。
//1、定义模块，指定模块名称，依赖对象，配置函数 angular.module("mocule1",['$window','$http'],function(){...var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象...var app01 = angular.module("app01", []); //定义控制器，指定控制器的名称，$scope是全局对象...如果表达式结果为一个数组，则数组中每个元素为使用空格分隔的一个或多个类名字符串。 如果表达式结果为一个对象，对象中的每个key-value中如果键值为真时则键名作为类名。...由于浏览器会优先使用并行的方式来加载图片和其它内容，所以angular没有机会拦截到数据绑定请求。
//1、定义模块，指定模块名称，依赖对象，配置函数 angular.module("mocule1",['$window','$http'],function(){...2.5、$watch 用于监视对象的变化，可以获得变化前的值与变化后的值。 上面的做法有一个潜在的问题，只有当用户在文档框中输入值的时候我们才会去计算，如还有更多的输入框，每一个输入框都要绑定。...ng-submit它可以防止默认动作(这对表单意味着向服务器发送请求和重新加载当前页)，但只在表单没包含action, data-action或x-action属性时。...如果表达式结果为一个数组，则数组中每个元素为使用空格分隔的一个或多个类名字符串。 如果表达式结果为一个对象，对象中的每个key-value中如果键值为真时则键名作为类名。...由于浏览器会优先使用并行的方式来加载图片和其它内容，所以angular没有机会拦截到数据绑定请求。
搭建开发环境 开发环境的搭建非常简单，使用 Angular CLI 几乎可以完成所有工作，但是在与后端联调接口的时候，还需要做一些自定义配置。...其中使用 ng build 打包后可能会有资源引用错误的问题，可以看一下使用 ng build 构建后资源地址引用错误的问题。...在联调接口时，可能还会遇到传输 Cookie 的问题，具体可以参见 关于 Angular 跨域请求携带 Cookie 的问题。...Angular 官网的定义如下： 响应式编程是一种面向数据流和变更传播的异步编程范式（Wikipedia）。...以下是一个很简单的官方示例： import { ajax } from 'rxjs/ajax'; // 创建一个发送 AJAX 请求的 Observable 对象 const apiData = ajax
="lib/angular/angular.js"> 这行代码载入angular.js脚本,当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本,angular.js...脚本运 行后将会寻找含有ng-app指令的HTML标签,该标签即定义了AngularJS应用的作用域。...configFn： 模块的启动配置函数，在angular config阶段会调用该函数，对模块中的组件进行实例化对象实例之前的特定配置，如我们常见的对$routeProvider配置应用程序的路由信息。...因为浏览器载入页面时,同时也会请求载 入图片，AngularJS在页面载入完毕时才开始编译——浏览器请求载入图片时{{phone.imageUrl}}还没得到编译!...2.4 模型和控制器 在PhoneListCtrl控制器里面初始化了数据模型(这里只不过是一个包含了数组的函数,数组中存储的对象是手机数据列表): app/js/controller.js
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
