月度归档： 2015年2月

AngularJS:入门笔记

介绍

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。AngularJS百度百科

入门

可以使用下面这个应用开始AngularJS的第一步.

1
2
3
4
5
6
7
8
9
10
11
<!doctype html>
<html ng-app>
    <head>
        <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
    </head>
    <body>
        Your name: <input type="text" ng-model="yourname" placeholder="World">
        <hr>
        Hello {{yourname || 'World'}}!
    </body>
</html>

AngularJS
image-2248

一些常用的命令

ng-app 指令定义一个AngularJS应用程序[一个页面可包含多个]。

ng-model  指定把元素值（比如输入框的值）绑定到应用程序。

ng-bind  指令把应用程序数据绑定到HTML视图。

ng-init  指令初始化AngularJS应用程序变量[不推荐使用]。

{{}}  表达式.

把数据绑定到HTML与ng-bind指令相同.

ng-repeat  指令会重复一个HTML元素。

ng-controller  指令定义了应用程序控制器。控制器的 $scope 是控制器所指向的应用程序 HTML 元素。

 

过滤器:

过滤器描述
currency格式化数字为货币格式。[<p>总价 = {{ (quantity * price) | currency }}</p> ]
filter从数组项中选择一个子集。
lowercase格式化字符串为小写。/td>
orderBy根据某个表达式排列数组。
uppercase格式化字符串为大写。

$http  AngularJS 中的一个核心服务，用于读取远程服务器的数据。

ng-repeat 显示表格[下面有示例]

ng-disabled  指令直接绑定应用程序数据到HTML的disabled属性[true,false].

ng-show  指令隐藏或显示一个HTML元素.

ng-click  指令定义了一个单击事件

ng-hide =”true”元素不可见,=”false”元素可见.控制元素隐藏或显示.

一个Demo页面


页面中包含了几个示例,都是可以运行的.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
    <style>
    p {
        border:2px solid #00ff00;
        padding:5px 0;
    }
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body ng-app="myTodoApp" >
    <div ng-controller="myTodoCtrl">

        <h1>AngularJs</h1>
        <p>
            <span style="font-size:22px;color:red;">示例1</span>
            输入你的名字:
            <input type="text" ng-model="name"/>
            <br />
            <span >你输入的是:{{name}}</span>
        </p>

        <form name="myForm" >
            <p>
                <span style="font-size:22px;color:red;">示例2</span>
                这里只能输入数字[0-99]:
                <input type="number" name="input" ng-model="value"
                  min="0" max="99" required>
                <span class="error" ng-show="myForm.input.$error.required">Required!</span>
                <span class="error" ng-show="myForm.input.$error.number">Not valid number!</span>
                <tt>你输入的数字是:{{value}}</tt>
                <br/>
            </p>
        </form>

        <p>
            <span style="font-size:22px;color:red;">示例3</span>
            <input type="button" value="红色" ng-click="showtext={'color':'red'}" />
            &nbsp;
            <input type="button" value="蓝色" ng-click="showtext={'color':'blue'}" />
            &nbsp;
            <input type="button" value="黑色" ng-click="showtext={'color':'blank'}" />
            &nbsp;
            <input type="button" value="小字体" ng-click="showtext={'font-size':'12px'}" />
            &nbsp;
            <input type="button" value="中等字体" ng-click="showtext={'font-size':'18px'}" />
            &nbsp;
            <input type="button" value="大字体" ng-click="showtext={'font-size':'36px'}" />
            <br />
            <span ng-style="showtext">这是示例数据!!!</span>
        </p>
        <p>
            <span style="font-size:22px;color:red;">示例4</span>
            输出表格,在下面的字段填上值,点击添加即可输出.
            <br />
            Name:
            <input type="text" ng-model="namesvalues"/>
            City:
            <input type="text" ng-model="cityvalues"/>
            Country:
            <input type="text" ng-model="countryvalues"/>
            <input type="button" value="添加" ng-click="addlist()"/>
            <input type="button" value="恢复" ng-click="resetlist()"/>
            <table>
                <tr style="background-color:red;">
                    <td>Name</td>
                    <td>City</td>
                    <td>Country</td>
                </tr>
                <tr ng-repeat="x in showlist | orderBy : 'Name'">
                    <td>{{x.Name}}</td>
                    <td>{{x.City}}</td>
                    <td>{{x.Country}}</td>
                </tr>

            </table>
        </p>
        <p>
            <span style="font-size:22px;color:red;">示例5</span>
            <input type="button" value="点一下加一次" ng-click="count=count+1" />
            &nbsp;
            <input type="button" value="鼠标移入就加一次" ng-mouseover="count=count+1" />
            &nbsp;
            <input type="button" value="鼠标移出就加一次" ng-mouseout="count=count+1" />
            <span>和是:{{ count }}</span>
        </p>
    </div>
    <div ng-controller="times">
        <p>
            <span style="font-size:22px;color:red;">示例6</span>
            现在时间是:{{nowdate.now}}
        </p>
    </div>
    <div ng-controller="LogController">
        <p>
            <span style="font-size:22px;color:red;">示例7</span>
            输入消息,点击相应按钮,打开控制台(Console)[Chrome:F12其他类似]即可查看.
    Message:
            <input type="text" ng-model="message"/>
            <button ng-click="$log.log(message)">log</button>
            <button ng-click="$log.warn(message)">warn</button>
            <button ng-click="$log.info(message)">info</button>
            <button ng-click="$log.error(message)">error</button>
        </p>
    </div>
</body>
    <script src="myTodoApp.js"></script>
    <script src="myTodoCtrl.js"></script>
</html>

第二个源文件,必须与index.html放在同一个目录下面.

1
2
//myTodoApp.js
var app = angular.module("myTodoApp",[]);

第三个源文件,必须与index.html放在同一个目录下面.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//myTodoCtrl.js
app.controller("myTodoCtrl",function($scope){
    $scope.count=0;
    $scope.showlist=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"}];
    $scope.addlist=function(){
            $scope.showlist.push({"Name" : $scope.namesvalues,"City" : $scope.cityvalues,"Country" : $scope.countryvalues});
    };
    $scope.resetlist=function(){
        $scope.showlist=[{"Name" : "Alfreds Futterkiste","City" : "Berlin","Country" : "Germany"},{"Name" : "Berglunds snabbköp","City" : "Luleå","Country" : "Sweden"},{"Name" : "Centro comercial Moctezuma","City" : "México D.F.","Country" : "Mexico"},{"Name" : "Ernst Handel","City" : "Graz","Country" : "Austria"},{"Name" : "FISSA Fabrica Inter. Salchichas S.A.","City" : "Madrid","Country" : "Spain"}];
    }
}).controller("times",function($scope){
   
      $scope.nowdate ={
          now: new Date()
      };
      var updateClock = function(){
          $scope.nowdate.now = new Date();
      };
      setInterval(function(){
          $scope.$apply(updateClock);
    },1000);

     updateClock();
     
}).controller('LogController', ['$scope', '$log', function($scope, $log) {
      $scope.$log = $log;
      $scope.message = 'Hello World!';
    }]);

快速入门教程

推荐W3cscholl.cc的AngularJS在线教程,以及angularjs.cn[AngularJS中文网]这两个网址,都有很不错的教程.

AngularJS有一些让人眼前一亮的特性,正因为这个,才能坚持学习!加油!!