AngularJs
约德尔蒙
本人博客大部分为自己总结的, 难免有一些错误,请大家多多查阅多多对比,欢迎指正!
展开
-
AngularJS动态添加数据并删除
TodoList body { padding: 0; margin: 0; } .todo { width: 300px; margin: 100px auto; } .todo dd { overflow: hidden; } .todo input[type="checkbox"] { float: left; }原创 2017-02-17 08:17:33 · 7347 阅读 · 0 评论 -
AngularJs基本语法应用(mvc)
#定义应用通过为任一HTML标签添加ng-app属性可以指定一个应用,表示此标签所包裹的内容都属于应用(App)的一部分。为html添加ng-app表明增个文档都是应用//ng-app可以不赋值,但是关联整个模块的时候必须赋值#定义模块AngularJS提供了一个全局对象angular,在此全局对象下存在若干的方法,其中angular.module()方原创 2017-02-15 20:37:13 · 491 阅读 · 0 评论 -
AngularJS简单介绍
##AngularJS AngularJS是一款由Google公司开发维护的前端MVC框架, 其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率。 使用双大括号{{}}语法进行数据绑定;使用DOM控制结构来实现迭代或者隐藏DOM片段;支持表单和表单的验证;能将逻辑代码关联到相关的DOM元素上;能将HTML分组成可重用的组件原创 2017-02-15 20:39:43 · 337 阅读 · 0 评论 -
AngularJS路由以及模块配置
AngularJS 路由-参数,模块配置,布局模板 body { padding: 0; margin: 0; background-color: #F7F7F7; font-family: Arial; }原创 2017-02-15 20:41:05 · 282 阅读 · 0 评论 -
AngularJs锚点监听
AngularJS 路由和多视图 body { padding: 0; margin: 0; background-color: #F7F7F7; font-family: Arial; } .wrapper原创 2017-02-15 20:50:37 · 379 阅读 · 0 评论 -
AngularJs模块加载 运行块
AngularJS 模块加载之 运行块 <!-- AngularJS模块:可以在被加载和执行之前对自身进行配置 我们可以在应用加载阶段配置不同的逻辑 ##配置快: 通过config方法实现对模块的配置,AngularJS中的服务多数都对应一个provider, 用来执行与对应服务相同的功能或对其配置,比如$log、$http原创 2017-02-15 20:55:42 · 339 阅读 · 0 评论 -
AngularJs常见内置指令 自定义指令
AngularJS 指令 <!-- #指令 HTML在构建应用(App)时存在诸多不足之处, AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷, 所谓指令就是AngularJS自定义的HTML属性或标签, 这些指令都是以ng-做为前缀的,例如ng-app、ng-controller、ng-repeat等。原创 2017-02-15 20:59:20 · 565 阅读 · 0 评论 -
AngularJs数据绑定
AngularJs数据绑定<!-- AngularJS是以数据做为驱动的MVC框架,所有模型(Model)里的数据经由控制器(Controller) 展示到视图(View)中。 所谓数据绑定指的就是将模型(Model)中的数据与相应的视图(View)进行关联, 分为单向绑定和双向绑定两种方式。 指定模块 一个页可原创 2017-02-15 21:01:24 · 340 阅读 · 0 评论 -
AngularJs依赖注入
<!-- 依赖关系: AngularJS采用模块化的方式组织代码,将一些通用逻辑封装成一个对象或函数, 实现最大程度的复用,这导致了使用者和被使用者之间存在依赖关系。 依赖注入: 所谓依赖注入是指在运行时自动查找依赖关系,然后将查找到依赖传递给使用者的一种机制。 注入分类: 推断式注原创 2017-02-15 21:02:22 · 322 阅读 · 0 评论 -
AngularJs中的Jquery
Document<!-- 在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite, 通过angular.element不能选择元素,但可以将一个DOM元素转成jQuery对象, 如果引提前引入了jQuery则angular.element则完全等于jQuery。 --> 普通一个盒子 点击 // angular.element原创 2017-02-15 21:03:49 · 338 阅读 · 0 评论 -
AngularJs自定义过滤器
AngularJS 自定义滤器 <!-- 自定义滤器:除了使用AngularJS内建过滤器外,还可以根业务需要自定义过滤器, 通过模块对象实例提供的filter方法自定义过滤器。 --> {{info|capitalize:123}}{{name}}原创 2017-02-15 21:06:37 · 262 阅读 · 0 评论 -
AngularJs作用域
AnaularJs作用域<!-- #控制器嵌套: 通常AngularJS中应用(App)是由若干个视图(View)组合成而成的, 而视图(View)又都是HTML元素,并且HTML元素是可以互相嵌套的, 另一方面视图都隶属于某个控制器(Controller),进而控制器之间也必然会产生嵌套关系。原创 2017-02-15 21:07:25 · 264 阅读 · 0 评论 -
AngularJs 服务-$filter
$filter 服务 <!-- 服务:服务是一个对象或函数,对外提供特定的功能. 内建服务: 1: $location是对原生Javascript中location对象属性和方法的封装。 2: $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。原创 2017-02-15 20:03:09 · 244 阅读 · 0 评论 -
AngularJS获取天气预报(案例)
天气预报 {{weather.date}} {{weather.temperature}} {{weather.weather}} {{weather.wind}} var Weather = angular.module('Weather', []); Weather.co原创 2017-02-18 14:27:05 · 1508 阅读 · 2 评论 -
项目中Angularjs遇到的问题和优化总结
项目中Angularjs遇到的问题和优化总结由于本项目最低需要兼容ie8浏览器,所以在版本选择上选择Angularjs1.2版本。1.ng-if/ng-switch与ng-show/ng-hide区别选择ng-show/ng-hide是通过修改CSS样式方式控制元素显示与隐藏,对应的DOM元素会一直存在于当前页面中,本质是CSS属性操作display:none;displa转载 2017-06-08 22:52:25 · 452 阅读 · 0 评论 -
AngularJs过滤器
Document<!-- 在AngularJS中使用过滤器格式化展示数据,在“{{}}”中使用“|”来调用过滤器,使用“:”传递参数。 --> {{price|currency:'$'}} {{now|date:'yyyy/MM/dd hh:mm:ss'}} <!-- 日期原创 2017-02-15 20:28:35 · 247 阅读 · 0 评论 -
AngularJs服务-$timeout or $interval(定时器)
$timeout&$interval 服务 <!-- 服务:服务是一个对象或函数,对外提供特定的功能. 内建服务: 1: $location是对原生Javascript中location对象属性和方法的封装。 2: $timeout&$interval对原生Javascript中的setTimeout和setInterval原创 2017-02-15 20:18:47 · 322 阅读 · 0 评论 -
AngularJs服务-$location(暴露当前地址栏的URL)
$location服务 <!-- 服务:服务是一个对象或函数,对外提供特定的功能. 内建服务: 1: $location是对原生Javascript中location对象属性和方法的封装。 2: $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。原创 2017-02-15 20:13:43 · 715 阅读 · 0 评论 -
AngularJS遍历数组
AngularJS 模块化 姓名 性别 年龄 {{star.name}} {{star.sex}} {{star.age}} // 定义一个模块 var Demo = angular.module('Demo', []); // 定义控制器 Demo原创 2017-02-17 08:38:18 · 7669 阅读 · 0 评论 -
AngularJS中的Ajax(聊天机器人)
Ajax body { margin: 0; padding: 0; background-color: #F7F7F7; } h3 { text-align: center; } .chatbox { width: 500px; height: 500px; margin: 0 auto; border: 1px sol原创 2017-02-18 14:24:46 · 529 阅读 · 0 评论 -
AngularJS $http跨域
AngularJS $http跨域 function fn(arg) { console.log(arg); document.write('111'); } --> // 1、JSONP 跟Ajax 没有关系 // 2、$.ajax({ // }); // 3、$.ajax({ //原创 2017-02-18 14:29:47 · 601 阅读 · 0 评论 -
AngularJS $http服务例子
AngularJS $http服务例子 获取数据 姓名 年龄 性别 头像 专辑 {{star.name}} {{star.age}} {{star.sex}} {{star.photo}} {{star.ablum}} var App原创 2017-02-18 14:30:52 · 584 阅读 · 0 评论 -
AngularJS $http跨域
AngularJS $http跨域 function fn(arg) { console.log(arg); document.write('111'); } --> // 1、JSONP 跟Ajax 没有关系 // 2、$.ajax({ // }); // 3、$.ajax({ //原创 2017-02-18 14:35:09 · 456 阅读 · 0 评论 -
AngularJS 定时器(获取当前日期)
AngularJS 服务 {{msg}} {{now|date: 'yyyy-MM-dd hh:mm:ss'}} 停 var App = angular.module('App', []); App.controller('DemoController', ['$scope', '$timeout', '$interval',functi原创 2017-02-18 14:36:46 · 4111 阅读 · 0 评论 -
AngularJS 自定义常量服务
AngularJS 自定义常量服务 {{author}} {{version}} var App = angular.module('App', []); // 自定义常量服务 // 提供了3种方法实现自定义服务 // factory、service、value App.value('author', 'geng'); App.value(原创 2017-02-18 14:39:09 · 3219 阅读 · 0 评论 -
AngularJS 路由和多视图
AngularJS 路由和多视图 body { padding: 0; margin: 0; background-color: #F7F7F7; font-family: Arial; } .wrapper { width: 980px; margin: 50px auto; } ul { padding: 0; mar原创 2017-02-18 14:40:03 · 330 阅读 · 0 评论 -
AngularJS 路由和多视图2
AngularJS 路由和多视图 body { padding: 0; margin: 0; background-color: #F7F7F7; font-family: Arial; } .wrapper { max-width: 980px; margin: 50px auto; } ul { padding: 0;原创 2017-02-18 14:40:32 · 421 阅读 · 0 评论 -
AngularJS 路由和多视图3
AngularJS 路由和多视图 body { padding: 0; margin: 0; background-color: #F7F7F7; font-family: Arial; } .wrapper { max-width: 980px; margin: 50px auto; } ul { padding: 0;原创 2017-02-18 14:41:24 · 318 阅读 · 0 评论 -
AngularJs服务-$log
.原创 2017-02-15 17:40:34 · 348 阅读 · 0 评论 -
AngularJs服务-http请求
$http用于向服务端发起异步请求。 $http服务 <!-- 服务:服务是一个对象或函数,对外提供特定的功能. 内建服务: 1: $location是对原生Javascript中location对象属性和方法的封装。 2: $timeout&$interval对原生Javascript中的setTimeout和setInt原创 2017-02-15 19:53:02 · 266 阅读 · 0 评论 -
AngularJs模块加载 配置块
AngularJS 模块加载之 配置快 <!-- AngularJS模块:可以在被加载和执行之前对自身进行配置 我们可以在应用加载阶段配置不同的逻辑 ##配置快: 通过config方法实现对模块的配置,AngularJS中的服务多数都对应一个provider, 用来执行与对应服务相同的功能或对其配置,比如$log、$http原创 2017-02-15 19:57:14 · 294 阅读 · 0 评论 -
AngularJs自定义服务
AngularJS 自定义服务 <!-- 自定义服务:所谓服务是将一些通用性的功能逻辑进行封装方便使用, AngularJS允许将自定义服务 服务本质就是一个对象或函数,所以自定义服务就是要返回一个对象或函数以供使用 -->原创 2017-02-15 20:04:38 · 264 阅读 · 0 评论 -
AngularJs服-jsonp解决跨域问题
AngularJS $http跨域 <!-- 服务:服务是一个对象或函数,对外提供特定的功能. 内建服务: 1: $location是对原生Javascript中location对象属性和方法的封装。 2: $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封原创 2017-02-15 20:05:46 · 233 阅读 · 0 评论 -
Angular 控制器之间的通信
angular控制器通信 输入内容后 第一步先点我 第二部点我 控制器通信的值为: {{name}} var app = angular.module('App',[]); //工厂模式 也可以用 service 可以理解成中间变量 app.factory('Myfactory', fun原创 2017-10-25 22:23:51 · 346 阅读 · 0 评论