浅谈AngularJS
个人博客搭建完成，欢迎大家来访问哦
黎默丶lymoo的博客
博主最近了解学习了一下angularJS，记录一下心得给大家分享一下~
什么是AngularJS
AngularJS是一个为动态WEB应用设计的结构框架，提供给大家一种新的开发应用方式，这种方式可以让你扩展HTML的语法，以弥补在构建动态WEB应用时静态文本的不足，从而在WEB应用程序中使用HTML声明动态内容。
AngularJS有5个主要核心特性
双向数据绑定
实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。
模板
在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AngularJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。
MVVM
吸收了传统的MVC设计模式但又不是传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。
依赖注入
AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
指令
可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。
AngularJS的特点
前后端分离，后端只需提供数据接口，路由，模板渲染等都在前端完成
html和js分离，展示和逻辑分离
减少JS代码，减少DOM元素查找，事件绑定等代码
适合API开发
AngularJS的一些简单使用方式
首先在页面引入angular.js文件！
AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”，是用来扩展浏览器能力的技术之一，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行，这使得指令可以为DOM指定行为，或者改变它。
AngularJS通过称为指令的新属性来扩展的HTML，带有前缀ng-，我们也可以称之为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。
AngularJS指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”，它本质上只是一个当编译器编译到相关DOM时需要执行的函数，可以写在元素的名称里，属性里，css类名里，注释里。
当浏览器启动、开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样被解析，也就是说当一个Angular.js应用启动，AngularJS编译器就会遍历DOM树来解析HTML，寻找这些指令属性函数，在一个DOM元素上找到一个或多个这样的指令属性函数，它们就会被收集起来、排序，然后按照优先级顺序被执行。
Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。
ng-app
ng-app指令来标明一个AngularJS应用程序，并通过AngularJS完成自动初始化应用和标记应用根作用域，同时载入和指令内容相关的模块，并通过拥有ng-app指令的标签为根节点开始编译其中的DOM。
引用方法很简单，如下所示：
<div ng-app>
div>如上引用，一个AngularJS应用程序初始化就完成了并标记了作用域，也就是div元素就是AngularJS应用程序的”所有者”，在它里面的指令也就会被AngularJS编译器所编译、解析了。
ng-init
ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器或模块来代替它，后面我们会介绍有关控制器和模块的知识。
如下所示，我们为应用程序变量name赋定初始值。
<div ng-app=“” ng-init=“name=‘zhangsan’”>
div>我们不仅可以赋值字符串，也可以赋值为数字、数组、对象，而且可以为多个变量赋初始值，如下所示：
<div ng-app=“” ng-init=“width=3;length=5”>
div>ng-model
在AngularJS中，只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。
如下示例，使用ng-model指令对数据进行绑定。
<div ng-app=“”>
请输入任意值：<input type=“text” ng-model=“name”>
你输入的为： {{ name }}
div>ng-model把相关处理事件绑定到指定标签上，这样我们就可以不用在手工处理相关事件(比如change等)的条件下完成对数据的展现需求。
以上介绍了ng-model的单向绑定(view->model)后面控制器我们会用到它的双向绑定功能。
ng-model原理
angularJS加载完成之后会启动，首先找 ng-app指令
找到后认为ng-app里面的所有的内容都归angularJS来管
找子层标签里所有的指令，然后就可以找到ng-model
找到后会生成数据模型，然后挂在根作用域上面。
然后下面所有的标签都可以读取ng-model的值。
ng-bind
指令ng-bind和AngularJS表达式有异曲同工之妙，但不同之处就在于ng-bind是在angularJS解析渲染完毕后才将数据显示出来的。
如下使用ng-bind指令绑定把应用程序数据。
<div ng-app=“”>
请输入一个名字：<input type=“text” ng-model=“name”>
Hello <span ng-bind=“name”>span>
div>PS：使用花括号语法时，因为浏览器需要首先加载页面，渲染它，然后AngularJS才能把它解析成你期望看到的内容，所以对于首个页面中的数据绑定操作，建议采用ng-bind，以避免其未被渲染的模板被用户看到。
ng-click
AngularJS也有自己的HTML事件指令，比如说通过ng-click定义一个AngularJS单击事件。
对按钮、链接等，我们都可以用ng-click指令属性来实现绑定，如下简单示例：
<div ng-app=“” ng-init=“click=false”>
<button ng-click=“click= !click”>隐藏/显示button>
<div ng-hide=“click”>
请输入一个名字：<input type=“text” ng-model=“name”>
Hello <span ng-bind=“name”>span>
div>
div>PS：ng-hide=“true”，设置HTML元素不可见。
ng-click指令将DOM元素的鼠标点击事件(即mousedown)绑定到一个方法上，当浏览器在该DOM元素上鼠标触发点击事件时，AngularJS就会调用相应的方法。
ng-repeat
ng-repeat指令，遍历一个数据集合中的每个数据元素，并且加载HTML模版把数据渲染出来，当我们要向HTML容器节点中添加更多类似DOM元素的时候，使用ng-repeat是再好不过了。
ng-repeat指令对于集合中(数组中)的每一项都会渲染一次HTML元素。
例1:
<body ng-app=“” ng-init=“arr=[‘3’,’5’,’9’]”>
<ul>
<li ng-repeat=“x in arr”>{{x}}li>
ul>
body>例2:
<body ng-app=“” ng-init=“obj={‘user’:’zhangsan’,’pass’:’12345’,’sex’:’man’}”>
<table border=“1”>
<tr ng-repeat=“(key,value) in obj”>
<td>{{key}}td>
<td>{{value}}td>
tr>
table>
body>ng-class
ng-class是AngularJS预设的一个指令，用于动态自定义dom元素的css class name
<head>
<meta charset=“utf-8”>
<title>title>
<style type=“text/css”>
.active{
color: red;
}
.inactive{
color: green;
}
style>
<script src=“angular.min.js” type=“text/javascript” charset=“utf-8”>script>
head>
<body ng-app=“” ng-init=“isActive=false”>
<input type=“text” ng-model=“name1” />
<input type=“text” ng-model=“name2” />
<div ng-class=“{true:’active’,false:’inactive’}[isActive]”>
{{name1 +” “+ name2}}
div>
body>ng-include
ng-include就是将多个页面的公共页面提取出来，如header.html，footer.html等，在每个页面用
<div ng-include=“’header.html’”>div>来引入。
注意:
必须用web容器打开站点才能成功，用本地文件的模式访问会报错
ng-include的值是如果要写为文件名的话需要加单引号，否则会被当作一个变量来处理。
自定义指令
控制器scope
AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。
ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。
所谓作用域就是一个指向应用模型的对象，它是表达式的执行环境，作用域有层次结构，这个层次和相应的DOM几乎是一样的，作用域能监控表达式和传递事件并且可以从父作用域继承属性。
每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域，因为有一些指令会生成新的子作用域，当新作用域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域会变成一个和相应DOM结构一个的树状结构。
控制器上的属性
现在我们就用ng-controller指令来创建一个简单的控制器定义，如下所示：
<div ng-app=“” ng-controller=“MyController”>
请输入一个名字：<input type=“text” ng-model=“person.name”>
Hello <span ng-bind=“person.name”>span>
div>
<script>
function MyController ($scope) {
$scope.person = {
name: “zhangsan”
};
}
script>如上所述，我们通过ng-controller指令创建了一个JavaScript对象 —— MyController并带有name属性，那参数scope是什么呢，代表什么意思呢。现在我们就来解答MyController对象参数——scope。
scope就是把一个DOM元素连结到控制器上的对象，它提供一个绑定到DOM元素(以及其子元素)上的执行上下文。它也是一个JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。要明确创建一个scope对象，我们就要给DOM元素安上一个controller对象，使用的是ng-controller 指令属性。
所有scope都遵循原型继承，这意味着它们都能访问父scope们,对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父scope上去找，如果在父scope上也没找到，就会继续向上回溯，一直到rootScope上，这个rootScope是最顶级的scope，它对应着含有 ng-app指令属性的那个DOM元素，也就是说根作用域关联的DOM就是ng-app指令定义的地方。
也就是说，拥有了$scope，我们就可以操作作用域内任何我们想要获取的对象数据。
控制器上的方法
控制器不仅声明属性也可以声明方法，如下所示：
<div ng-app=“” ng-controller=“MyController”>
名称:
<input type=“text” ng-model=“username”>
<button ng-click=“sayHello()”>打招呼button>
<hr>
{{greeting}}
div>
<script>
function MyController($scope) {
$scope.username = ‘zhangsan’;
$scope.sayHello = function() {
$scope.greeting= ‘Hello ‘ + $scope.username + ‘!’;
};
}
script>注意事项
不要试图去复用controller,一个控制器一般只负责一小块视图
不要在controller中操作DOM，这不是控制器的职责，是指令的职责。
不要在controller里做数据格式化，ng有很好用的过滤器实现此功能。
不要在controller里面做数据过滤操作，ng有$filter服务
一般来说，controller是不会互相调用的，控制器这间的交互是通过事件进行的。
创建指令
指令定义对象的常用属性如下：
template : string
使用template指定的HTML标记替换指令内容（或指令自身）
restrict : string
用来限定指令在HTML模板中出现的位置。
replace : true|false
使用这个属性指明template的替换方式。
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript" src="angular.min.js">script>
head>
<body ng-controller="testController">
<text-directive>text-directive>
body>AngularJS的服务
AngularJS提供了一些功能的封装，但是当你试图通过全局对象angularJS去 访问这些功能时，却发现与以往遇到的库大不相同。
http比如，在jQuery中，我们知道它的API通过一个全局对象： 暴露出来，当你需要 进行ajax调用时，使用.ajax()就可以了。这样的API很符合思维的预期。AngularJS也暴露了一个全局对象：angularJS，也对ajax调用进行封装提供了一个http对象，但是，但是，当你试图沿用旧经验访问angular.$http时，发现不是 那么回事！在angularJS中是以一个参数的形式传递到控制器中，如果要使用它，需要在 controller 中定义。
$http服务
<head>
<meta charset="utf-8">
<title>title>
<script type="text/javascript" src="angular.min.js">script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js">script>
head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<span ng-bind-html="content">span>
div>
body>
<script type="text/javascript">
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function ($scope, $http) {
$http.get("content.html").success(function (res) {
$scope.content = res;
})
});
script>定时器
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$timeout){
$timeout(function (){
alert(‘a’);
},2000);
});var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope,$interval){
//循环定时器
$interval(function (){
alert(‘a’);
},2000);
});
## 模仿百度搜索功能
```html
<html>
<head>
<meta charset="utf-8">
<title>Titletitle>
head>
<body>
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="wd" ng-change="change()">
<ul>
<li ng-repeat="item in query">{{item}}li>
ul>
div>
body>
<script type="text/javascript" src="angular.js">script>
<script type="text/javascript" src="angular-sanitize.js">script>
<script>
var app = angular.module("myApp", ["ngSanitize"]);
function myControllerCb ($scope, $http) {
$scope.wd = "";
$scope.change = function () {
$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+$scope.wd+"&cb=JSON_CALLBACK").then(function (res) {
console.log(res.data);
$scope.query = res.data.s;
});
}
}
app.controller("myController", myControllerCb);
script>
html>
<div class="se-preview-section-delimiter">div>
AngularJS过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。
currency——格式化数字为货币格式。
filter——从数组项中选择一个子集。
lowercase——格式化字符串为小写。
orderBy——根据某个表达式排列数组。
uppercase——格式化字符串为大写。
例1(格式化数字为货币格式):
<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<span>相乘span>
<input type=“text” ng-model=“num1” />
<input type=“text” ng-model=“num2” /><br />
<!—currency:”￥” 中文—>
结果为：{{myFn() | currency}}
div>
body>
<script type="text/javascript">
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope){
$scope.num1=5;
$scope.num2=10;
$scope.myFn = function (){
return $scope.num1*$scope.num2;
}
});
script>
<div class="se-preview-section-delimiter">div>
例2(字体大小转换):
<body ng-app=“”>
<div>
<!—{{‘HelloWorld’ | lowercase}}—>
{{‘HelloWorld’ | uppercase}}
div>
body>
<div class="se-preview-section-delimiter">div>
例3(筛选):
<body ng-app=“” ng-init=“arr=[‘tangcaiye’,’zhangsan’,’lisi’]”>
搜索：<input type=“text” ng-model=“name” />
<ul>
<li ng-repeat=“x in arr | filter:name”>{{x}}li>
ul>
body>
<div class="se-preview-section-delimiter">div>
例4(筛选加排序):
<body ng-app=“myApp”>
<div ng-controller=“myCtrl”>
<ul>
<li ng-repeat=“x in friends |filter:’a’ | orderBy:order:true”>{{x}}li>
ul>
div>
body>
<script type=“text/javascript”>
var app = angular.module(“myApp”,[]);
app.controller(“myCtrl”,function ($scope){
$scope.friends = [{name:’John’, phone:’555-1212’, age:21},
{name:’Mary’, phone:’555-9876’, age:19},
{name:’Mike’, phone:’555-4321’, age:10},
{name:’Adam’, phone:’555-5678’, age:35},
{name:’Julie’, phone:’555-8765’, age:29}];
$scope.order=“phone”;
});
script>原文链接