AngularJs笔记（看菜鸟教程整理的）

AngularJs学习笔记

基本定义：

1.ng-app = "" 定义了angularJs的使用范围;

2.ng-init = "变量 = 值;变量 = '值'" 初始化变量的值，有多个变量时，中间用分号隔开；

3.ng-model = "变量" 定义变量名;

4.ng-bind = "变量" 绑定变量名，获取该变量的数据。这里的变量就是第3条的变量名。

但是一般都用双重花括号来获取变量的值，比如：{{变量}};

5.ng-repeat 指令会重复一个 HTML 元素：（可以用于循环遍历数组）

eg:5

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">

<p>使用 ng-repeat 来循环数组</p>

<ul>

<li ng-repeat="x in names">

{{ x }}

</li>

</ul>

</div>

AngularJs指令：是以ng作为前缀的HTML属性。

AngularJs表达式写在双大括号内{{expression}}。

AngularJs表达式把数据绑定到HTML,这与ng-bind 指令作用相同。

AngularJs将在表达式书写的位置"输出"数据。

AngularJS 表达式 与 JavaScript 表达式

类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。

与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。

与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。

与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

注意：

ng-model是用于表单元素的，支持双向绑定。对普通元素无效； <input> 元素 <select> 元素（下拉列表）<textarea> 元素 <button> 元素 HTML5 增加了如下表单元素：<datalist><keygen><output>

ng-bind用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；

当ng-bind和{{}}同时使用时，ng-bind绑定的值覆盖该元素的内容。

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

ng-invalid:未通过验证的表单

ng-valid:布尔型属性，它指示表单是否通过验证。如果表单当前通过验证，他将为true

ng-dirty:布尔值属性，表示用户是否修改了表单。如果为 ture，表示有修改过；false 表示修没有修改过

ng-touched:布尔值属性，表示用户是否和控件进行过交互

ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

$rootscope设置的变量在所有controller里面都是可以直接用{{$root.变量名}}来显示的，当然也可以赋值给$scope.

$rootscope是根作用域，是整个应用程序（ng-app），$scope只作用于本个方法

js中split(),如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

String.split() 执行的操作与 Array.join 执行的操作是相反的。

"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]

"|a|b|c".split("|") //将返回["", "a", "b", "c"]

AngularJS过滤器

currency 格式化数字为货币格式。

{{ 250 | currency }} // 结果：$250.00

{{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00

filter 从数组项中选择一个子集。

// 查找name为iphone的行

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | filter:{'name':'iphone'} }}

lowercase 格式化字符串为小写。

orderBy 根据某个表达式排列数组。

// 根id降序排

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | orderBy:'id':true }}

// 根据id升序排 默认升序false

{{ [{"age": 20,"id": 10,"name": "iphone"},

{"age": 12,"id": 11,"name": "sunm xing"},

{"age": 44,"id": 12,"name": "test abc"}

] | orderBy:'id' }}

uppercase 格式化字符串为大写。

date格式化

{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25

number 格式化（保留小数）

{{149016.1945000 | number:2}}

limitTo 截取

{{"1234567890" | limitTo :6}} // 从前面开始截取6位

{{"1234567890" | limitTo:-4}} // 从后面开始截取4位

Array.prototype.slice.call(arguments);

<div ng-app = "myApp" ng-controller = "myCtrl">

<span>{{myUrl}}<span>

</div>

<script>

angular.module("myApp",[]).controller('myCtrl',function($scope,$location){

$scope.myUrl = $location.absUrl();

});

</script>

$location 服务，它可以返回当前页面的 URL 地址。

$http 是 AngularJS 应用中最常用的服务。 服务向服务器发送请求，应用响应服务器传送过来的数据

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope, $http) {

$http.get("welcome.htm").then(function (response) {

$scope.myWelcome = response.data;

});

});

AngularJS $timeout 服务对应了 JS window.setTimeout 函数。(Timer)

AngularJS $interval 服务对应了 JS window.setInterval 函数。(一直执行)

创建自定义服务

app.service('hexafy', function() {

this.myFunc = function (x) {

return x.toString(16);

}

});

app.controller('myCtrl', function($scope, hexafy) {

$scope.hex = hexafy.myFunc(255);

});

$watch：持续监听数据上的变化，更新界面，如：

<div ng-app="myApp" ng-controller="myCtrl">

<b>请输入姓名：</b><br>

<b>姓：</b><input type="text" ng-model="lastName"><br>

<b>名：</b><input type="text" ng-model="firstName"><br>

<h1>{{ lastName + " " + firstName }}</h1>

<h2>{{ fullName }}</h2>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.lastName = "";

$scope.firstName = "";

//监听lastName的变化，更新fullName

$scope.$watch('lastName', function() {

$scope.fullName = $scope.lastName + " " + $scope.firstName;

});

//监听firstName的变化，更新fullName

$scope.$watch('firstName', function() {

$scope.fullName = $scope.lastName + " " + $scope.firstName;

});

});

</script>

如果通过$watch去监听某变量的变化，最后去更新一个fullName就太麻烦了，还倒不如使用函数的方式，如getFullName()：

$scope.getFullName =function(){ return $scope.lastName + " " + $scope.firstName;}

$http.get('/someUrl', config).then(successCallback, errorCallback);

$http.post('/someUrl', data, config).then(successCallback, errorCallback);

使用 ng-options 创建选择框（使用了数组作为数据源）

在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出，如下实例:

<div ng-app="myApp" ng-controller="myCtrl">

<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">

</select>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.names = ["Google", "Runoob", "Taobao"];

});

</script>

这种是通过ng-repeat方式创建的下拉框

<select>

<option ng-repeat="x in names">{{x}}</option>

</select>

比较：

ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，它有以下优势：

使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。

使用了对象作为数据源：x 为键(key), y 为值(value):

<select ng-model="selectedSite" ng-options="x for (x, y) in sites">

</select>

<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>

表格

<table>

<tr ng-repeat="x in names">

<td>{{ x.Name }}</td>

<td>{{ x.Country }}</td>

</tr>

</table>

style{table tr:nth-child(odd){};} 表格中的奇数行

style{table tr:nth-child(even);} 表格中的偶数行

$index: <td>{{ $index + 1 }}</td>//表格显示序号

<td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>

<tr ng-repeat="x in names" style="{{$even?'background-color: #f1f1f1':'background-color: #ff0000'}}">

允许跨域请求

header("Access-Control-Allow-Origin: *");

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

ng-show 指令隐藏或显示一个 HTML 元素。ng-hide 指令用于隐藏或显示 HTML 元素。

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">我是可见的。</p> 可以是布尔值的表达式

</div>

AngularJS事件

1.ng-click点击事件 所有的操作都是通过Controller来完成的

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="count = count + 1">点我！</button>

<p>{{ count }}</p> //类似ng-model是双向绑定的，类似监听者模式（响应式）

</div>

<script>

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {

$scope.count = 0;

});

</script>

AngularJS表单

HTML控件：input元素，select元素,button元素,textarea元素

input控件使用ng-model指令来实现数据绑定

<input type = "text" ng-model = "firstName">

通过以上代码应用有了一个firstName的属性。它通过ng-model指令来绑定到你的应用

firstName的属性可以在controller中使用：

var app = angular.module('myApp',[]);

app.controller($scope,function(){

$scope.firstName = "Tom";

});

也可以直接通过表达式来使用这个属性

<div ng-app="">

<form>

First Name: <input type="text" ng-model="firstname">

</form>

<h1>你输入的内容为: {{firstname}}</h1>

</div>

Checkbox(复选框),默认是false,未被选中

<form>

Check to show a header:

<input type="checkbox" ng-model="myVar">

</form>

<h1 ng-show="myVar">My Header</h1>

Radio(单选框) myVar 的值可以是 dogs, tuts, 或 cars。

<body ng-app="">

<form>

选择一个选项:

<input type="radio" ng-model="myVar" value="dogs">Dogs

<input type="radio" ng-model="myVar" value="tuts">Tutorials

<input type="radio" ng-model="myVar" value="cars">Cars

</form>

<div ng-switch="myVar">

<div ng-switch-when="dogs">

<h1>Dogs</h1>

<p>Welcome to a world of dogs.</p>

</div>

<div ng-switch-when="tuts">

<h1>Tutorials</h1>

<p>Learn from examples.</p>

</div>

<div ng-switch-when="cars">

<h1>Cars</h1>

<p>Read about cars.</p>

</div>

</div>

<p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p>

</body>

select(下拉框)

<body ng-app="">

<form>

选择一个选项:

<select ng-model="myVar">

<option value="">

<option value="dogs">Dogs

<option value="tuts">Tutorials

<option value="cars">Cars

</select>

</form>

<div ng-switch="myVar">

<div ng-switch-when="dogs">

<h1>Dogs</h1>

<p>Welcome to a world of dogs.</p>

</div>

<div ng-switch-when="tuts">

<h1>Tutorials</h1>

<p>Learn from examples.</p>

</div>

<div ng-switch-when="cars">

<h1>Cars</h1>

<p>Read about cars.</p>

</div>

</div>

<p>ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。</p>

</body>

app.controller('formCtrl', function($scope) {

$scope.master = {firstName: "John", lastName: "Doe"};

$scope.reset = function() {

$scope.user = angular.copy($scope.master);

};

$scope.reset();

});

输入验证 HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

$dirty 表单有填写记录

$valid 字段内容合法的

$invalid 字段内容是非法的

$pristine 表单没有填写记录

<body>

<h2>验证实例</h2>

<form ng-app="myApp" ng-controller="validateCtrl"

name="myForm" novalidate>

<p>用户名:<br>

<input type="text" name="user" ng-model="user" required>

<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

<span ng-show="myForm.user.$error.required">用户名是必须的。</span>

</span>

</p>

<p>邮箱:<br>

<input type="email" name="email" ng-model="email" required>

<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">

<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>

<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>

</span>

</p>

<p>

<input type="submit"

ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||

myForm.email.$dirty && myForm.email.$invalid">

</p>

</form>

<script>

var app = angular.module('myApp', []);

app.controller('validateCtrl', function($scope) {

$scope.user = 'John Doe';

$scope.email = 'john.doe@gmail.com';

});

</script>

</body>

AngularJS API

angular.lowercase() 转换字符串为小写

angular.uppercase() 转换字符串为大写

angular.isString() 判断给定的对象是否为字符串，如果是返回 true。

angular.isNumber() 判断给定的对象是否为数字，如果是返回 true。

使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:

sites.htm 文件代码：

<table>

<tr ng-repeat="x in names">

<td>{{ x.Name }}</td>

<td>{{ x.Url }}</td>

</tr>

</table>

<div ng-app="myApp" ng-controller="sitesCtrl">

<div ng-include="'sites.htm'"></div>

</div>

<script>

var app = angular.module('myApp', []);

app.controller('sitesCtrl', function($scope, $http) {

$http.get("sites.php").then(function (response) {

$scope.names = response.data.records;

});

});

</script>

AngularJS 动画

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

还需在应用中使用模型 ngAnimate：

<body ng-app="ngAnimate">

<style>

.hh {

transition: all linear 0.5s;

background-color: lightblue;

height: 100px;

width: 100%;

position: relative;

top: 0;

left: 0;

}

.ng-hide {

height: 0;

width: 0;

background-color: transparent;

top:-200px;

left: 200px;

}

</style>

<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>

<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>

</head>

<body ng-app="myApp">

<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>

<div class = "hh" ng-hide="myCheck"></div>

<script>

var app = angular.module('myApp', ['ngAnimate']);

</script>

</body>

AngularJS 依赖注入

一句话 --- 没事你不要来找我，有事我会去找你。

1.一个对别人有依赖的东西，它想要单独测试，就需要在依赖项齐备的情况下进行。如果我们在运行时注入，就可以减少这种依赖

2.参数由定义方决定

3.与import还不完全一样

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

value

factory

service

provider

constant

1.Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

// 定义一个模块

var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据

mainApp.value("defaultInput", 5);

...

// 将 "defaultInput" 注入到控制器

mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {

$scope.number = defaultInput;

});

2.factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建。

通常我们使用 factory 函数来计算或返回值。

// 定义一个模块

var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers

mainApp.factory('MathService', function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b

}

return factory;

});

// 在 service 中注入 factory "MathService"

mainApp.service('CalcService', function(MathService){

this.square = function(a) {

return MathService.multiply(a,a);

}

});

...

3.provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。

Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

// 定义一个模块

var mainApp = angular.module("mainApp", []);

...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积

mainApp.config(function($provide) {

$provide.provider('MathService', function() {

this.$get = function() {

var factory = {};

factory.multiply = function(a, b) {

return a * b;

}

return factory;

};

});

});

4.constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

mainApp.constant("configParam", "constant value");

练习：自定义directive（指令）

元素

<first/>

<second/>

angular.module('MyApp',[])

.directive('first',first)

.controller('Con',['$scope',func1]);

function first(){

var directive = {

restrict:'ACE',

template:'this is the it-first directive',

};

return directive;

};

fucntion func1($scope){

$scope.name = 'alice';

}

等价于 ：

angular.module('myApp',[]).directive('first',[function(){

return {

restrict:'AE',

template:'second directive',

link:function(){

console.log("this is a link");

},

controller:function($scope,$element,$attrs){

console.log("this is a con");

}

};

}]).controller('Con1',['$scope',function($scope){

$scope.name = "alicehhh";

}]);