ANGULAR - 技术教程文章
AngularJS 简介【代码】
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> AngularJS 通过 ng-directives 扩展了 HTML。<!DOCTYPE html><html><body><div ng-app=""><p>在输入框中尝试输入:</p><p>姓名: <input type="text" ng-model="name"></p><p ng-bind="name"></p></div><script src="http://apps.bdimg.com/libs/angular.js/1.3.9...
学习-angular 7入门【代码】
1、安装脚手架：npm install -g @angular/cli安装之后，输入命令 ng v： Package Version ------------------------------------------------------ @angular-devkit/architect 0.13.3 @angular-devkit/core 7.3.3 @angular-devkit/schematics 7.3.3 @schematics/angular 7.3.3 @schematics/update 0.13.3 rxjs 6.3.3 typescript ...
ionic2+angularjs2【代码】【图】
感觉TypeScript真不错，强类型，有点类似c#的感觉，而且如果写错了编辑器都可以感知出来，于是就开始看ionic2。ionic2是基于angular2的，语法跟以前有了很大的变化。但自己写原生app写惯了，反而觉得这种方式更方便一些。每个页面都是一个组件，组件里也可以套组件，html标签都可以自定义，也就可以无限扩展。虽然ionic2和angular2都还没发布正式版，但手头的这个小东西用一下也未尝不可，就开始动工了。先列一下学习资源：TypeScr...
angularjs指令系统系列课程（2）：priority,template,templateUrl【代码】
今天我们先对 priority，template，templateUrl进行学习1.priority 可取值：int 作用：优先级 一般priority默认为0，数值越大，优先级越高。当一个dom元素上有多个指令，在执行compile函数的时候，指令的执行顺序为：高优先级，先链接排序的先执行如果想让一个指令最后一个执行： terminal 这个参数设置为true，即可使该指令在同一个Dom元素上的指令列表里最后一个执行 2.template可取值：string或function作用：指令操作元素的...
Angular建立待办事项应用【代码】【图】
建立路由接前一小节，在src/app/app.component.html把login组件去掉第一步：在src/index.html指定基准路径浏览器会根据这个路径下载css，图像，js文件，所以语句要放在header的最顶端<base href="/"> 第二步：在src/app/app.module.ts引入RouterModuleimport { RouterModule } from "@angular/router";第三步：定义和配置路由数组forRoot是一个静态工厂方法路由插座路由插座加载LoginComponent在app.component.html添加一个路由插座...
夺命雷公狗—angularjs—22—bind改指向和传参方式【代码】【图】
在angularjs中的传参的jquery的方式是极度相似的噢，而且还可以通过bind来改变指向 <!DOCTYPE html><html lang="en" ng-app="myapp"><head><meta charset="UTF-8"><title>Title</title><script src="js/angular.min.js"></script></head><body></body><script>function show(a1,a2){console.log(a1);console.log(a2);alert(this);}angular.bind(document,show)(10,20); </script></html> 原文：http://www.cnblogs.com/leigood/p...
json与str之间的转换在原生，jquery和angular中的应用【代码】
一.原生js1.parse 用于从一个字符串中解析出json 对象。例如var str=‘{"name":"cpf","age":"23"}‘经 JSON.parse(str) 得到：Object: age:"23" name:"cpf" _proto_:Objectps:单引号写在{}外，每个属性都必须双引号，否则会抛出异常2.stringify用于从一个对象解析出字符串，例如var a={a:1,b:2}经 JSON.stringify(a)得到：“{“a”:1,"b":2}”3.eval()可以解释所有格式的字符串，安全系数较低； 二，jqueryj...
AngularJS小练习【图】
首先可能需要安装npm,并且配置环境.1.打开Dos(命令提示符).按Windows徽标键+R组合键,输入cmd然后按回车键进入Dos.2.安装Yeoman.在Dos下输入npm install -g yo.3.安装Grunt.在Dos下输入npm install -g grunt-cli.4.安装Bower.在Dos下输入npm install -g bower.5.安装Generator-angular的0.9.8版本.在Dos下输入npm install -g generator-angular@0.9.86.安装Generator-karma.在Dos下输入npm install -g generator-karma.7.安装Angula...
angularjs ng-if 中的ng-model 值作用域问题【代码】
现象：最近做了一个需求，页面上使用了ng-if 条件做判断，导致通过使用 $scope 获取不到 ng-model 的值。问题原因：ng-if这个指令单独开了一个作用域，它只可以继承，不可以进行往外传值。 解决办法：这个问题就是一个作用域的问题。使用 ng-if ,需要在传值的地方给加上$parent。这样才能使用 $scope 获取到 ng-model 的值。例如写成这样：<input ng-if="xx条件" ng-model="$parent.test" /> 或者 使用 ng-show 代替 ng-if原文：...
精析AngularJS（一）【图】
AngularJS简介 四个核心思想：依赖注入、模块化、双向绑定、语义化标签。AngularJS 前端 MVC 的设计与搭建MVC（Model View Controller)模型(model)－视图(view)－控制器(controller)。用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构...
原创-angularjs2不同组件间的通信【代码】
AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值，而且组件之间必须父子关系，下面给大家提供一个简单的方法，实现组件间的传值，不仅仅是父子组件，跨模块的组件也可以实现传值/***1.定义一个服务，作为传递参数的媒介*/ @Injectable() export class PrepService{//定义一个属性，作为组件之间的传递参数，也可以是一个对象或方法 profileInfo: any;} /***2.传递参数的组件，我这边简单演示，直接就在构造器里面实...
Angular.js常用控件及指令
https://www.cnblogs.com/xuepei/p/6022883.html非本人自创 图片视频类angular-maxonry 图片墙效果插件，可以将图片组织成类似于瀑布流的效果，依赖于jQuery、imageloaded和Masonryangular-deckgrid 另一个照片瀑布流解决方案ngImgCrop 图片剪裁工具ngVideo 播放器，直接播放指定地址的mp4，控制按钮美观度远甩朝内99.99%的视频站输入控件类ngDraggable 控制元素拖动的控件，Demoangular-umeditor 百度umeditor的AngularJS扩展，um...
HTML angular定时改变文本内容
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular.js" ></script> <script> var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope,$timeout){ $scope.name = "张三"; $timeout(function(){ $scope.name = "李四"; ...
AngularJS 相关
关于Angular： AngularJS诞生于2009年， 由Misko Hevery 等人创建， 后为Google所收购。 是一款优秀的前端JS框架， 已经被用于Google的多款产品当中。AngularJS 的核心是： MV*、 模块化、 指令系统、双向数据绑定、依赖注入,扩展了HTML的语法。MVC,short for Model-View-Controller. Model is the data and the database. View is the user interface and what the user sees. Controller is the main ...
豆瓣API接口开发，结合angularJS来做，感觉爽歪歪！【代码】【图】
第一次做还是先说下API 是什么鬼？API ： application program interface 应用程序编程接口：有那些常见的API：webAPI : 通过WEB方式提供结构叫 WEBAOPI ;API ： 所有有输入有输出的东西都可以称之为API --- 都是函数；例如：Math.random() --- api 例如：豆瓣API 开发平台：https://developers.douban.com/wiki/?title=guide 豆瓣API V2 (测试版)：https://developers.douban.com/wiki/?title=api_v2会看到： 这些都是豆瓣提供的...
AngularJS双向数据绑定【代码】【图】
一、概念AngularJS中，只关心数据，数据的变化会自动引起视图的变化。并且视图是局部刷新的，不是整个页面刷新的，AngularJS会自动识别哪里用到了这个更新的数据，即脏数据检查。我们可以把控制器中的数据表现在视图上，也可以更新视图来改变控制器中的数据。最简单的更新视图的方法就是表单元素，AngularJS中提出了two-way databinding双向数据绑定的技术，让视图和控制器中的数据实时双向绑定。<!DOCTYPE html> <html lang="en" ...
angular form-data文件上传【代码】
前言：很久没更新博客，最近公司pc端技术选型用angular,这几天就赶鸭子上架，硬着头皮直接上手angular。其中有许多小坑陆陆续续踩起走。今天就遇到一个比较常见的问题：图片上传。主题：图片上传服务器，然后通过服务器传阿里云。下面直接贴前端代码： $http({ method: ‘POST‘, url: ‘/wechatapp/User/setAvatar‘,data: data,headers: {‘Content-Type‘: undefined},transformRequest: function(data) {var formData = ...
Angularjs - directive【代码】【图】
1. What are Directives Directives are one of the most powerful features of AngularJS. You can imagine them as building blocks ( aka re-usable components ) of any AngularJS application. Mastering all the directives, is totally out of this article’s scope. For that, I would really recommend this book; it covers everything you need to know about directives. Here, we’ll discuss one aspect of dire...
Angular指令【代码】
一、指令基础指令1、ng-disabled使用ng-disabled可以把disabled属性绑定到以下表单输入字段上： <input> （ text、 checkbox、 radio、 number、 url , email 、 submit）； <textarea> ； <select> ； <button> 。案例1：<input type="text" ng-disabled="true" placeholder="TypetoEnable">在下面的例子，文本字段会被禁用五秒，直到在$timeout中将isDisabled属性设置为true：<textarea ng-disabled="isDisabled">Wait5seconds</...
angularjs中的路由介绍详解 ui-route(转)【代码】
http://www.cnblogs.com/littlemonk/p/5500801.html这篇文章主要介绍了Angularjs中UI Router全攻略，涉及到angularjs ui router的基本用法，需要的朋友参考下吧首先给大家介绍angular-ui-router的基本用法。如何引用依赖angular-ui-routerangular.module(‘app‘,["ui.router"]) .config(function($stateProvider){ $stateProvider.state(stateName, stateCofig); }) $stateProvider.state(stateName, stateConfig)stateName是stri...
[AngularJS] Html ngSanitize, $sce【代码】
Safely render arbitrary HTML snippets by using ngSanitize and $sce. By default angularJS consider user‘s input html is danger, so if you want to display html tag on the page will show unsafe error.To remove this error and trust user‘s input, we can install ngSanitize:bower install angular-sanitize var egghead = angular.module("egghead", ["ngSanitize"]);egghead.controller("AppCtrl", function () {...
AngularJS 的那些内置九种过滤器
ng内置了九种过滤1. currency (货币处理) 使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如我传入人民币：{{num | currency : ‘￥‘}} 2. date (日期格式化) 原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般的格式化要求。用法如下：{{date | date : ‘yyyy-MM-dd hh:mm:ss EEEE‘}} 参数用来指定所要的格式，y M d h m s E 分别表示 年 月 日 时 分 秒 星...
AngularJS HTML DOM【代码】【图】
1. AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。2. ng-disable指令：直接绑定应用程序数据到 HTML 的 disabled 属性。<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/angular-1.3.15.min.js"></script></head><body><div ng-app="" ng-init="mySwitch=false"><!--当mySwitch的值是false的时候，button不能使用,选择checkbox后就可以使用按钮了--...
Angularjs[补21] - 显示注入，隐示注入【代码】【图】
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div ng-app="myApp"><div ng-controller="secondController"></div><div ng-controller="otherController"></div></div><script type="text/javascript" src="../../vendor/angular/angularjs.js"></script><script type="text/javascript" src="app/index.js"></script></body></html>var myApp = angular.module(‘myApp‘,[],functio...
angular1.x 脏检测【代码】【图】
写在前面 双向绑定是angular的大亮点，然后支撑它的就是脏检测。一直对脏检测都有一些理解，却没有比较系统的概念。 以下是我阅读网上博文以及angular高级程序设计的理解与总结。 接收指导与批评。脏检查： 将原对象赋值一份快照。在某个时间，遍历比较这个对象和快照（新旧值），如果不一样就执行执行某些操作。angular中的脏检查： 1.不会检查所有的对象。当对象被绑定到html会检查，手动$scope.$watch()的会检查...
详解Jquery和AngularJs，Servlet中jsonp解决跨域问题(转)【代码】【图】
众所周知，jsonp可以解决跨域问题，下面是我在查阅资料和实际项目使用后的一些总结。Jquery中jsonp的使用//myUrl = "http://localhost:8090/api/test";$.ajax({type:"GET",url:myUrl,dataType:"jsonp",jsonp:"callback",jsonpCallback:"jsonpCallback",success:function(data){alert(data.msg);} }); function jsonpCallback(data){alert(data); }jsonp只能使用get请求，解决同源问题，返回javascript代码，因为请求javascript文件...
行如风 Angular 初识5【代码】
今天说一下关于AngularJs的闪屏问题和使用对象扩充和数据遍历，直接上代码：（一）、闪屏问题 首先要知道是什么原因会造成闪屏问题，大家都知道数据绑定会有2种写法（此处的2种不包括表单的数据绑定），即ng-bind和{{xxx}}的写法， 比如以下代码<div>{{name}}</div>和<div ng-bind=”name”></div>这两种都可以绑定数据，但是{{name}}在页面刷新时Web渲染的时候还会显示{{name}},然后当Angularjs的内容被读完之后，Angular...
Angularjs中比较使用的DateFormat库【代码】
angular.module(‘newApp‘).factory(‘dateUtil‘, function() {var symbolMap = {‘MM‘: function(date) {if (typeof(date) === ‘string‘) {var d = new Date(date);return d.getMonth();}return date.getMonth() + 1;},‘mm‘: function(date) {if (typeof(date) === ‘string‘) {var d = new Date(date);return d.getMinutes();}return date.getMinutes();},‘YY‘: function(date) {if (typeof(date) === ‘string‘) {va...
AngularJS源码解析3：RootScope的创建过程【代码】
RootScopeProvider简介RootScopeProvider是angularjs里面比较活跃的一个provider。它主要用来生成实例rootScope，它代表angularjs应用的根作用域。我们可以把它看成MVVM模式中的VM。源代码如下：function $RootScopeProvider(){var TTL = 10;var $rootScopeMinErr = minErr(‘$rootScope‘);var lastDirtyWatch = null;this.digestTtl = function(value) {if (arguments.length) {TTL = value;}return TTL;};this.$get = [‘$injec...
Angular 从入坑到挖坑 - HTTP 请求概览【代码】【图】
一、Overviewangular 入坑记录的笔记第四篇，介绍在 angular 中如何通过 HttpClient 类发起 http 请求，从而完成与后端的数据交互。对应官方文档地址：Angular HttpClient配套代码地址：angular-practice/src/http-guide二、ContentsAngular 从入坑到弃坑 - Angular 使用入门Angular 从入坑到挖坑 - 组件食用指南Angular 从入坑到挖坑 - 表单控件概览Angular 从入坑到挖坑 - HTTP 请求概览三、Knowledge Graph四、Step by Step4.1、...