Angular JS [Draft]

AngularJS应用是完全运行在客户端的应用.没有后端的支持,我们只能展示随页面一起加载进来的数据.AngularJS提供了几种方式从服务器端获取数据. $http服务 $http 封装了浏览器原生的XMLHttpRequest对象. var promise = $http({ method:'Get', url:'/api/cars.json' }); 可以使用then处理回调,或者直接使用success 和error. $http 提供一些快捷方法 var promise = $http.…

MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是将 M 和 V 的实现代码分离,从而使同一个程序可以使用不同的表现形式. 交互方式(所有通信都是单向的): View 传送指令到 Controller Controller 完成业务逻辑后,要求 Model 改变状态 Model 将新的数据发送到 View,用户得到反馈更详细的说明: 模型(Mod…

angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe angularjs error 粗线这个错误是因为往Service里面注入了不该注入的东西,service provider在DI的时候找不到合适的provider完成DI. 典型的就是往里面注入$scope, 换成$rootScope就没问题. angular.module('myapp', [])…

(翻译)Angular.js为什么如此火呢？

在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应用开发增加不少魔法变换. 我可以花整天的时间告诉你为什么你必须在新项目尝试angular.js,但是我觉得还是百说不如一练. 数据绑定和scopes(作用域) 首先…

angular.js写法不规范导致错误

以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title>1.0.1-1.5版本间的差异</title> <script src="/js/angular-1.0.1.min.js"></script>  <!--<script src="/js…

Angular.js实现折叠按钮的经典指令.

var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function(){ return{ restrict:'EA', replace:true, transclude:true, scope:{ title:'=expanderTitle' }, template:'<div>'+'<div class="title" ng-click…

Angular.js通过bootstrap实现经典的表单提交

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/ang…

python , angular js 学习记录【1】

1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 1996; 96 M Month in year Month July; Jul; 07 w Week in year Number 27 W Week in month Number 2 D Day in year Number 189 d Day in month Number 10 F Day of…

Angular JS 学习之路由

1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/first/page,但在单页Web应用中AngularJS通过#+标记实现,例如: http://runoob.com/#/first http://runoob.com/#/second http://runoob.com/#/third 3.当我们点击以上的任意的一个链接时,向服务端请的地址都是一样的…

Angular JS 学习之Bootstrap

1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 2.国内站点建议使用: <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.…

Angular.js 的初步认识

MVC模式模型(model)-视图(view)-控制器(controller) Angular.js采用了MVC设计模式的开源js框架 1.如何在angular.js建立自己的模块(model),控制器(controller),操作模型数据. <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.…

Angular js 之一些简单的js操作

1.<div ng-if()> </div> 括号里面是布尔值如果是false那么你ng-if的那个dom就会不显示.(感觉这是angular js中最给力的一点) 一般会在controller里面来设置ng-if(abc)括号里面值得布尔值 ,类似$scope.abc=true; 如果你想默认一个值为true ,一般用于不常见的一个字符然后设置ng-if(!abcd) 这样默认为true. 在实际操作中遇到那种ng-repeat出来的值,需要判断排列或者是否显示的时候,…

Angular js 之动态传数据到下一个页面和动态通过ng-click进入不同的页面

+关于Angular js中一些千篇一律的后台获取数据首先在services.js里面把服务写好然后在controller里面把数据给打印出来 (首先需要把数据注入) +关于Angular js中跳转页面的时候传数据过去首先需要在app.js中url里面定义你需要传数据的名字然后在你跳入别的页面的时候传上你的数据 $scope.beginner=function(){ $state.go('tab.school-acticle',{type:'beginner'})…

Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等加载器,在 module 初始化之后,在动态异步加载其他的 Controller, Services, Filters 等等... Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块…

Angular JS中$timeout的用法及其与window.setTimeout的区别

$timeout的用法 angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行. 如果需要取消一个timeout,调用$timeout.cancel(promise)方法. 用法: $timeout(fn, [delay], [invokeApply]): fn: 回调函数(必填) delay: number类型.延迟的时间(非必填),如果…

angular js 的 ng-keyup 监听 keydown keyup事件获取 keyCode

参考这个页面.http://www.angularjshub.com/examples/eventhandlers/keyboardevents/ Html页面代码: <input ng-model='keyword' ng-keyup="checkKeyCode($event)" type="text" placeholder="输入关键字"/>Angular JS代码: $scope.checkKeyCode = function…

angular.js 例子

angular.js是一个前端的MVC框架,12年的时候曾近在一个portal平台的项目中使用过. 下面给出一个angular.js的典型例子,涵盖一些基础的知识点,用以复习备忘: <html ng-app = "myapp" > <head> <script src="angular.js"></script> </head> <!--ng-controller 定义body内使用该控制器 --&g…

学习angular.js的一些笔记想法(上)

1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-changer' data-ng-class="{'color-changer-hiden':!colorChanger}"> </div> js代码: $scope.colorChanger=false; 此时的变量colorChanger=false,那么!colorChange…

angular.js初探

2015年7月27日 22:26:35 星期一用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复首先要引用js文件, 我这里使用的是bootstrap提供的cdn <script src="http://cdn.bootcss.com/angular.js/1.4.3/angular.js"></script> 接下来是自己的js代码 //bbsController bbsApp =…

Angular.js 以及个人学习网站

Angular.js 教程 http://www.360doc.com/content/14/0414/15/14416931_368816305.shtml web前端学习: 慕课网:http://www.css88.com/ 极客标签:http://www.gbtags.com/gb/gblibrary.htm? Bootstrap:http://www.bootcss.com/ highcharts:http://www.hcharts.cn/ html5学习:http://www.ji…

Angular JS学习之指令

1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app:指令初始化一个AngularJS应用程序 **ng-init:指令初始化应用程序数据 **ng-model:指令把元素(比如输入域的值)绑定到应用程序: <div ng-app="" ng-init="firstName='John'"> <p>…

Angular JS学习之表达式

1.Angular JS使用表达式把数据绑定到HTML: 2.Angular JS表达式写在双大括号中:{{expression}} **Angular JS表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之妙: **Angular JS将在表达式书写的位置"输出"数据 **Angular JS表达式很像javascript表达式:它们可以包含文字,运算和变量: <!DOCTYPE html> <html> <head> <meta…

Angular JS 学习之简介

1.Angular JS是一个JavaScript框架,它是一个以JavaScript编写的库,它可以通过<script>标签添加到HTML页面: <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 2.Angular JS通过指令扩展了HTML,且通过表达式绑定数据到HTML 3.Angular JS扩展了HTML: (1…

Angular JS笔记

1.引导程序使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app> 双括号绑定表达式: <p>Nothing here {{'yet' + '!'}}</p> 2.视图和模板其核心为MVC模式原理:在AngularJS中,一个视图是模型通过HTML模板渲染之后的映射 HTML模板: 包含ng-controller指令,和ng-repeat…

angular.js ng-class-even ng-class-odd ng-cloak（没啥技术含量）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .even{ color: red; } .odd{ color: blue; } </style> </head> <body ng-app="app&quo…

精通 Angular JS 第一天——Angular 之禅

简介 Angular JS是采用JavaScript语言编写的客户端MVC框架,它为业界带了重大的变化,包括对模板化的创新实现,以及数据的双向绑定,这些特性使得它强大而易用.它可以用来帮助开发者编写单页面应用,尤其适合编写有大量CRUD操作的,具有Ajax风格的富客户端应用.大多数开发者认为,与其它框架相比,AngularJS明显缩减了项目所需的代码量. 2012年6月,Angular JS正式发布1.0版,在各种客户端MVC框架中,属于后起之秀.AngularJS主页(http://www.a…

[学习笔记] 七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX [转]

这是＂AngularJS - 七步从菜鸟到专家＂系列的第三篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.第二篇我们讨论了scope和 $scope 的功能. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看这里. 第三部分数据绑定通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立…

paip.提升效率--数据绑定到table原理和流程Angular js jquery实现

paip.提升效率--数据绑定到table原理和流程Angular js jquery实现 html #--keyword 1 #---原理和流程 1 #----jq实现的代码 1 #-----Angular 的实现 3 #--keyword jquery 遍历表格tr td Angular 模板绑定 #---原理和流程获得所有的行,第一的头行..排除,,,在的所有的删除. 遍历表格tr获得tds的所有的id数组. 根据id/id索引来获得绑定的数据源里面的数据字段..绑定到个td上..…

Angular.js表单以及与Bootatrap的使用

首先从angular.js的目录开始,如下图,知道了我们要学什么,然后再开始有目的的学习与对比. 1.从表达式开始: ng-app指令初始化一个 AngularJS 应用程序. ng-init指令初始化应用程序数据. 2.指令 <div ng-app="" ng-init="msgs=[ {name:'张三',sex:'男'}, {name:'李四',sex:'女'}, {name:'王五',sex:'男'}]"> <p>所有对象:</…

Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)

刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目到了测试那边,自己正好闲下来了,可以把项目优化一下,目标是做成SPA(单页面应该程序),因为Android版本实在是卡得不行,iPhone上面运行还可以见得了人.不得不优化,SPA做完了,还要做本地化存储.OK,把今天的笔记写下来,回家再完善 ##ListController.js /// <ref…

【Angular JS [Draft]】的更多相关文章