AngularJS实例入门

阅读更多

AngularJS ：Google的前端JS框架。

版本： v1.2.16

(1)基本构造

  
    
    
    
    
  
  
    
    

      
      
{{message}}
      
{{5 * 3}}
    
  

(2)输出数据

  
    
    
    
    
  
  
    

      
{{simple}}
      

      
    
  

(3)显示/隐藏

  
    
    
    
  
  
    

      
      
 Visible 
      
 Invisible 
    
  

(4)表单校验

  
    
    
    
    
  
  
    

      
      Required
      Too long！

      
      Required
      Too short！
    
  

(5)表单

  
    
    
    
    
  
  
    

      
      
      
      HOGE
      FUGA
      
        Foo
        Bar
      
      
      
你输入了： {{text}}
    
  

(6)事件监听

  
    
    
    
    
  
  
    

      Button
      
{{message}}
    
  

(7)循环输出

  
    
    
    
    
  
  
    

      
      

        {{item.key}} : {{item.value}}
      
    
  

(8)循环输出（顺位）

  
    
    
    
    
  
  
    

      
      

      {{$index + 1}} {{item.key}} : {{item.value}}
      
    
  

(9)循环输出（操作item）

  
    
    
    
    
  
  
    

      

      {{$index + 1}} {{item.key}} : {{item.value}} : {{item.score}}
      +1
      
    
  

(10)设置CSS类

  
    
    
    
    
    
  
  
    

      
      
hoge
      
fuga
      
piyo
    
  

(11)给src/href绑数据

  
    
    
    
    
  
  
    
    
    link
  

(12)修改Model同时更新view显示

  
    
    
    
    
  
  
    
{{message}}
    change!!
  

(13)通过$watch监视数据的变化

  
    
    
    
    
  
  
      hoge : 

      fuga : 

      
总计 : {{sum}}
  

(14)定义Module

  
    
    
    
    
  
  
    
{{message}}
  

(15)注入service实例

  
    
    
    
    
  
  
    
{{message}}
  

(16)实例化复杂的Service

  
    
    
    
    
  
  
    
{{message}}
  

(17)Module的常用方法

(18)过滤器

  
    
    
    
    
  
  
      
      
{{money | currency}}

      
      
{{array1 | filter:"g" | json}}
      
{{array2 | filter:"h" | json}}

      
      

        

          {{physicist.firstName}} {{physicist.lastName}}
        
      

      
      
{{[1, 2, 3, 4, 5] | filter:isEvenNumber}}

      
      
{{["a", "A", "ab", "c"] | filter:"a":true}}
      
{{["a", "A", "ab", "c"] | filter:"a":false}}
      
{{["a", "A", "ab", "c"] | filter:"a":contains}}

      
      
{{1000 | currency:"￥"}}

      
{{1000 | number:3}}

      
{{"HOGE" | lowercase}}
      
{{"fuga" | uppercase}}

      
{{date | date:"yyyy/MM/dd HH:mm:ss.sss"}}

      
      

        

          {{value.name}}({{value.age}})({{value.height}} cm)
        
      
  

(19)自定义过滤器

  
    
    
    
    
  
  
      
{{"hoge" | myFilter:"<":">"}}
  

(20)JS代码中使用过滤器

  
    
    
    
    
  
  
  {{str}}
  

(21)自定义指令

  
    
    
    
    
  
  
      
some string
  

(22)指令名的各种使用方法

  
    
    
    
    
  
  
    
    
some string
    
some string
    
some string
    
some string
    
some string
    
some string
    
some string
    
some string
    
some string
  

(23)指令的形式

(24)替换指令的DOM元素

(25)嵌入式模板

(26)独立模板文件

message = {{message}}

(27)标签内元素嵌入模板

  
    
    
    
    
  
  
    
hoge
  

(28)解析指令前的处理

  
    
    
    
    
  
  
    

        
one
        
two
        
three
    
  

(29)compile只能被执行一次

(30)link可以被执行多次

(31)同时使用compile和link

(32)指令的默认scope

(33)指令自己的scope（继承自父元素）

(34)指令自己的scope（和父元素无关）

(35)指令自己的scope（和父元素无关）-省略属性名

(36)标签内多个指令间的调用

(37)操作URL

(38)setTimeOut处理

(39)日志处理

(40)捕获异常

AngularJS相关书籍：


参考：
http://www.angularjshub.com/
https://www.ng-book.com/
http://qiita.com/opengl-8080/items/2fe0a20c314b1c824cc5

• 
• 大小: 4.4 KB

• 
• 大小: 4 KB

• 
• 大小: 3.7 KB

• 
• 大小: 3.9 KB

• 
• 大小: 4.6 KB

• 
• 大小: 3.8 KB

• 
• 大小: 4 KB

• 
• 大小: 4.1 KB

• 
• 大小: 4.6 KB

• 
• 大小: 5.5 KB

• 
• 大小: 6.6 KB

• 
• 大小: 5.2 KB

• 
• 大小: 4.3 KB

• 
• 大小: 3.8 KB

• 
• 大小: 4.2 KB

• 
• 大小: 6.1 KB

• 
• 大小: 10.2 KB

• 
• 大小: 10 KB

• 
• 大小: 4 KB

• 
• 大小: 3.7 KB

• 
• 大小: 4.1 KB

• 
• 大小: 5.5 KB

• 
• 大小: 4.6 KB

• 
• 大小: 12.2 KB

• 
• 大小: 3.6 KB

• 
• 大小: 4.3 KB

• 
• 大小: 3.8 KB

• 
• 大小: 8.3 KB

• 
• 大小: 8.3 KB

• 
• 大小: 8.5 KB

• 
• 大小: 8.5 KB

• 
• 大小: 8.9 KB

• 
• 大小: 10 KB

• 
• 大小: 10 KB

• 
• 大小: 8.3 KB

• 
• 大小: 10.2 KB

• 
• 大小: 8.4 KB

• 
• 大小: 8.7 KB

• 
• 大小: 11.9 KB

• 
• 大小: 3.8 KB

• angularjs-sample1.rar (59.4 KB)
• 下载次数: 6

• angularjs-sample2.rar (41.4 KB)
• 下载次数: 5

• 
• 大小: 114.5 KB

• AngularJS-_Novice_to_Ninja.rar (2.8 MB)
• 下载次数: 1

• Pro_AngularJS.rar (7.3 MB)
• 下载次数: 2

• AngularJS_Interview_Questions_and_Answers.zip (1.6 MB)
• 下载次数: 2

• AngularCheatSheet-DNCMagazine.rar (1.3 MB)
• 下载次数: 0

• 查看图片附件