学习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,只要记住这是关于双向数据绑定 和单向数据绑定就可以,看看开发文档,短时间内还是可以直接入手的,看个人理解能力(我是小白). 这几天开始着手学习angularjs的有关知识,将一些心得总结如下: (一)为了使用Angular,所有应用必须首先做两件事情: 1.加载angular.js库. 既可以从外部调用,如: <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js&quo…
最近看了几眼node.js,以前曾听说它用途很大. 在菜鸟教程上,已看了过半的内容:http://www.runoob.com/nodejs/nodejs-web-module.html,如今看到了这里,这里先后创建了一个服务器,一个html文件,一个客户端,直观的让我清楚了他们的作用,看到这里,好像开窍了一般,看前面的时候,我就在想,这不就是js吗,没什么特别,一直没试过自己做服务器,或许学完之后,可以做一个玩一玩呢,哈哈.这一节,遇到的问题是在执行客户端js文件的时候,js报错了,说even…
最近开始学习angular.js,发现angular.js确实很方便,也很强大.在看到 AngularJS Routing and Multiple Views 这一部分的时候,有点乱.现在通过记录一下学习过程中写的例子,让自己好好在理解一下. 第一步: ①创建一个名为“myApp”的模块,并且加载"ngRoute"作为依赖模块 ②使用$routeProvider配置路由 ③在这个例子中,我使用了两个路径,分别是/home和/about ;使用了一个控制器(不加控制器也行,主要是用于操…
项目框架为angular js,需要用到文件上传,百度之后先选择了angular-file-upload,githuab上API文档很全,想要具体了解,可以仔细研究一下.在这里简单回顾一下自己使用的插件的部分功能和需要注意的事项. 1.引入angular-file-upload.js,放在angular js 之后. 2.将文件注入angular js 的模块中,如 var app =  angular.module (" myapp ", [ ' angularFileUpload…
最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后分页显示. 1.表格是通过ng-repeat来展示的,代码如下: <table class="table table-bordered"> <tr> <th>index</…
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 官方版本库 中. Angular.js   是一个神奇的JS框架,这一点毫无疑问,但是尽管受欢迎度和社团日益增长,但是社团中的很多开发者觉得Angular是另外一种浪费个人时间和效率的形式.在这些最不招人喜欢的问题中你会发现,测试和调试简直就是一个噩梦.你可以从网络上找到一些分散的报告, 这里有一…
Angular.js 拥抱 HTML/CSS Misko Hevery(Angular.js的开发者之一)回答了这一问题,他的主要观点如下: 在HTML中加入太多逻辑不是好做法.Angular.js只放置绑定,而不是逻辑,建议把逻辑放入控制器中.但绑定同样是信息,通常,这些信息可以放在三个地方: 代码.但这使得程序模块化很成问题,因为HTML与代码紧密耦合,要想重新组成一个应用程序非常困难. HTML.这正是Angular.js所做的.除了放置绑定信息外,你不应该在HTML中做任何事情.任何逻辑…
我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服务. http://www.bootcdn.cn/ 我们找到 1.3.8的angular.js cdn地址,引用到页面 index.html中 http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js 初识 angular.js : 它是一个前端的…
本文源自于Quora网站的一个问题,作者称最近一直在为一个新的Rails项目寻找一个JavaScript框架,通过筛选,最终纠结于 Angular.js和 Ember.js. 这个问题获得了大量的关注,并吸引到这两个框架的开发者参与回答.如果你也纠结JavaScript框架的选择,那么本文对你来说也是一个非常好的参考资料. Angular.js和Ember.js介绍 Angular.js是一款开源的JavaScript框架,由Google维护,其目标是增强基于Web应用,并带有MVC功能,使得开…
对angular.js的一点理解 2015-01-14 13:18 by MrGeorgeZhao, 317 阅读, 4 评论, 收藏, 编辑 最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几乎纯粹的dom 绑定没有一个架构一样的东西.而angular.js 则有dom 绑定还有mvc 架构的支持.一 angular.js 和以前的js 框架有的…
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. ‘参数’ 就是$scope对象下的一个对象…
最近一直在学习angular.js.不得不说和jquery相比有很大不同,有很多的不同点,之前也用过Knockout.js 但是两者还是有一定的区别的,首先knockout.js是基于Mvvm的,是几乎纯粹的dom 绑定没有一个架构一样的东西.而angular.js 则有dom 绑定还有mvc 架构的支持.一 angular.js 和以前的js 框架有的区别:    1 传统的前端开发思维:       以jquery 为例,它是以dom 为中心的,是dom 元素的操作,更多的是关注dom 的变…
最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 好处: AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易.…
Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zip下载包 http://best.factj.com/dolymood/angular-packages,已增加docs服务,输入地址即可,例如:http://blog.aijc.net/angular-packages/angular-1.3.15/docs/ jquery?ag? : http:…
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ng-showAndng-hide</title><script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script></head>…
这是"AngularJS - 七步从菜鸟到专家"系列的第三篇. 在第一篇,我们展示了如何开始搭建一个AngularaJS应用.第二篇我们讨论了scope和 $scope 的功能. 通过这整个系列的教程,我们会开发一个NPR(美国全国公共广播电台)广播的音频播放器,它能显示Morning Edition节目里现在播出的最新故事,并在我们的浏览器里播放.完成版的Demo可以看这里. 第三部分 数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点.这一步建立…
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目到了测试那边,自己正好闲下来了,可以把项目优化一下,目标是做成SPA(单页面应该程序),因为Android版本实在是卡得不行,iPhone上面运行还可以见得了人.不得不优化,SPA做完了,还要做本地化存储.OK,把今天的笔记写下来,回家再完善 ##ListController.js /// <ref…
AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. <!-- ng-app 指令定义一个 AngularJS 应用程序. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. ng-bind 指令把应用程序数据绑定到 HTML 视图. --> <div ng-app="" ng-init="firstName='John'"> <p> 名字 : <inp…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>serviceAndDefinitService</title> </head> <body> <!--1:--> <div ng-app="myModule" ng-controller=&qu…
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>angularRouter</title> </head><body> <!--1:--> <div ng-app="mymodule"> <!--通过ui-view属性指定路由模板的填充…
一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING{{ "TANK is GOOD" | lowercase }} // 结果:tank is good2.date 格式化{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:253.n…
用A链接对象解析url的组成 var url = 'https://www.baidu.com:8080/aaa/1.html?id=10#name'; var aLink = document.createElement('a'); aLink.href = url; console.log(aLink);//<a href="https://www.baidu.com:8080/aaa/1.html?id=10#name"></a> console.log(…
Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model=&…
1. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面.AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. 2. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中: <script src="http://apps.bdim…
1. 菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 2. Angular JS中文网:http://www.apjs.net/…
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>AngularDirective</title> <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script></head&…
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>angularFilter</title> <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script></head>…
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…
一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn.vuejs.org/ 手册:http://cn.vuejs.org/v2/api/ 二.vue.js是什么 Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手 Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用自底向上…