angular.js入门
关注
分享
扫一扫
xyphf_和派孔明
全栈工程师，熟悉原生JavaScript、TypeScript、ES6、Webpack、VUE全家桶、JAVA SSM框架、Spring boot 、Spring cloud、MySql、Oracle、Linux等，可独立构建多页面、单页面应用项目。
展开
-
1-1.第一个简单的angular程序
<!DOCTYPE html><html ng-app><!--在html中加ng-app,表示由angularjs接管整个页面 --><head> <meta charset="UTF-8"> <title>第一个简单的angular程序</title> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16原创 2016-06-23 00:28:20 · 399 阅读 · 0 评论 -
angularJS服务的$q
$q的服务，实际上是promise的一种实现方式，有点类似Jquery中的defer()延迟对象; 它实际上是对我们的异步操作进行了一些功能扩展；我们看一下如下demohtml ng-app="myApp">head>meta http-equiv="Content-Type" content="text/html; charset=utf-8">title>无标题文档title原创 2016-12-29 13:56:56 · 690 阅读 · 0 评论 -
AngularJS的供应商--config
我们先说一下AngularJS供应商的作用或概念，那就是完成服务的相关初始配置操作；它的写法应该写到模块的config方法当中； 举几个例子你就明白了$interpolate服务的作用是插值计算，其实就是针对表达式{{}}进行操控;下面我要对表达式的功能进行修改；<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Con原创 2016-12-29 14:41:34 · 2399 阅读 · 0 评论 -
AngularJS的自定义服务,factory、provider、service、constant、value等方法的区别
module - filter() 自定义过滤器 - directive() 自定义指令 - factory() 自定义服务 - provider() 区别 $get下面我们介绍一下factory()的自定义操作html ng-app="myApp">head>meta http-equiv="Content-Type" con原创 2016-12-29 16:19:33 · 2739 阅读 · 1 评论 -
angularJS2.0入门 命令行/npm下载安装
angularJS2.0命令行/npm下载安装地址 angularJS2.0本地开发环境搭建地址 https://angular.cn/docs/ts/latest/guide/setup.html http://www.hubwiz.com/class/5599d367a164dd0d75929c76原创 2017-01-11 10:40:15 · 4084 阅读 · 0 评论 -
AngularJS自定义指令
用AngularJS自定义指令写个开关demo 点击前 点击后 <html ng-app='expanderModule'> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/cs转载 2017-02-17 12:59:09 · 574 阅读 · 0 评论 -
百度搜索框提示词下拉列表的制作方法
<!DOCTYPE HTML><html ng-app="myApp"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>百度搜索框提示词下拉列表的制作方法</title><script src="angular.min.js"></script><script>var m1 =原创 2017-01-19 15:57:19 · 4340 阅读 · 0 评论 -
AngularJS路由及基本原理解析
内容介绍，为什么要使用前端路由？UI-Router深层次嵌套路由前端路由基本原理原创 2017-03-28 23:08:42 · 21596 阅读 · 2 评论 -
angularJS控制器controller压缩报错处理
第一种报错var m1 = angular.module('myApp',[]);m1.controller('Aaa',function($scope){ $scope.name = 'hello angular';});换一种不报错的，即写在数组里 原因是当压缩后，变量被压缩了，在将$scope传给它var m1 = angular.module('myApp',[]);/初始化模块原创 2017-03-29 01:13:20 · 1171 阅读 · 0 评论 -
AngularJS Cookies 的使用
原文：https://my.oschina.net/loveking/blog/209484摘要: AngularJS 是一个强大的框架， 这里主要是记载一些小技巧的积累AngularJS Cookies Example AngularJS 提供了很好的[美元符] cookie 和[美元符] cookieStore API 用来处理 cookies 。 这两个服务都能够很好的发挥HTML5 coo转载 2017-03-29 09:01:43 · 2364 阅读 · 0 评论 -
AngularJS使用$http配置对象方式与服务端交互
//$http函数的形参就是一个配置对象$http({ //method属性表示HTTP请求时的方式,它是一个字符串，值是POST、GET、JSONP、DELETE、PUT和HEAD其中之一 method: //url表示向服务器请求的地址，是一个相对或者绝对的字符串形式 url: //data属性是一个对象，该对象将作为消息体的一部分发送给服务端，常用于P原创 2017-04-02 13:01:33 · 1984 阅读 · 0 评论 -
Angular中的缓存
缓存的功能就是加快获取内容的速度，减少重复请求，这是一项非常重要的作用。 因此,angularJS框架中，提供了专门的服务——cacheFactory来生成缓存，同时，cacheFactory来生成缓存，同时，http服务中还存在缓存中可以开启缓存、自定义缓存名称. info方法 info方法返回缓存对象的一些信息，包括大小、名称、代码如下。var cache = $cacheFactory(转载 2017-04-02 14:33:38 · 5984 阅读 · 0 评论 -
AngularJs Cookies 操作
$cookiesProvider使用$cookiesProvider改变$cookies服务的默认行为。默认属性path：字符串，cookies只在这个路径及其子路径可用。默认情况下，这个将会是出现在你基础标签上的网址路径。domain：字符串，cookies只在这个域及其子域可用。为了安全问题，如果当前域不是需求域的或者其子域，那么用户代理不会接受cookies。expires：字符串，转载 2017-04-02 14:49:31 · 2264 阅读 · 0 评论 -
AngularJS博客目录-xyphf
1、AngularJS基础入门 2、AngularJS实用入门3、AngularJS的供应商–config 4、AngularJs路由、模块、依赖注入案例 5、AngularJS路由及基本原理解析6、AngularJS 模块与控制器 7、AngularJS点击添加样式、点击变色设置8、AngularJS依赖注入示例 9、AngularJS依赖注入常用对象注入器 $injector常用AP原创 2017-03-28 23:47:46 · 776 阅读 · 0 评论 -
AngularJS表单校验
例一： 没输入不可点击，输入了才可以点击<html ng-app='TestFormModule'> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="framework/angular-1.3.0.14/angular.js">转载 2017-02-17 00:10:53 · 578 阅读 · 0 评论 -
AngularJS Error: [$compile:tplrt]报错
我想有不少同学遇到这样的错误，当使用replace: true时，出现Error: [$compile:tplrt]错误，如下图： 这是因为在angularJS中，html模板只能由有一个根元素，head.html代码如图 如果将第5行的div标签删掉就正常了，这是因为html模板只能有一个根标签原创 2017-09-08 20:48:07 · 4802 阅读 · 0 评论 -
关注Ionic底部导航按钮tabs在android情况下浮在上面的处理
Ionic是一款流行的移动端开发框架，但是刚入门的同学会发现，Ionic在IOS和android的底部tabs显示不一样。在安卓情况下底部tabs会浮上去。 如下图展示： 网上也有很多此类的解决方案，但是我觉得说一千道一万都不如给个dome实在，下面附上解决方案的dome，大家可以看看！<!DOCTYPE html><html ng-app="ionic"><head> <meta原创 2016-12-19 10:30:13 · 2691 阅读 · 0 评论 -
移动app之ionic框架css布局
声明：本文转自汇智网，转载只为传播更多信息，版权归原作者所有。Ionic简介ionic是一个强大的_混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS） 的原生App应用： ionic主要包括三个部分： CSS框架转载 2016-12-12 13:22:48 · 6592 阅读 · 0 评论 -
1-2.编写一个具有计算功能的angular程序
<!DOCTYPE html><html ng-app><!-- ng-app 由angular接管整个页面 --><head> <meta charset="UTF-8"> <title>编写一个具有计算功能的angular程序</title> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angu原创 2016-06-23 00:31:46 · 478 阅读 · 0 评论 -
1-3.编写一个绑定页面元素的angular程序
<!DOCTYPE html><html ng-app><!-- ng-app 由angular.js接管整个页面 --><head> <meta charset="UTF-8"> <title>编写一个绑定页面元素的angular程序</title> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/a原创 2016-06-23 00:35:12 · 729 阅读 · 0 评论 -
1-4.编写一个绑定多个页面元素的angular程序
<!DOCTYPE html><html ng-app><!-- ng-app 声明由angular接管整个页面 --><head> <meta charset="UTF-8"> <title>编写一个绑定多个页面元素的angular程序</title> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/原创 2016-06-23 00:39:24 · 997 阅读 · 0 评论 -
时间年月日select联动下拉框插件
date-option.jsvar dateOption = (function () { var option = { 0: "nian", 1: "yue", 2: "ri" }; function renderOption(min, max) { var i = min, optionHtml = ""; for (; i < max; i++)原创 2016-08-31 08:54:30 · 3565 阅读 · 0 评论 -
AngularJS基础入门
1、AngularJS 表达式把数据绑定到 HTML<!DOCTYPE html><html><head><meta charset="utf-8"><script src="angular.js"></script></head><body><div ng-app=""> <p>我的第一个表达式: {{ 5 + 5 }}</p></div></body></html>2原创 2016-11-04 23:42:51 · 1315 阅读 · 0 评论 -
AngularJS自定义指令模板
Directive.html<!doctype html><html ng-app="MyModule"> <head> <meta charset="utf-8"> </head> <body> <hello></hello> </body> <script src="js/angular-1.3.0.js"></scrip原创 2016-11-05 09:25:06 · 1053 阅读 · 0 评论 -
AngularJS 模块与控制器
<!doctype html><html ng-app="HelloAngular"> <head> <meta charset="utf-8"> </head> <body> <div ng-controller="helloAngular"> <p>{{greeting.text}},Angular</p>原创 2016-11-05 09:28:08 · 639 阅读 · 0 评论 -
AngularJs路由、模块、依赖注入案例
index.html<!doctype html><html ng-app="bookStoreApp"><head> <meta charset="UTF-8"> <title>BookStore</title> <script src="framework/1.3.0.14/angular.js"></script> <script src="framework原创 2016-11-05 10:13:28 · 1191 阅读 · 0 评论 -
AngularJS实用入门
1、隔行换色<!DOCTYPE html><html ng-app="my_app"><head> <meta charset="UTF-8"> <meta name="author" content="" /> <meta name="copyright" content="" /> <title>隔行换色</title><style>.white{back原创 2016-11-06 19:19:29 · 834 阅读 · 0 评论 -
AngularJS服务入门案例简介
angularJS服务内容简介原创 2016-11-11 12:04:26 · 592 阅读 · 0 评论 -
AngularJS行内注入
<!doctype html><html ng-app="a4_5"><head> <title>行内式注入</title> <script src="../Script/angular.min.js" type="text/javascript"></script> <style type="text/css"> body {fo原创 2016-11-16 10:46:02 · 1110 阅读 · 0 评论 -
AngularJS依赖注入常用对象注入器 $injector常用API方法，get、has、invoke
get与has ①has方法的作用是从注册的列表查找对应的服务，如果找到返回true，否则返回false;它的调用格式如下：injector.has(name)②get方法的作用是返回指定名称的服务实例，获取到服务的实例对象后，就可以直接调用服务中的属性和方法，它的调用格式如下：injector.get(name)为了更深入的理解这两个API的使用方法，我们通过一个简单的示例来演示他们在应用中的使原创 2016-11-16 11:31:25 · 5389 阅读 · 1 评论 -
AngularJS点击添加样式、点击变色设置
首先解释需求是这样的，有个列表，当你点击哪一行时，哪一行背景变成灰色，在JQ中，大家都知道，这是非常容易的，加一个addClass就行了，那么AngularJS如何实现呢？下面我们看代码部分<!doctype html><html ng-app="a2_11"><head> <title>添加元素样式</title> <script src="../Script/angular.原创 2016-11-14 16:35:06 · 19219 阅读 · 3 评论 -
AngularJS过滤器应用之表头排序
需求解释：表头排序指的是使用列表方式显示数据时，如果用户单击列表中某列头部元素，那么列表中的全部数据将会自动按该列表的属性值自动排序，默认为升序，再次单击为降序；案例如下： 先贴代码：<!doctype html><html ng-app="a3_4"><head> <title>表头排序</title> <script src="../Script/angular.min.j原创 2016-11-14 17:23:04 · 2957 阅读 · 2 评论 -
AngularJS依赖注入示例
需求解释 在页面的视图模中，添加4个文本不同的按钮，通过依赖注入的方式，向控制器注入多个依赖对象，当单击按钮时，根据选择的对象不同，将在页面的< div >元素中将显示不同的问候内容。先贴代码在解释<!doctype html><html ng-app="a4_2"><head> <title>简单依赖注入的示例</title> <script src="../Script/a原创 2016-11-15 17:09:17 · 1205 阅读 · 0 评论 -
AngularJS常见报错总结
在刚学AngularJS的时候总会出现各种各样的错误，今天做一个小小的总结第一条：Uncaught SyntaxError: Unexpected identifier原因：代码中少了一个英文逗号，加上逗号就正常了，如：第二条：Error: [ng:areq] http://errors.angularjs.org这个错误的一般是没有找到co原创 2017-10-25 18:25:26 · 5911 阅读 · 0 评论