ANGULAR - 技术教程文章
angular调用WCF服务，读取文件夹下图片显示列表，下载另存为图片【代码】【图】
读取文件夹下的文件publicstring ReadImagesPaths() {string result = string.Empty;try {string path = System.IO.Directory.GetCurrentDirectory();DirectoryInfo files = new DirectoryInfo(path+@"\Images");FileInfo[] fileinfo = files.GetFiles();foreach (FileInfo file in fileinfo){//result += files +@"\"+ file.Name + ";";result += file.Name + ";";}}catch(Exception ex){_log.Error(ex);}return result;}根据文件...
angularjs 缓存 $q【代码】
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #parent div{ width:300px; height:500px; border:1px #000 solid; margin:20px;} #parent ul{ width:200px; position:fixed; top:0; right:0;} </style> <script src="angular.min.js"></script> <script>var m1 = angular.module(‘myApp‘,[]); m1.controller(‘Aaa‘,[...
Angular.js学习笔记【代码】
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<title>AngularJS</title> 5<!--学习地址--> 6<!--http://www.yiibai.com/angularjs/angularjs_includes.html--> 7<!--http://docs.angularjs.cn/api/ng/filter/filter--> 8<!--http://docs.angularjs.cn/api/ng--> 9<!--推荐使用工具 vs2015 或 WebStorm--> 10<!--加载框架--> 11<script src="/Scripts/tool/angularjs/Angular.js"></script> 12<script> 13// 注册控制器 14...
【AngularJS学习笔记】01 指令、服务和过滤器【代码】
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。比如：ng-app 指令初始化一个 AngularJS 应用程序。注意ng-app一般为空，如果值不为空，就得加这样一句代码var app = angular.module(‘名字‘, []);ng-init 指令初始化应用程序数据。这个在之前已经说过了，下面讲一下之前没讲到的。ng-repeat指令与ng-options指令<!--一般ng-repeat通常用于ul与li这种列表和表格--><div ng-app="" ng-init="names=[ {name:‘Jani‘,country:‘N...
angular2与VS2015 asp.net core集成使用【代码】【图】
首先，需要在VS2015环境下更新到update2，并安装asp.net core环境，并安装Node.js插件。新建asp.net core项目：此时，需要先新建npm配置文件,如图：并定义node.js需要加载的文件： 1{2"name": "angular2-quickstart",3"version": "1.0.0",4"scripts": {5"tsc": "tsc",6"tsc:w": "tsc -w",7"lite": "lite-server",8"start": "concurrent \"npm run tsc:w\" \"npm run lite\" " 9 }, 10"license": "ISC", 11"dependencies": { 12"an...
angular自定义指令在指令里面调用父作用域里面的方法传参【图】
使用自定义指令的时候在指令里面调用父作用域里面的方法，在指令里面 在父作用域里面的模板里面使用指令 在控制器里面 原文：http://www.cnblogs.com/fanzhengshao/p/6006220.html
AngularJS中使用$resource
这个服务可以创建一个资源对象，我们可以用它非常方便地同支持RESTful的服务端数据源进行交互，当同支持RESTful的数据模型一起工作时，它就派上用场了。 REST是Representational State Transfer（表征状态转移）的缩写，是服务器用来智能化地提供数据服务的一种方式 1）我们首先需要引入ng-Resource 模块，在angular之后 <script src="js/vendor/angular.js"></script> <script src="js/vendor/angular-resource.j...
Angular——依赖注入【代码】
基本介绍1、AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用，这导致了使用者和被使用者之间存在依赖关系。2、所谓依赖注入是指在运行时自动查找依赖关系，然后将查找到依赖传递给使用者的一种机制。3、常见的AngularJS内置服务有$http、$location、$timeout、$rootScope等基本使用1、推断式注入没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称。这种方式会带来一个问题...
angular环境搭建【图】
一、环境搭建1、安装nodeJS （安装完成之后 npm -v 查看版本）2、安装angular的命令行工具 sudo npm install -g @angular/cli3、安装webstorm4、使用 ng -v 查看angular命令行的安装结果5、创建项目 ng new auction (auction为项目的名称)6、在项目中引入bootstrap和jQuery npm install bootstrap --save npm install jquery --save7、在.angular-cli.json文件，把bootstrap和jQuery添加进去: 因为angular用的是微软开发的...
AngularJs学习总结－了解基本特性（－）【代码】【图】
现在的前端项目中基本上都会用到angularjs框架，之前并不了解这个框架，也是因为最近接手的项目，所以打算好好的学习下它。之前都是搞pc端，现在接手的是移动端的项目，移动端UI框架用的是ionic＋vordova，没有用bootstrap，主要做的是ios+安卓的app界面，ionic这个框架也不太了解，也需要花时间好好熟悉下。angularjs学习小白一枚，欢迎大神指正。 AngularJs是什么？ 简单来说，即javascript的一个框架，通过script标签添加到...
Angular 从入坑到挖坑 - Router 路由使用入门指北【代码】【图】
一、OverviewAngular 入坑记录的笔记第五篇，因为一直在加班的缘故拖了有一个多月，主要是介绍在 Angular 中如何配置路由，完成重定向以及参数传递。至于路由守卫、路由懒加载等“高级”特性，并不会在本篇文章中呈现对应官方文档地址：路由与导航配套代码地址：angular-practice/src/router-tutorial二、ContentsAngular 从入坑到弃坑 - Angular 使用入门Angular 从入坑到挖坑 - 组件食用指南Angular 从入坑到挖坑 - 表单控件概览...
windows mean(mongodb+express+angularjs+nodejs) 一键安装脚本【图】
最近在和几个同事研究mean（mongodb+express+angularjs+nodejs），这个框架看了个皮毛，但是安装部分基本上已经掌握了，目前还没有找到好的一键部署方案，所以我给同事们做了一个基础部署的脚本，本来想的很好，但是一次次的测试也比较浪费时间，基本功能完成之后，就没有再进一步的优化，先放出来大家看看吧，用某前辈的话说：这个东西不算脚本，只能算“顺溜”，一步步完成安装和配置。系统环境：650) this.width=650;" src="/up...
AngularJS orderBy 使用要点【代码】
AngularJS orderBy 使用要点总结： 1，书写格式基本应用格式为：ng-repeat="item in itemList | orderBy:p1:p2"参数p1可以是字段名或自定义函数，p2指是否逆序，默认是false举例：假设$scope中有var itemList=[{id:201,name:‘abc‘,amount:100},{id:100,name:‘zdb‘,amount:100},{id:10,name:‘xxx‘,amount:200},{id:80,name:‘231‘,amount:1020},{id:50,name:‘ppp‘,amount:20},{id:1,name:‘hhh‘,amount:1100}];按照id，...
两强相争，鹿死谁手 — JQuery中的Ajax与AngularJS中的$http【代码】【图】
一、JQuery与AngularJS首先，先简单的比较一下JQuery与AngularJS。二、Ajax请求与数据遍历打印这里是Ajax和$http请求的JSON文件概览，默认的路径我们就放在与两者同级的文件夹里。[{"name": "一号","age": 17,"hobby": ["吃","喝"],"score":{"math":78,"chinese":89}},{"name": "二号","age": 17,"hobby": ["喝","玩"],"score":{"math":78,"chinese":89}},{"name": "三号","age": 17,"hobby": ["玩","乐"],"score":{"math":78,"chi...
AngularJS之基础-4 DI(控制器参数、监听)、指令(模板包含、节点控制)、事件绑定【图】
一、DI-控制器参数$scope - 在js和html之间传递数据 - 仅在控制器作用域内有效$element - 是一个jQuery对象 - 作用域控制器所在的html元素 - 在js中，通过$element获取DOM对象 - var e = $element.children().eq(0); - $scope.w = e.width(); - $scope.h = e.height();$http - http协议请求 - $http.get(url).success(function(result){});二、DI-监听$watch - 监听变化 - 语法 - $scope.$watch(...
angular（3）服务 --注入---自定义模块--单页面应用【代码】
ng内部，一旦发生值改变操作，如$scope.m=x,就会自动轮询$digest队列，触发指定的$watch，调用其回调函数，然后修改dom树。干货：https://github.com/xufei/blog/issues/101.ng提供了许多内置的服务，例如常用的$scope\$http\$window\$location等。http：POST请求： var app = angular.module(‘myApp‘, [‘ng‘]);app.run(function($http){ //post 请求设置请求头$http.defaults.headers.post = {‘Content-Type‘:‘...
angular.forEach【代码】
angular有自己的生命周期。循环给一个 angular监听的变量复值时。最好还是用angular自带的循环方法。“angular.foreach”格式:复制代码 代码如下:var objs =[{a:1},{a:2}]; angular.forEach(objs, function(data,index,array){ //data等价于array[index] console.log(data.a+‘=‘+array[index].a); });参数如下：objs：需要遍历的集合data:遍历时当前的数据index:遍历时当前索引array:需要遍历的集合，每次遍历时都会把objs原样的...
关于Angular 指令的理解
之前虽然一直都在用这套框架，但是对于指令还是知之甚少，感觉是蛮复杂的东西。看了之后也没有真正理解。 最近在做一个Angular的小项目，卡在了Angular的生命周期和自定义指令上。纠结了好几天，终于今天在地铁上灵光一闪想通了。所以赶紧把它记下来，免得后面忘记了。 我们一直都说angular的加载流程是先载入HTML片段，其中在加载<script>标签的时候加载了所有的JS库，包括我们自己写的所有的controller/service/filter以及官方...
angularjs学习使用分享【图】
angularjs是一个为动态web应用设计的结构框架，它是为了克服html在构建应用上的不足而设计的。工作原理：1 加载html，然后解析成DOM；2 加载angular.js脚本；3 AngularJS等待DOMContentLoaded事件的触发；4 AngularJS寻找ng-app指令，根据这个指令确定应用程序的边界；5 使用ng-app中指定的模块配置$injector；6 使用$injector创建$compile服务和$rootScope；7 使用$compile服务编译DOM并把它链接到$rootScope上；8 ng-init指令对s...
angularjs 学习笔记(一) -----JSONP跨站访问
1、 下载angular-seed-master-master包，解压缩后将新版本的angularJS文件放入其中。 2、 制作frontmockup文件夹（前端调用），同时制作backmockup文件夹（后端调用），使用IIS开启2个webserver（此步骤可以用其他方式替代）。 3、 backmockup站点添加以下HTTP头Access-Control-Allow-Credentials：trueAccess-Control-Allow-Headers：origin,x-requested-with,content-typeAccess-Control-Allow-Methods： POST,GET,OPTIONSAcc...
angular5中使用jsonp请求页面【代码】【图】
说多了，都是眼泪，折腾了很久，各种百度，查到的例子，全都报错，可能是因为我的angular的版本太高，向下都不兼容？我的angular版本为最新的5.2.11：下面是正确的jsonp请求的方法1、启用http及jsonp服务app.module.ts引入服务import { HttpClientModule,HttpClientJsonpModule } from ‘@angular/common/http‘;并加入到@NgModule.imports 数组 2、jsonp页面请求在页面中引入httpimport { HttpClient } from ‘@angular/common...
JavaScript及AngularJS 1.x版本学习笔记【代码】
本人学习JS和AngularJS时做的笔记。JavaScript：基础知识：定义变量：var（全局或函数作用域）；let、const（块作用域、不提升变量）；Tips：直接使用x=1会将x转换为全局变量，严格模式（“use strict”）报错；数据类型：Boolean、Number、String、Object、Null、Undefined；布尔值：false、null、undefined、0、NaN、””（空字符串）等价false，其余为true；比较：===（类型相同，值相同），==（会进行类型转换），对象比较引用...
angular $digest 运行10次货10次以上会抛出异常【图】
今天在做项目时，遇到一个问题，红圈处输入其他数字（n多次）也不会报异常，但是有一种特例，即0,1,0,1,0,1这种顺序输入时，输入第13次时，页面计算结果（蓝色圆圈）不会更新，困扰了1天多这个问题，曾尝试着用watch 函数监听红色圆圈处的值，但是后来发现，让angular 强制更新，但是页面却不更新，最后放弃了这种方法。在digest循环中，AngularJS会遍历整个$watch列表，所有watcher都会被触发，当一个wathcer被触发时，AngularJS会...
Angular实战之使用NG-ZORRO创建一个企业级中后台框架（进阶篇）【代码】【图】
前言： 上一篇文章我们讲了如何在创建的Angular项目中快速引入ng-zorro-antd企业中台组件库，并且快速构建后台管理页面框架模板。这一章主要介绍的是如何在创建好的后台管理页面框架的快速生成NG-ZORRO相关的组件，并且介绍Angular相关目录结构、生命周期函数，路由配置和使用相关知识点，以及如何使用Angular CLI使用一行代码快速添加Angular应用的新功能。让你快熟的构建一个属于自己的NG-ZORRO后台管理框架，注意我们的前端代...
--@angularJS--指令与控制器之间的交互demo
1、index.html:<!DOCTYPE HTML><html ng-app="app"><head> <title>custom-directive</title> <meta charset="utf-8"> <link rel="stylesheet" href="../css/bootstrap.css"> <script src="../js/angular.js"></script></head><body><!-- 下面是指令与控制器交互的demo. --><div ng-controller="myCtrl"> <loader>滑动加载</loader></div><script src="./directive-controller.js"></script></body></html>2、di...
Angular常用命令【代码】
创建新项目ng new demo(项目名)安装前端依赖ng install创建新moduleng generate moudle demo(模块名) –-falt或ng g moudle demo(模块名) –-falt–-falt（说明把生成的路由放在当前目录下，而不是单独的目录里）创建新组建ng g c demo(组件名)以此类推ng g service demo(服务名)ng g pipe demo(管道名)ng g class demo(类名) 原文：https://www.cnblogs.com/meng-ma-blogs/p/12506834.html
关于delete的错误: angularjs $http.delete breaks on ie8
$scope.del = function(id){ tips.showConfirm(‘确定要取消该收藏?‘, function(){ $apis.delete(API.COMPONENT+‘/api/component/favourite/‘+id,function(r){ if(r.result=="success"){ tips.showSuccess("成功取消收藏！"); $scope.loadFavours(); }else{ tips.showFailure(r.data.content); } }); }); }; 在IE8下，会显示消息: 缺少标识符，即IE8 complains that "expected identifier" on the...
angular【代码】【图】
一、自定义指令: 1. 先创建模块 var app=angular.module("myApp",[]); 2. 创建自定义指令 (directive后面的参数一:自定义指令的名称,参数二:function 返回值是一个对象 template是模板) app.directive("shen",function(){ return { template:"<h1>这是自定义属性</h1>" } }) 3.划定模块范围,使用自定义指令 <body ng-app="myApp"> <shen></shen>二、模板--引入外部文件上面是模板...
angularjs-ui-router-animation【代码】
html<!DOCTYPE html><html ng-app="APP"><head><title></title><link rel="stylesheet" type="text/css" href="main.css"></head><body ng-controller="MainCtrl"><div><ul><li><a ui-sref="home">home</a></li><li><a ui-sref="contact">contact</a></li><li><a ui-sref="about">about</a></li></ul><div ui-view ng-class="{true:‘slide-left‘,false:‘slide-right‘}[leftorright]"></div><div><script type="text/javascri...
AngularJS执行流程详解【图】
转载自：http://my.oschina.net/brant/blog/419641一、启动阶段 大家应该都知道，当浏览器加载一个HTML页面时，它会将HMTL页面先解析成DOM树，然后逐个加载DOM树中的每一个元素节点。我们可以把AngularJS当做一个类似jQuery的js库，我们通过<script>标签引入到HTML中，那么此时Angular就做为一个普通的DOM节点等待浏览器解析，当浏览器解析到这个节点时，发现它是一个js文件，那么浏览器会停止解析剩余的DOM节点，开始执行这...