angularJS(6) 一:angularJs的事件. 1.ng-click指令定义了AngularJS点击事件. <div ng-app="myapp" ng-controller="myctrl"> <button ng-click="count=count+1">点赞</button> <h1><span style="color:'red">♥</sp…

angularJS(5) 一,数据循环:特别要注意作用域 使用ng-repeat指令. <div ng-app="myApp" ng-controller="myCtrl"> <ul> <li ng-repeat="x in names">{{x}}</li> </ul> </div> <script> var app = angular.module('myAp…

angularJS(4) 一:angulaJs的作用域scope Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带.scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用. Scope 可应用在视图和控制器上.AngularJS 应用组成如下 :$scope是一个模型View(视图), 即 HTML.Model(模型), 当前视图中可用的数据.Controller(控制器), 即 JavaScrip…

  angularJS(3) 一.angularJs的指令模型ng-model指令 ng-model 指令 绑定 HTML 元素 到应用程序数据. 为应用程序数据提供类型验证(number.email.required).为应用程序数据提供状态.为 HTML 元素提供 CSS 类.绑定 HTML 元素到 HTML 表单. <div ng-app="myapp" ng-controller="mycc"> 名字: <input ng-model=&q…

angularJS(2) 今天先讲一个angularJs的表单绑定实例: <div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> 姓:<input type="text" ng-model="user.xing"><br> 名:<input type="text" ng-model=…

AngularJS(1) 在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 2. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. 3. Ang…

前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要了解AngularJs的HTML编译器,简单地说让浏览器认识你自定义指令或是Angular的指令集,将其行为运用到DOM上(视图),分两个过程编译和链接,编译阶段是遍历DOM并且收集所有的相关指令,生成一个链接函数:链接阶段是给通过编译阶段调用所说的链接函数来将模板与作用域链接起来,绑定一个作用域,…

到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以学习一下,怎么在AngularJs下来实现叼酷炫的动画操作,主要使用的命令是ngAnimate. 与之前的ngResource,ngRoute一样,需要注入ngAnimate和引入ng-animate.js才可以使用此服务,想在你的angular应用程序使用ngAnimate来实现动画功能,前提条件…

在学习笔记-AngularJs(六)提及了事件处理器和过滤器以及它们的例子,而我们知道之前我是使用$http服务去获得我们需要的json数据,但是$http是比较底层的用法,有时候我们想把获取json数据包装成一个服务,然后每个控制器只要直接依赖我们自己写的服务,就可以去获取需要的数据,那么就需要自定义服务,现在我们需要学习一下怎么定义自己的服务,于是我们在js中建了services.js,一不小心插入个链接,http://t.cn/RUbL4rP,忽略,代码如下: var phoneServi…

在学习笔记-AngularJs(五),通过引入bootstrap.css进行改写整个样式,这时学习项目也变得好看多了,现在我们又需要目录再进行一次改变,如下图: 这样就符合之前讲的对学习目录进行布置了! angualrJs自带了一些默认的过滤器,如: {{"xiaobin" | uppercase}} {{"XIAOBIN" | lowercase}} {{ | date:"yyyy-MM-dd"}} {{ {"foo":&q…

学习笔记-AngularJs(二)写了个所有程序语言入门时都必须要写的Hello World,那么从现在开始做那个之前说过的互联网大佬介绍的学习例子,当然这里开始会慢慢按照之前说过的目录来搭建这个学习的demo,将控制器.过滤器.指令.服务.基本配置都独立成一个个js文件,直接贴张效果图(http://t.cn/RUbL4rP,一不小心): (有点简陋,之后再把样式写好看些!) 这里实现的功能是这样的,在前台遍历phones的对象数组,然后可以按照年龄和名字排序,也可以通过输入字符串过滤检索.代…

在接下来学习angularjs中,我按照的就是之前 学习笔记-AngularJs(一)所讲的目录来搭建一个学习的项目,做一个互联网大佬人物简介的例子,当然也可以使用angualrjs上面提供的官方例子,phonecat,其实大同小异,都是差不多的,可以用git下载下这个学习环境 git clone https://github.com/angular/angular-phonecat ,然后 cd angular-phonecat node scripts/web-server.js 记住不要关…

在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中集成 AngularJS 的第二部分. ASP.NET 捆绑和压缩 CSS 和 JavaScript 的捆绑与压缩功能是 ASP.NET MVC 最流行和有效的特性之一.捆绑和压缩降低了 HTTP 请求和有效载荷的大小,结果是可以更快和更好的执行 ASP.NET MVC 的网站.有许多可以减少 CS…

一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维护它时,便一直在关注,看到其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.朝思暮想良久,决定深入学习angular,并写系列博客,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考. 首先我自己是一名学习者,会以学习者的角度来整理我的行文思路,故该系…

介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新的设计模式和技术. 当选择最新的软件技术时,有几个因素在起作用,其中包括如何将这些技术整合起来.过去两年中,我最喜欢的一项技术就是设计单页面应用(SPA)的 AngularJS.作为一个微软stack开发者,我也是使用 ASP.NET MVC 平台实现 MVC 设计模式和并进行研究的粉丝,包括它的捆…

什么是AngularJS[双向数据绑定:从界面的操作能实时反映到数据,数据的变更能实时展现到界面.]?1.AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易.2.AngularJS 把应用程序数据绑定到 HTML 元素.3.AngularJS 可以克隆和重复 HTML 元素.4.AngularJS 可以隐藏和显示 HTML 元素.5.AngularJS 可以在 HTML 元素"背后"添加代码.6.AngularJ…

使用Yeoman产生AngularJS的主要骨架 使用Grunt加速开发和帮助执行 使用Bower来加入第三方插件和框架——third party plugins/frameworks 一.准备工作 安装好NodeJS和NPM(读者可自己去google) 二.安装Yeoman, Grunt and Bower,产生AngularJS的主要骨架 2.1 新建一个目录,并进入该目录,执行 npm install -g yo grunt-cli bower 此时Yeoman,grunt和Bower就被…

Model的应用 MVC的模式大家都是十分熟悉了,那么Angular是怎么规划的呢.数据被放在json文件中,通过Ajax获取数据. [{ "action": "Buy Flowers", "done": false}, { "action": "Get shoes", "done": false }, { "action": "Call Leona&quo…

一.简单了解一下AngularJS AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中: <script src="Js…

前言 相信原生JS大家都不陌生,至于为什么说原生,是因为在JS的基础上衍生出了很多的框架.有些框架的使用非常广泛,甚至已经达到了媲美原生的地步.在之前的文章中给大家介绍了jQuery这一介绍框架.今天,给大家介绍另一款十分强大的JS框架--AngularJS. 首先,先介绍一下什么是AngularJS: AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.它可通过 <script> 标签添加到 HTML 页面. AngularJS 还可以通过 指…

在使用form.FormController和ngModel.NgModelController之前,先来学习一下怎么一个ng-model-options指令,觉得怎么这个指令挺好用的,我们知道ng-model是可以实现数据的双向绑定,至于双向数据绑定这个概念时必须要清楚的,都是这样的一个过程,view->scope和scope->view,只要双向绑定的element都是走怎么一个过程的,那么这个ng-model-options,就是可以实现对延迟更新.如何触发更新.时区(timezone针…

最近对AngularJs产生了浓厚的学习兴趣,于是便搜罗所有资料,开始学习起来,也希望把学习过程记录下来. 首先学习之前,需要对AngularJs进行个大概的了解: AngularJS[1]  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. AngularJS使用了不同的方法,它尝试去补足H…

前言 上篇大概说了一下指令的应用格式以及创建自定义指令方法,本篇重点介绍一些ng-controller都有哪些小作用. 内容 通过修改控制器部分,修改显示界面. Demo <div ng-app="myApp" ng-controller="myCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type=&…

前言 大概今年春天的时候,自己对这个词产生了兴趣,那会只是简单的查了一下,并没有深入研究过这部分知识块,现在终于开始接触这些东西. 内容 AngularJS在web应用方面是一个非常完美的JavaScript MVC框架.它减少了对界面的DOM操作,而且在不经过后台数据绑定的程度上,实现了数据绑定,刷新的时候是局部刷新实时性还是可观的.AngularJS是由JavaScript和HTML组成的. 这里来说一下AngularJS的核心框架MVC(Model-view-controller),在开发…

本文也同步发表在我的公众号“我的天空” 复选框 复选框只有两个值:true或者false,因此在AngularJS中,一般都是将复选框的ng-model绑定为一个布尔值属性,通过这两个布尔值来决定其勾选状态,以及通过其勾选状态来设置被绑定的属性值为true或false.我们来看以下示例: <body ng-app="myApp" ng-controller="person">     <form ng-submit="submit()&q…

本文也同步发表在我的公众号“我的天空” 控制器 控制器可以说是AngularJS中最重要的部分了!之前的一些示例,除了第一讲的示例以外,我们对于AngularJS的使用都集中在HTML部分,其实AngularJS是一个典型的支持MVC架构的框架,MVC是模型(Model).视图(View).控制(Controller)的缩写,对于HTML来说我们通常将其归于View,既一个系统展示数据的那部分.MVC的核心是将一个系统的数据展示.逻辑控制.数据源完全的分离,使得各部分之间完全没有耦合. 回到An…

本文也同步发表在我的公众号“我的天空” 在我们之前学习的前端代码编写过程中,总是通过HTML与CSS来进行页面布局,而使用JS来控制页面逻辑,因此,我们习惯于在JS中来操作页面元素,如以下代码,我们希望在页面加载完毕后,更改DIV内的内容: <body>     <div id="div"></div>  </body> <script>     document.getElementById("div")…

深入探讨 Scope 作用域 每一个 $scope 都是类 Scope 的一个实例.类 Scope 拥有可以控制 scope 生命周期的方法,提供事件传播的能力,并支持模板渲染. 作用域的层次结构 让我们再来看看这个简单的 HelloCtrl 的例子: var HelloCtrl = function($scope){     $scope.name = 'World'; } HelloCtrl 看起来就跟普通的 JavaScript 构造函数没什么区别,事实上,除了 $scope 这个参数之外…

本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7779384.html 写在前面: 因为最近总结自己之前做过的东西,所以顺便总结了这一篇,要发布文章时,刚好看到手机推送消息“angular5发布啦”啊哈哈哈哈哈哈.我不管我还是要把关于angular1的这篇文章放上来因为还涉及到webpack呢啊哈哈哈哈哈哈哈哈…… Angularjs+webpack实现模拟微信菜单编辑功能 1       环境配置:An…

  在讲正题之前,先说一下有关angular简介方面的信息: 1. angularJS  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVC.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 2. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. 3. AngularJS 通过 指…