为什么要封装呢？angular4自身提供的请求方法是用Observable来实现的。用的是观察者模式，个人认为这用来写请求是非常方便的。 一个项目里会有非常多的不同的请求，但是其实每个请求都会有些共性。比如：每个请求都要传Authorization，比如每个请求都要先判断后台返回的status字段为200时才是请求成功，后台正真返回的数据在data字段里，比如对于错误信息的处理都是一样的......等等。 所以我们需要封装出一个请求，去统一处理这些...
前言 今天来和大家学习一下AngularJS…… AngularJS 通过新的属性和表达式扩展了 HTML。 AngularJS 可以构建一个单一页面应用程序。 AngularJS 学习起来非常简单。 一、AngularJS指令与表达式 【AngularJS常用指令】 1、ng-app:声明Angular所管辖的区域，一般写在body或HTML上，原则上一个页面只有一个。 2、ng-model:把元素值（比如输入域的值）绑定到应用程序的变量中。 eg:<input type="text" ng-model="name"/> 3、ng-bind:把应...
AngularJS 使用基础知识 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合 <ul> <li ng-repeat="person in persons"> {{person.name}} is {{person.age}} years old. </li> </ul>你甚至可以指定输出的顺序： <li ng-repeat="person in persons | orderBy:name">第二 动态绑定之ng-model标签 任何有用户输入，只要是有值的html标签，都可以动态绑定js中的变量， 而且是动态绑定。 <input type="tex...
一、绑定初始化，自动加载 通过绑定来进行angular的初始化，会把js代码侵入到html中。 ng-app是angular的一个指令，代表一个angular应用（也叫模块）。使用ng-app或ng-app=""来标记一个DOM结点，让框架会自动加载。也就是说，ng-app是可以带属性值的。 <body ng-app="myApp"><div ng-controller="myCtrl">{{ hello }}</div><script type="text/javascript">var myModule = angular.module("myApp",[]);myModule.controller("myCtrl...
AngularJS学习第一篇，了解指令、过滤器等相关内容。 指令 AngularJS 指令是扩展的 HTML 属性，带有前缀 ng- 1、 ng-app： 定义了 AngularJS 应用程序的根元素； ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序；<div ng-app="Demo"></div>2、 ng-init： 为 AngularJS 应用程序定义了 初始值； 通常情况下，我们使用一个控制器或模块来代替它；<div ng-app="Demo" ng-init="firstName=John"><p>我的名字是：{{ firs...
1.用AngularJs app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了，首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css（当然是bootstrap的），代码如下： <script src="lib/angular/angular.min.js"></script> <script src="lib/jquery/jquery-1.10.2.min.js"></script> <script src="lib/bootstrap/bootstrap.min.js"></script> <script src="js/app.js"></script> <script src="js/services...
AngularJS ng-src 指令AngularJS 实例添加图片地址: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><div ng-init="myVar = http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg"> <h1>Angular</h1> <img ng-src="{{myVar}}"> </div><p>该实例可以使用原生的 src 输出，但是使用 AngularJS 代码插...
AngularJS ng-srcset 指令AngularJS 实例定义图片的资源地址: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><div ng-init="myVar = http://www.runoob.com/wp-content/uploads/2014/06/angular.jpg"> <h1>Angular</h1> <img ng-srcset="{{myVar}}"> </div><p>该实例可以使用原生的 srcset 输出，但是使用 ...
AngularJS ng-show 指令AngularJS 实例复选框选中时显示部分内容: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="">显示 HTML: <input type="checkbox" ng-model="myVar"><div ng-show="myVar"> <h1>Welcome</h1> <p>Welcome to my home.</p> </div></body> </html>定义和用法ng-show 指令在表达式为 true 时...
AngularJS ng-submit 指令AngularJS 实例表单提交后执行函数: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app="myApp" ng-controller="myCtrl"><form ng-submit="myFunc()"><input type="text"><input type="submit"> </form><p>{{myTxt}}</p><p>以下实例演示了表单提交后 AngularJS 执行行。</p><script> var ...
AngularJS ng-switch 指令根据选中的值显示对应部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""> 我喜欢的网站 <select ng-model="myVar"><option value="runoob">www.runoob.com<option value="google">www.google.com<option value="taobao">www.taobao.com </select><hr> <div ng-switch="myVar"><d...
AngularJS ng-value 指令AngularJS 实例设置输入框的值: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body><div ng-app="myApp" ng-controller="myCtrl"><input ng-value="myVar"></div><script> var app = angular.module(myApp, []); app.controller(myCtrl, function($scope) {$scope.myVar = "Hello World!"; }); </...
AngularJS ng-mousemove 指令AngularJS 实例在鼠标指针在元素上移动时执行表达式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><div ng-mousemove="count = count + 1" ng-init="count=0">在我这移动鼠标!</div><h1>{{count}}</h1><p> 该实例在鼠标从 DIV 元素上移动时，计算变量 "count" 会自动加 1。<...
AngularJS ng-mouseleave 指令AngularJS 实例在鼠标指针离开元素时执行表达式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><div ng-mouseleave="count = count + 1" ng-init="count=0">鼠标从我这移开!</div><h1>{{count}}</h1><p> 该实例在鼠标从 DIV 元素移开时，计算变量 "count" 会自动加 1。</p><...
AngularJS ng-mouseover 指令AngularJS 实例在鼠标指针移动到元素上时执行表达式： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body ng-app=""><div ng-mouseover="count = count + 1" ng-init="count=0">鼠标移动到我这!</div><h1>{{count}}</h1><p>该实例在鼠标移动到 DIV 元素时，计算变量 "count" 会自动加 1。</p>...