JavaScript日记——Angularjs入门指南

本系列博客采用的Angularjs1.3进行开发

要入门Angularjs主要掌握以下概念

1.数据绑定（MVC）
2.scope
3.模块（module）
4.Directive
5.路由
6.依赖注入

数据绑定

首先是HelloWorld的教程

当我们改变input的内容时，model的值也会改变

下面介绍一下数据绑定如何运用在mvc设计模式中

    


    
    

        
,Angular
    

scope

scope是一个POJO，可以叫做作用域，可以继承父作用域的属性和方法，就是说当controller嵌套时，可以使用父controller里的scope的属性和方法
ng-app定义了一个angular模块， 每个模块只有一个$rootScope，只有一个$injector，但可以有多个$scope 。scope有点类似React的store，还有scope中也可以存放方法。

    


    

        
        

            
            Hello {{name}}!
        
        

            

                

                    
                    
                    {{name}} from {{department}}
                
            
        
    

模块化

通常我们为了避免全局变量污染，我们会引入module这个概念，有点类似命名空间
我们把上面MVC的例子改成模块化

    
        
    
    
        

            
{{greeting.text}},Angular
        
    
    
    

Directive

我们可以使用Directive来匹配不同的dom，来显示不同模板，也可以用过这种方式实现view的复用
主要有四种匹配模式
A——匹配属性中含有指定值
C——class中含有指定值
M——一般标签，标签上有注释directive:指定值
E——匹配标签为指定值

Directive除了可以代替指定标签的内容，还可以实现方法或者属性的操作

    


    

        
        LoadData1
    
    

        LoadData2
    
    
    
    

以下例子实现指令的依赖（继承）

    


    

        

            动感超人——力量
        
    
    

        

            动感超人——力量+敏捷
        
    
    

        

            动感超人——力量+敏捷+发光
        
    
    
    
    
    

如果想每一处都使用独立的scope，则要加上scope:{}，不加则默认使用同一个scope，互相影响

scope的绑定有三种方式：@，=，&

    


    

        Ctrl:
        
        

        Directive:
        
    
    
    

如果要传递方法则要使用&

路由

    
      
    
    
        
AngularJS 路由应用
        

            
            
首页
            
电脑
            
打印机
            
其他
        
         
        

        
        
        
    

依赖注入

用过spring的人都知道什么是依赖注入，依赖注入就是弄一个中央的容器，当你需要你就注入
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
1. value
2. factory
3. service
4. provider
5. constant
下面用一个简单的乘方例子来演示

   
      
      
     
   
      
AngularJS 简单应用
      

         
输入一个数字: 
         X2
         
结果: {{result}}
      
      
      
   

Angularjs是一个很优秀且前卫的js库，掌握了它，开发的效率会更加高效，业务逻辑也更加的清晰，而且它吸收了很多流行后端框架的思想，所以后端人员学习起来成本也是相当的低，Angularjs是全栈工程师一个不错的选择