ANGULAR - 技术教程文章
angular中的ng-click指令案例【代码】
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>入门</title><script src="node_modules/angular/angular.js"></script><style>.bgc-red {background-color: red;}</style> </head> <body ng-app="s1.app"><button class="{{currentBtn == 1 ? ‘bgc-red‘:‘‘}}" ng-click="setCurrent(1)">按钮1</button> <button class="{{currentBtn == 2 ? ‘bgc-red‘:‘‘}}" ng-click="setCurrent(2)">按钮2</butt...
angular和vue双向数据绑定【代码】【图】
angular和vue双向数据绑定的原理(重点是vue的双向绑定)我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值.访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用gette...
Angular之指令【代码】
指令之--自定义HTML元素和属性 angularjs支持我们拓展自定义的HTML元素。比如，我们想自定义一个自己的元素：<my-dom></my-dom>如下：var app=angular.module("myApp",[]);app.controller(‘mycontroler‘,function($scope){});app.directive("myDom",function(){return {restrict:‘E‘,template:‘<a href="www.baidu.com"> click to baidu</a>‘}})<!doctype html><html><head><script src="http://code.angularjs.org/angul...
AngularJs的UI组件ui-Bootstrap分享（二）——Collapse【代码】【图】
Collapse折叠控件使用uib-collapse指令 1<!DOCTYPE html> 2<html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml"> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5<link href="/Content/bootstrap.css" rel="stylesheet"/> 6<title></title> 7 8<script src="/Scripts/angular.js"></script> 9<script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>10<script>1112 ...
angularjs指令中的compile详解
篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别.angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者.网上已经有很多介绍怎么使用指令的文章以及相关书...
Angular2基础02：模板引用变量的使用【图】
模板引用变量需求：1、当用户在组件AppComponent(举例)的input 框输入时要求在页面上同步显示用户输入值。2、将用户输入的值传递到事件中，被获取进行一系列操作。 第一种方法：DOM 事件携带DOM 事件携带可能对组件有用的信息，所有标准 DOM 事件对象都有一个target属性， 引用触发该事件的元素在事件中传递$event事件对象，然后通过 $event.target.value可以获取该值。类型化事件对象揭露了重要的一点，即反对把整个 DOM 事件传到...
Angular学习（三）【图】
Angular服务1.创建服务：ng g service services/storage2.注入服务在根目录的app.module.ts里引入服务。并且在providers:[]里写入服务模块在要用这个服务的ts文件里引入服务在constructor构造函数里实例化服务使用this.storage访问服务Http请求3.注册Http Jsonp 服务在根目录的app.module.ts里注入模块：HttpModule JsonpModule在imports 里写入模块3.1在其他模块里使用http 和 jsonp 模块要在模块的顶部import http jsonp 模...
为sublime安装AngularJS插件【图】
sublime能够支持AngularJS开发那绝对是一件很爽的事情。下面我一步步讲解如何为sublime安装AngularJS插件。1、添加控制包站点根据你安装sublime 版本不同，在控制台写入不同的代码 ：控制台打开方法：View > Show Console 或者 快捷键 ctrl+` Sublime Text 3：import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = s...
Angular ngx-echarts图表【代码】【图】
1. 安装echarts包、ngx-echarts包 npm install echarts --save npm install ngx-echarts --save 2. angular.json中引入echarts.js文件 "scripts": [ "node_modules/echarts/dist/echarts.js" ] 3. 根模块中导入NgxEchartsModule模块 import {NgxEchartsModule} from ‘ngx-echarts‘;imports: [ NgxEchartsModule ] 4. 组件中使用echarts图表(1). HTML - test.component.html <div echarts [options]="chartOption" ></div> (2)....
angular的ng-repeat使用【代码】
ng-repeat是angular的一个指令，用来循环生成某些东西。常用的是拿到数据循环生成样式展示在视图中。<!--orderStatuses表示$scope传递的数据$scope.orderStatuses=data；data是json对象格式--><select name="aaa" id="aaa" ng-model="$scope绑定的变量"></select><option ng-repeat="status in orderStatuses" value="{{status.key}}">{{status.value}}</option><!--有三种ng-repeat方式，根据数据格式来使用哪种方式--><tr ng-rep...
angularJS——自定义服务provider之$get
可以认为provider有三个部分： 第一部分是私有变量和私有函数，这些变量和函数会在以后被修改。 第二部分是在app.config函数里可以访问的变量和函数，所以，他们可以在其他地方使用之前被修改。注意，这些变量和函数一定要添加到this上面才行。 第三部分是在控制器里可以访问的变量和函数，通过$get函数返回。 当使用 provider创建服务的时候，唯一可以让控制器访问的属性和方法是在$get()函数里返回的属性和方法。【参考...
angular 更新表单值的两种方法： setvalue,patchvalue【代码】
使用 patchValue() 方法会比使用 setValue() 方法更好！ 1、patchValue()// angular2/packages/forms/src/model.tsexport class FormGroup extends AbstractControl {...patchValue(value: {[key: string]: any},{onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {Object.keys(value).forEach(name => {if (this.controls[name]) {this.controls[name].patchValue(value[name], {onlySelf: true, em...
Angularjs的一些建议用法【代码】
参考：http://jishu.zol.com.cn/201057.html1）避免UI闪烁 Angular的自动数据绑定功能是亮点，然而，他的另一面是：在Angular初始化之前，页面中可能会给用户呈现出没有解析的表达式。当DOM准备就绪，Angular计算并替换相应的值。这样就会导致出现一个丑陋的闪烁效果。<p>{{ phone.snippet }}</p>改为<p ng-bind="phone.snippet"></p>2）依赖注入module.service(‘myservice‘, function($http, $q) { // This breaks when minifi...
[Angular 2] Dispatching Action with Payloads and type to Reducers【代码】
While action types allow you tell your reducer what action it should take, the payload is the data that your reducer will use to update the state. // reducer.ts export const SECOND = "SECOND"; export const HOUR = "HOUR";export const clock = (state = new Date(), {type, payload})=> {const date = new Date(state.getTime());switch(type){case SECOND:date.setSeconds(date.getSeconds() + payload);return d...
Angular 绑定【代码】【图】
一、事件绑定1. 创建doOnClick函数 2. 网页中绑定doOnClick方法 3. 效果图 二、 属性绑定1. 定义imgUrl的网址 2. 定义img src属性 另外一种写法 3. html 属性绑定在网页中绑定size 4. css html 属性绑定html绑定 5. css增加属性原先已经有a 和b属性，之后增加c属性 6. ngClass管理多个csshtml code<div [ngClass]="divClass">HI</div> 7. 样式属性 带有单位（px）的样式<div [style.font-size.px]="isDev?‘100‘:‘50‘">是否是...
angular安装与脚手架安装【代码】【图】
笔者写于2021年7月13日，如果读者看到时觉得间隔太久，建议以官方文档为准angular(简称ng)是js的三大框架之一，窃以为揉合了react与vue的思想(认知所限，目前暂以为)。由于项目需要，便提前学习一些作为知识储备。项目需求：使用antd-ng作为ui框架，使用ng作为技术框架一：安装读者请务必保证本机有node且应为较新环境npm install -g @angular/cli命令行下使用ng --version检查是否安装成功命令行中出现以上字样即说明ng在本地安装...
angular2-aot-webpack 生产环境下编译angular2【代码】
这里讲讲，angular2在生产模式下用webpack2进行打包的方法： //使用rollup打包还是比较坑的，功能及插件上都不如webpack, 关键不支持代码分离，导致angular里的lazy loader将无法使用。 具体步骤： angular=>aot=>webpack(Tree shaking&& Uglify) angular=>aot: 首先你需要的依赖："@angular/compiler" "@angular/compiler-cli" "@angular/platform-browser"。npm install 安装他们。以下是目录结构：.....
AngularJs scope详解【代码】
一.scope是什么？ scope是表达式(expression)的执行上下文，scope可以监测($watch)表达式(expression)的变化和传播事件($emit,$broadcast).二.scope特性 1.scope提供$watch API,用于监测model的变化 2.scope提供$apply API,将angular环境外的dom操作应用到angular环境上 3.scope通过原型，从parent scope继承属性。child scope可以直接访问parent scope上的属性，parent scope没法直接访问child scope上的属性三...
angularjs 阻止浏览器自带的回退【代码】
$scope.$on(‘$locationChangeStart‘, function(e) { if(!tfOrder && comm.getStorage(‘orederlistLen‘)>0){if(confirm("退出将清空投注")){ //浏览器自带返回按钮点击时，清空投注 //code}else{e.preventDefault(); //阻止后退}}}); http://www.cnblogs.com/gaoruixin/p/6070502.html原文：http://www.cnblogs.com/web-fusheng/p/7652759.html
angular.element相关知识
angular.element相关方法：addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() ' ref='nofollow'> attr()- 获取匹配的元素集合中的第一个元素的属性的值 bind()' ref='nofollow'> bind() - 为一个元素绑定一个事件处理程序 children()' ref='nofollow'> children() - 获得匹配元素集合中每个元素的...
angularjs小应用
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title></head><body ng-app="myNoteApp" ng-controller="myNoteCtrl"><h2>我的笔记</h2><textarea ng-model="message" cols="40" rows="10"></textarea><p><button ng-click="save()">保存</button><button ng-click="clear()">清除</button></p><p>Number of characters left:<span ng-bind="left()"></span></...
zoj 2778 - Triangular N-Queens Problem
题目：在三角形的棋盘上放n皇后问题。分析：找规律题目。依照题目的输出，能够看出构造法则； 先填奇数，后填偶数。以下我们仅仅要证明这样的构造的存在性就可以。 解法：先给出集体构造方法，从（1。n-f（n）+1） 開始填充奇数点； 填充全部的（1+2k。n-f（n）+1+k）{当中f（n）就是最大填充数。1+2k<=n-f（n）+1+k} 。 之后開始从（2。n-f（n）+1+k+1）開始填充...
（笔记）angular 包含关系的controller参数传递【图】
原文：http://www.cnblogs.com/91allan/p/4988711.html
angularjs2 学习笔记（六） Form【代码】
Angular 2 Form表单在angular2 form表单中我们需要了解表单数据绑定、数据验证、数据提交等内容，在下面的示例中并没有实际提交到后台，这部分内容在今后webapi中加以练习。表单建立<form (ngSubmit)="onSubmit(planetForm.value)" #planetform="ngForm"></form>这里是一个空的表单ngSubmit是一个事件，用于提交数据，数据则是整个form表单的内容，通常情况下我们的表单会绑定到我们的一个model中，那么提交的数据最后也是以json格...
Angular 全局页面切换动画 me-pageloading
最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情点击此处. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做成一个angular module, 方便以后添加类似效果时, 直接使用.Github: https://github.com/jeremial/me-pageloading做好的demo效果配合 angular-ui-router使用, 效果http://isay.me/me-pageloading/angular-ui-router.html配合 angular-route使用, 效果ht...
angular ng-options的使用【代码】【图】
angular中的ng-options的的使用跟ng-repeat有些类似 实例代码 可复制到本地运行<!DOCTYPE html> <html lang="en" ng-app="App"> <head><meta charset="UTF-8"><title>angular_select使用</title><script src="http://zhouwei007.web3v.com/js/angular.js"></script> </head> <body ng-controller="myCrtl"><div>基本下拉框</div><select ng-model="seleted" ng-options="a.name for a in animals"><option value="">请选择你的萌宠...
记angular和asp.net使用grpc进行通信【代码】【图】
AspNetCore配置grpc服务端新建一个Demo项目: GrpcStartup, 目录结构如下图:GrpcStartup.GrpcServices需要安装下面的依赖<PackageReference Include="Google.Protobuf" Version="3.14.0" /> <PackageReference Include="Grpc.AspNetCore" Version="2.34.0" /> <PackageReference Include="Grpc.AspNetCore.Web" Version="2.34.0" /> <PackageReference Include="Grpc.Net.Client" Version="2.34.0" /> <PackageReference Include="G...
socket.io+angular.js+express.js做个聊天应用(三)
接着前面博客文章socket.io+angular.js+express.js做个聊天应用（二）首先开发之前先介绍下bower，它是用来管理前端类库的（具体介绍,安装可看http://blog.csdn.net/edagarli/article/details/26359535）justhacker@justhacker-ThinkPad-Edge-E440:~/projects/nodejs/chattingnode$ bowerUsage:bower <command> [<args>] [<options>]Commands:cache Manage bower cachehelp Display help inf...
[Angular] New async 'as' syntax and ngIf.. else【代码】
From Anuglar v4 above, we are able to using ‘as‘ with async pipe. This allow as using ‘new variable‘ instead of subscribe to observable.We also able to use ‘else‘ with ‘*ngIf‘, else taks a ‘template‘ which will be displayed when the if expression is not matched.<ng-template #loading><div class="message"><img src="/img/loading.svg" alt="loading...">Fetching meals...</div></ng-template><di...
Angular绑定数据时转义html标签【代码】
AngularJs在绑定数据时默认会以文本的形式出现在页面上，比如我现在有这样一段代码<div ng-controller="testCtrl">{{data}}</div>function testCtrl($scope) {$scope.data = ‘<span class="red">标红</span>‘; } 那么在页面上必然会在也面上直接显示 <span class="red">标红</span>要想让包含html标签的字符串，能在页面上正常显示，就必须将其转义，此时就要用到angularjs的ng-bind-html，它可以将包含html标签的字符串进...