AngularJS：Http

AngularJS：何时应该使用Directive、Controller、Service？【新手必看】

(这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制器) Service (服务) 下面我们逐个来看这些概念,研究一下为什么它们会像当初设计的那样强大,同时研究一下为什么我们要以那样的方式去使用它们.我们从Service开始. SERVICES(服…

AngularJS：何时应该使用Directive、Controller、Service？

AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制器) Service (服务) 下面我们逐个来看这些概念,研究一下为什么它们会像当初设计的那样强大,同时…

Meteor+AngularJS：超快速Web开发

为了更好地描述Meteor和AngularJS为什么值得一谈,我先从个人角度来回顾一下这三年来WEB开发的变化: 三年前,我已经开始尝试前后端分离,后端使用php的轻量业务逻辑框架.但当时前端还没有成熟且广泛流行的业务逻辑框架.所以在做产品开发时我仍然选用drupal等整体开发框架.开发时常常需要在javascript和php间切换,同时还要自己搞定数据库.此时的开发模型图是这样(红色箭头和红色块都表示工作重灾区): 随着对用户体验的追求,我开始把业务逻辑往前端推移,于是…

AngularJS：如何使用自定义指令来取代ng-repeat

引言本文主要介绍了另一种即具有与ng-repeat 一样处理大量数据的绑定的功能,又具有超高的性能. 对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些. 也别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某…

AngularJs：String类型和JSON相互转换

最近一周做了一个页面,制作的过程中遇到各种问题,从中可以看出本人的js基础还不够扎实,angularjs也只是刚入门的水平,现在将制作过程中遇到的问题一一汇总,方便以后查阅. 一.String类型和JSON相互转换 1.使用ng来转换 angularjs中有fromJson和toJson两个方法用于处理json和string类型之间的转换 var json = '{"name":"liSi", "password":"321"…

angularJs：双向数据绑定

示例1 <!DOCTYPE html> <html ng-app> <head> <meta charset="UTF-8" /> <title>AngularJS的特性之:双向绑定</title>  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0…

跟我学AngularJS：全局变量设置之value vs constant vs rootscope vs 服务[转]

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文要讲讲Angular中value vs. constant以及全局变量的设置本教程使用AngularJS版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ AngualrJS中设置全局变量,即每个Controller中都可以访问…

AngularJS：表格

ylbtech-AngularJS:表格 1.返回顶部 1. AngularJS 表格 ng-repeat 指令可以完美的显示表格. 在表格中显示数据使用 angular 显示表格是非常简单的: AngularJS 实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/angular.js/…

AngularJS：Select

ylbtech-AngularJS:Select 1.返回顶部 1. AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. 使用 ng-options 创建选择框在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如下实例: 实例 <div ng-app="myApp" ng-controller="myCtrl"> <select…

ylbtech-AngularJS:Http 1.返回顶部 1. AngularJS XMLHttpRequest $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 使用格式: // 简单的 GET 请求,可以改为 POST $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback…

AngularJS：Service

ylbtech-AngularJS:Service 1.返回顶部 1. AngularJS 服务(Service) AngularJS 中你可以创建自己的服务,或使用内建服务. 什么是服务? 在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用. AngularJS 内建了30 多个服务. 有个 $location 服务,它可以返回当前页面的 URL 地址. 实例 var app = angular.module('myApp', []); app.cont…

AngularJS：过滤器

ylbtech-AngularJS:过滤器 1.返回顶部 1. AngularJS 过滤器过滤器可以使用一个管道字符(|)添加到表达式和指令中. AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器描述 currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase 格式化字符串为小写. orderBy 根据某个表达式排列数组. uppercase 格式化字符串为大写. 表达式中添加过滤器过滤器可以通过一个管道字符(|)和一个…

AngularJS：控制器

ylbtech-AngularJS:控制器 1.返回顶部 1. AngularJS 控制器 AngularJS 控制器控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数创建. AngularJS 实例 <div ng-app…

AngularJS：Scope（作用域）

ylbtech-AngularJS:Scope(作用域) 1.返回顶部 1. AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS 实例控制器中的属性对应了视图上的属性: <div ng-ap…

AngularJS：模型

ylbtech-AngularJS:模型 1.返回顶部 1. AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. ng-model 指令 ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定. AngularJS 实例 <div ng-app="myApp" ng-controller="myCtrl"> 名字: <…

AngularJS：指令

ylbtech-AngularJS:指令 1.返回顶部 1. AngularJS 指令 AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令. AngularJS 指令 AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定…

AngularJS：表达式

ylbtech-AngularJS:表达式 1.返回顶部 1. AngularJS 表达式 AngularJS 使用表达式把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙. AngularJS 将在表达式书写的位置"输出"数据. AngularJS 表达式很像 JavaScript 表达式:它们可以包含文字.…

AngularJS：简介

ylbtech-AngularJS:简介 1.返回顶部 1. AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScrip…

AngularJS：教程

ylbtech-AngularJS:教程 1.返回顶部 1. AngularJS 教程 AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). AngularJS 学习起来非常简单. 现在开始学习 AngularJS! 每个章节都有相应的实例在每个章节中,您可以在线编辑实例,然后点击按钮查看结果. AngularJS 实例 <!DOCTYPE html> <html&g…

AngularJS：表单

ylbtech-AngularJS:表单 1.返回顶部 1. AngularJS 表单 AngularJS 表单是输入控件的集合. HTML 控件以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素数据绑定 Input 控件使用 ng-model 指令来实现数据绑定. <input type="text" ng-model="firstname"> 通过以上代码应用…

AngularJS：模块

ylbtech-AngularJS:模块 1.返回顶部 1. AngularJS 模块模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块你可以通过 AngularJS 的 angular.module 函数来创建模块: <div ng-app="myApp">...</div> <script> var app = angular.module("myApp"…

AngularJS：事件

ylbtech-AngularJS:事件 1.返回顶部 1. AngularJS 事件 AngularJS 有自己的 HTML 事件指令. ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. AngularJS 实例 <div ng-app="" ng-controller="myCtrl"> <button ng-click="count = count + 1">点我!</but…

AngularJS：HTML DOM

ylbtech-AngularJS:HTML DOM 1.返回顶部 1. AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. AngularJS 实例 <div ng-app="" ng-init="mySwitch=true"> <p> <butto…

AngularJS：SQL

ylbtech-AngularJS:SQL 1.返回顶部 1. AngularJS SQL 在前面章节中的代码也可以用于读取数据库中的数据. 使用 PHP 从 MySQL 中获取数据 AngularJS 实例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.…

AngularJS：参考手册

ylbtech-AngularJS:参考手册 1.返回顶部 1. AngularJS 参考手册 AngularJS 指令本教程用到的 AngularJS 指令 : 指令描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符 ng-bind-template 规定要使用模板替换的文本内容 ng-blur 规定 blur 事件的行为 n…

AngularJS：实例

ylbtech-AngularJS:实例 1.返回顶部 1. AngularJS 实例实例您可以在线编辑实例,然后点击按钮查看结果. AngularJS 实例 <div ng-app=""> <p>名字 : <input type="text" ng-model="name"></p> <h1>Hello {{name}}</h1> </div> 尝试一下 »…

AngularJS：应用

ylbtech-AngularJS:应用 1.返回顶部 1. AngularJS 应用现在是时候创建一个真正的 AngularJS 单页 Web 应用(single page web application,SPA)了. AngularJS 应用实例您已经学习了足够多关于 AngularJS 的知识,现在可以开始创建您的第一个 AngularJS 应用程序: 我的笔记保存清除剩余字数: 100 应用程序讲解 AngularJS 实例 <html ng-app="myNoteApp…

AngularJS：路由

ylbtech-AngularJS:路由 1.返回顶部 1. AngularJS 路由本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记实现,例如: htt…

AngularJS：依赖注入

ylbtech-AngularJS:依赖注入 1.返回顶部 1. AngularJS 依赖注入什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或者通过引用传递)到一个独立的对象(或客户端)中,然后成为了该客户端状态的一部分. 该模式分离了客户端依赖本身行为的创建,这使得程序设计变得松耦合,并遵循了依赖反转和单一职责原则.与服务定位器模式形成直接对比的是,它允许客户端了解客户端…

AngularJS：动画

ylbtech-AngularJS:动画 1.返回顶部 1. AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script> 还需在应用中使用模型 ngAn…

【AngularJS：Http】的更多相关文章