浅谈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。
引用方法很简单，如下所示：

如上引用，一个AngularJS应用程序初始化就完成了并标记了作用域，也就是div元素就是AngularJS应用程序的”所有者”，在它里面的指令也就会被AngularJS编译器所编译、解析了。

ng-init

ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器或模块来代替它，后面我们会介绍有关控制器和模块的知识。
如下所示，我们为应用程序变量name赋定初始值。

我们不仅可以赋值字符串，也可以赋值为数字、数组、对象，而且可以为多个变量赋初始值，如下所示：

ng-model

在AngularJS中，只需要使用ng-model指令就可以把应用程序数据绑定到HTML元素，实现model和view的双向绑定。
如下示例，使用ng-model指令对数据进行绑定。

请输入任意值：
你输入的为： {{ name }}

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指令绑定把应用程序数据。

    请输入一个名字：
    Hello 

PS：使用花括号语法时，因为浏览器需要首先加载页面，渲染它，然后AngularJS才能把它解析成你期望看到的内容，所以对于首个页面中的数据绑定操作，建议采用ng-bind，以避免其未被渲染的模板被用户看到。

ng-click

AngularJS也有自己的HTML事件指令，比如说通过ng-click定义一个AngularJS单击事件。
对按钮、链接等，我们都可以用ng-click指令属性来实现绑定，如下简单示例：

    隐藏/显示
    

        请输入一个名字：
        Hello  
    

PS：ng-hide=“true”，设置HTML元素不可见。
ng-click指令将DOM元素的鼠标点击事件(即mousedown)绑定到一个方法上，当浏览器在该DOM元素上鼠标触发点击事件时，AngularJS就会调用相应的方法。

ng-repeat

ng-repeat指令，遍历一个数据集合中的每个数据元素，并且加载HTML模版把数据渲染出来，当我们要向HTML容器节点中添加更多类似DOM元素的时候，使用ng-repeat是再好不过了。
ng-repeat指令对于集合中(数组中)的每一项都会渲染一次HTML元素。
例1:

    

        
{{x}}
    

例2:

    

        

            
{{key}}
            
{{value}}
        
    

ng-class

ng-class是AngularJS预设的一个指令，用于动态自定义dom元素的css class name

    
    
    
    


    
    
    

        {{name1 +” “+ name2}}
    

ng-include

ng-include就是将多个页面的公共页面提取出来，如header.html，footer.html等，在每个页面用

来引入。
**注意: **
必须用web容器打开站点才能成功，用本地文件的模式访问会报错
ng-include的值是如果要写为文件名的话需要加单引号，否则会被当作一个变量来处理。

自定义指令

控制器scope

AngularJS控制器控制AngularJS应用程序的数据，是常规的JavaScript对象。
ng-controller指令就是用来定义应用程序控制器的，并且同时创建了一个新的作用域关联到相应的DOM元素上。
所谓作用域就是一个指向应用模型的对象，它是表达式的执行环境，作用域有层次结构，这个层次和相应的DOM几乎是一样的，作用域能监控表达式和传递事件并且可以从父作用域继承属性。
每一个AngularJS应用都有一个绝对的根作用域。但也可能有多个子作用域。 一个应用可以有多个作用域，因为有一些指令会生成新的子作用域，当新作用域被创建的时候，他们会被当成子作用域添加到父作用域下，这使得作用域会变成一个和相应DOM结构一个的树状结构。

控制器上的属性

现在我们就用ng-controller指令来创建一个简单的控制器定义，如下所示：

请输入一个名字： 
Hello  
    

如上所述，我们通过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，我们就可以操作作用域内任何我们想要获取的对象数据。

控制器上的方法

控制器不仅声明属性也可以声明方法，如下所示：

     名称:
     
     打招呼
     

     {{greeting}}

注意事项

不要试图去复用controller,一个控制器一般只负责一小块视图
不要在controller中操作DOM，这不是控制器的职责，是指令的职责。
不要在controller里做数据格式化，ng有很好用的过滤器实现此功能。
不要在controller里面做数据过滤操作，ng有$filter服务
一般来说，controller是不会互相调用的，控制器这间的交互是通过事件进行的。

创建指令

指令定义对象的常用属性如下：
template : string
使用template指定的HTML标记替换指令内容（或指令自身）
restrict : string
用来限定指令在HTML模板中出现的位置。
replace : true|false
使用这个属性指明template的替换方式。

AngularJS的服务

AngularJS提供了一些功能的封装，但是当你试图通过全局对象angularJS去 访问这些功能时，却发现与以往遇到的库大不相同。
$http
比如，在jQuery中，我们知道它的API通过一个全局对象：$ 暴露出来，当你需要 进行ajax调用时，使用$.ajax()就可以了。这样的API很符合思维的预期。
AngularJS也暴露了一个全局对象：angularJS，也对ajax调用进行封装提供了一个 $http对象，但是，但是，当你试图沿用旧经验访问angular.$http时，发现不是 那么回事！在angularJS中是以一个参数的形式传递到控制器中，如果要使用它，需要在 controller 中定义。

$http服务

定时器

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


    
        
        
    
    
        

            
            

                
{{item}}
            
        
    
    
    
    

AngularJS过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。
currency——格式化数字为货币格式。
filter——从数组项中选择一个子集。
lowercase——格式化字符串为小写。
orderBy——根据某个表达式排列数组。
uppercase——格式化字符串为大写。
例1(格式化数字为货币格式):

    

        相乘
        
        

        
        结果为：{{myFn() | currency}}
    

例2(字体大小转换):

    

        
        {{‘HelloWorld’ | uppercase}}
    
 

例3(筛选):

    搜索：
    

        
{{x}}
    
 

例4(筛选加排序):

    

        

            
{{x}}
        
    
 

原文链接