Angular（三）

Angular(三)

一.使用Module(模块)组织依赖关系模块提供了一种方法,可以用来组织应用中一块功能区域的依赖关系:同时还提供了一种机制,可以自动解析依赖关系(又叫做依赖注入).一般来说,我们把这些叫做依赖服务,因为它们会负责为应用提供特殊的服务. 例如:如果购物站点中的一个控制器需要从服务器上获取一个商品列表,那么我们就需要某些对象——把它可以叫做Items——来处理从服务器端获取商品的工作.进而,Items对象就需要以某种方式与服务器上的数据库进行交互. 利用模块和模块内置的依赖注入功能,我们就可以把控…

三种Web前端框架比较与介绍--Vue, react, angular

一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数据的变更能实时展现到界面: 4.指令(ng-click ng-model ng-href ng-src ng-if...): 5.服务Service($compile $filter $interval $timeout $http...). 备注: (1) api比较全,功能比较完善.关于数据绑定…

Web端主流框架，jquery、angular、react、vue

不得不说,前端技术发展非常迅速,时不多久就有一个新的东西冒出来,并且迅速膨胀发展,让旁观者眼花缭乱,让开发者目眩神迷,但总体上来说,这波互联网大浪潮带动了前端技术的大发展,给曾经那些苦苦挣扎于DOM操作的页面工作者带来福音,也为前端技术的开发提出更高的要求. 我始终认为从 jquery 转到 angular 或 vue 是很困难的,这种困难体现在我们要从DOM驱动操作转换到数据驱动操作,从某个角度来说,DOM驱动是指,我们要在一段初始化的html代码上,简单暴力地加加减减,使显示的效果与我们的预…

ajax——CORS跨域调用REST API 的常见问题以及前后端的设置

RESTful架构是目前比较流行的一种互联网软件架构,在此架构之下的浏览器前端和手机端能共用后端接口. 但是涉及到js跨域调用接口总是很头疼,下边就跟着chrome的报错信息一起来解决一下. 假设:前端域名为front.ls-la.me,后端域名为api.ls-la.com.前端需要访问的接口为http://api.ls-la.com/user/info.json,需要用GET方式访问. 现在,用Ajax向后端发送请求,得到第一个错误.(cors跨域的写法参考:http://blog.csdn.…

seajs加载angularjs

angularjs是自动完成模块的控制的,而seajs加载模块是异步的,所以不做修改,直接seajs加载angularjs会出错. 在这里讲下自己的解决方法一.需要把ng-app去掉,ng-app是自动加载的.二.可能angularjs本身带有模块加载的功能,所以没做支持其它js加载angularjs的吧.要让angularjs支持seajs加载,需要加一个代码 if (typeof define === "function" && (defin…

好的web前端是如何拿到30万年薪的？

2018年前端开发不再像过去几年里新技术框架层出不穷,而是各种组件,模块,很多东西都有痕迹可寻,技术都在原来的基础上有了革新和沉淀. 前端招聘方面也在紧跟技术发展,大量“滥竽充数”的速成开发者开始失去市场,而优秀的前端在市场上的议价能力却越来越强. (此数据由职友集提供:可以看出优秀的前端人才提高了整体薪资水平) 之前在知乎上看到一个问题“好的web前端年薪会有多少?”底下不少前辈高人们放出了自己的工资截图,也有新人出来表示瞻仰.高的4,50w往上走都有,低的实习小几千的也不少. 匿名用户发表…

Angular 2 从0到1 （三）

作者:王芃 wpcfan@gmail.com 第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八)番外:Angular 2.0 从0到1 Rx-隐藏在Angular 2…

Angular.js学习笔记（三）

一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING{{ "TANK is GOOD" | lowercase }} // 结果:tank is good2.date 格式化{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:253.n…

angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适合Angular 事实证明,Zones解决的问题非常适合Angular在我们的应用程序中执行变更检测所需的内容.你有没有问过自己Angular何时以及为何进行变化检测?什么时候告诉Angular: 兄弟,我的应用程序中可能发生了一个变化.你能检查一下吗?在我们深入研究这些问题之前,让我们首先考虑一下…

Angular 个人深究（三）【由Input&Output引起的】

Angular 个人深究(三)[由Input&Output引起的] 注:最近项目在做别的事情,angular学习停滞了 1.Angular 中 @Input与@Output的使用 //test2.component.ts import { Component, OnInit,EventEmitter } from '@angular/core'; import { Input,Output } from '@angular/core'; @Component({ selector: 'app-t…

angular学习笔记(三十一)-$location(2)

之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍的是基于angular-1.3.2版本的,低版本的$location可能会有问题. hashbang模式和history api创建单页应用首先,$location是用在单页应用里的...(废话,angular就是用在单页的)...所以,$location处理的是url改变,但是不刷新页面的情况.…

angular学习笔记(三十一)-$location(1)

本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的相关方法: 以 'http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例: 1. 获取当前完整的url路径: $location.absUrl():// http://localhost/$loc…

angular学习笔记(三十)-指令(10)-require和controller

本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv…

angular学习笔记(三十)-指令(8)-scope

本篇讲解指令的scope属性: scope属性值可以有三种: 一.scope:false 默认值,这种情况下,指令的作用域就是指令元素当前所在的作用域. 二.scope:true 创建一个继承了父作用域的子作用域,这样,指令可以访问到父作用域里的值,父作用域的属性值一旦被修改,子作用域里相应的属性值也会被修改,但是子作用域里的属性值修改,不会影响到父作用域里的属性值举个栗子: html: <!DOCTYPE html> <html ng-app="dirAppModule&q…

angular学习笔记(三十)-指令(7)-compile和link(2)

继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的代码: html: <body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-…

angular学习笔记(三十)-指令(7)-compile和link(1)

这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那么link属性的定义会被忽略.原因继续看讲解: 1.compile的返回值:compile函数返回值有两种可能 (1).返回pre-link函数和post-link函数: 一种是返回一个对象,对象具有两个方法,第一个方法是pre-link函数,第二个方法是post-link函数. compile:f…

angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker. 这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样. 下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linke…

angular学习笔记(三十)-指令(5)-link

这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数:scope,iEle,iAttrs,ctrl,linker scope:指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释 iEle:指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法和属…

angular学习笔记(三十)-指令(4)-transclude

本篇主要介绍指令的transclude属性: transclude的值有三个: 1.transclude:false(默认值) 不启用transclude功能. 2.transclude:true 启用transclude,启用以后,有两个地方会发生变化: ①.使用指令的元素内部的所有内容都会被保存起来.不妨先把这一段内容称为一坨. 比如指令元素是这样的: <cd-hello><h3>code_bunny</h3></cd-hello>,那么,这一坨就是&l…

angular学习笔记(三十)-指令(3)-templateUrl

这篇主要介绍指令中的templateUrl属性: templateUrl属性值是一个url路径,路径指向一个html模板,html模板会填充(或替换)指令内容: 比如上一篇文章里的案例,我们把原来的template属性改用为templateUrl属性: 方法一: html: <!DOCTYPE html> <html ng-app = 'dirAppModule'> <head> <title>20.2 指令(templateUrl)</title&g…

angular学习笔记(三十)-指令(2)-restrice,replace,template

本篇主要讲解指令中的 restrict属性, replace属性, template属性这三个属性一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: E 2. 属性: A 3. 样式类: C 4. 注释: M restrict的值可以是上面四个字母的任意一个或多个的组合. 不指定的话默认为A. 二. replace: 布尔值.是否将指令元素替换,可以有两个值: 1.true: 替换整个使用指令的元素 2.false: 不替换整个使用指令的元素,而…

Angular总结三：组件

Angular 的应用就是一棵组件树,一个页面可以是一个组件,某一页面的一个区块也可以是一个组件.为了弄明白组件及组件树,我将原来做过的一个静态网站进行组件改造. 原项目地址 https://github.com/xinjie-just/tuobei-customer-back-end.git. 原项目结构: 原项目首页一.在 G 盘 angular 目录下新建 tuobei 项目二.参照原项目目录及需要的文件,在 assets 资源下新建 fonts,styles,scripts,imag…

Angular入门教程三

4.6指令(directive) 通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的. 模板中可以使用的东西包括以下四种: 1.指令(directive):ng提供的或者自定义的标签和属性,用来增强HTML表现力: 2.标记(markup):即双大括号{{}},可将数据单向绑定到HTML中: 3.过滤器(filter):用来格式化输出数据: 4.表单控制:用来增强表单的验证功能. 其中,指令无疑是使用量最…

angular总结控制器的三种主要职责：为应用中的模型设置初始状态通过$scope对象把数据模型或函数行为暴露给视图监视模型的变化，做出相应的动作

m1.双向数据绑定: <body> <div ng-app ng-init="user.name='world'"> <h1>使用NG实现双边数据绑定</h1> <input type="text" placeholder="请输入你的姓名" ng-model="user.name"> <p>hello <strong>{{user.name}…

从零开始一个个人博客 by asp.net core and angular（三)

这是第三篇了,第一篇只是介绍,第二篇介绍了api项目的运行和启动,如果api项目没什么问题了,调试都正常了,那基本上就没什么事了,由于这一篇是讲前端项目的,所以需要运行angular项目了,由于前端项目是需要调用接口的,好像要配置跨域,跨域这个东西,你可以在asp.net core项目上配置,这样在本机5000端口运行时就可以直接调用了,也不会有跨域问题,也可以用nginx反向代理时配置跨域,由于我的项目要经常本地调试,所以我在本地直接配置了跨域,这样部署的时候 nginx就不用配置跨域了,具体…

Angular开发者指南(三)数据绑定数据绑定AngularJS应用程序中的数据绑定是模型和视图组件之间的数据的自动同步. AngularJS实现数据绑定的方式可以将模型视为应用程序中的单一来源. 视图是模型在任何时候的投影. 当模型更改时,视图反映更改,反之亦然.经典模板系统中的数据绑定大多数模板系统仅在一个方向绑定数据:它们将模板和模型组件合并到一个视图中. 在合并发生后,对视图的模型或相关部分的更改不会自动反映在视图中. 更糟的是,用户对视图所做的任何更改都不会反映在模型中. 这意味…

Angular SPA基于Ocelot API网关与IdentityServer4的身份认证与授权（三）

在前面两篇文章中,我介绍了基于IdentityServer4的一个Identity Service的实现,并且实现了一个Weather API和基于Ocelot的API网关,然后实现了通过Ocelot API网关整合Identity Service做身份认证的API请求.今天,我们进入前端开发,设计一个简单的Angular SPA,并在Angular SPA上调用受Ocelot API网关和Identity Service保护的Weather API. 回顾 <Angular SPA基于Ocel…

【Angular（三）】的更多相关文章