首页 > 代码库 > Angular入门笔记

Angular入门笔记

2024-07-07 09:07:28   230人阅读

      AngularJS（下面简称其为ng）是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。

一、历史

　　AngularJS最初由Misko Hevery和Adam Abrons于2009年开发，后来成为了Google公司的项目。

　　当前最新版是：1.2.0-beta.10

　　当前最新稳定版是：1.2.16

二、授权

　　Angular是开源免费的。GitHub地址：https://github.com/angular/angular.js

　　授权协议是：MIT

三、兼容性

　　Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari). 

　　对于早期IE版本，请参考： Internet Explorer Compatibility

四、JQuery

　　ng可以和jQuery集成工作,事实上,如果没有jQuery,ng自己也做了一个轻量级的jQuery,主要实现了元素操作部分的API。

五、核心特性

　　1.MVC

　　2.模块化

　　3.自动化双向数据绑定

　　4.语义化标签

　　5.依赖注入

六、优缺点

　　如果你要开发的是单页应用，AngularJS就是你的上上之选。Gmail、Google Docs、Twitter和Facebook这样的应用，都很能发挥AngularJS的长处。但是像游戏开发之类对DOM进行大量操纵、又或者单纯需要 极高运行速度的应用，就不是AngularJS的用武之地了。

七、使用Angular

　　1.新建一个名为index的网页。

?
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<head>
     <title>Learning AngularJS</title>
</head>
<body>
 
</body>
</html>

　　2.引入Angular.js文件

?
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<head>
     <title>Learning AngularJS</title>
      <script src=http://www.mamicode.com/"./angular.min.js"></script>
</head>
<body>
 
</body>
</html>

也可以使用谷歌的cdn

https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js

　　3.使用ng-app来声明Angular的边界，使用ng-controller来声明其使用的控制器

?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <title>Learning AngularJS</title>
    <script src=http://www.mamicode.com/"./angular.min.js"></script>
    </head>
<body>
   <div id=‘content‘ ng-app=‘MyTutorialApp‘ ng-controller=‘MainController‘>
    
   </div>
</body>
</html>

 　　4.在index.html文件同目录下新建app.js，并写入以下内容。

?
1
var app = angular.module(‘MyTutorialApp‘,[]);

　　5.在index.html同目录下新建maincontroller.js并写入以下内容

?
1
app.controller("MainController", function($scope){

　　6.将app.js和maincontroller.js分别引入到index.js目录中。App.js要先于maincontroller.js引入

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <title>Learning AngularJS</title>
    <script src=http://www.mamicode.com/"./angular.min.js"></script>
    <script src=http://www.mamicode.com/"app.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id=‘content‘ ng-app=‘MyTutorialApp‘ ng-controller=‘MainController‘>
    
</div>
</body>
</html>

　

　　7.在maincontroller.js中添加$scope的变量

?
1
2
3
app.controller("MainController", function($scope){
    $scope.understand = "I now understand how the scope works!";
});

 

　　8.在index.js页面中写上要访问的变量

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <title>Learning AngularJS</title>
    <script src=http://www.mamicode.com/"./angular.min.js"></script>
    <script src=http://www.mamicode.com/"app.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id=‘content‘ ng-app=‘MyTutorialApp‘ ng-controller=‘MainController‘>
    {{understand}}
</div>
</body>
</html>

　　9.效果

　　

 

八、双向绑定

　　例一：

　　　　1.修改maincontroller.js文件如下

?
1
2
3
app.controller("MainController", function($scope){
     $scope.inputValue = http://www.mamicode.com/"";
});

　　　　2.修改index.html文件如下:

　　　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<head>
    <title>Learning AngularJS</title>
    <script src=http://www.mamicode.com/"https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"app.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"maincontroller.js" type="text/javascript"></script>
</head>
<body>
    <div id=‘content‘ ng-app=‘MyTutorialApp‘ ng-controller=‘MainController‘>
        <input type=‘text‘ ng-model=‘inputValue‘ />
        {{inputValue}}
    </div>
</body>
</html>

　　　　3.效果

　　　　

　　　　

　　例二:

　　　　1.修改maincontroller.js文件内容如下：

　　　　

?
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
app.controller("MainController", function($scope){
    $scope.selectedPerson = 0;
    $scope.selectedGenre = null;
    $scope.people = [
        {
            id: 0,
            name: ‘Leon‘,
            music: [
                ‘Rock‘,
                ‘Metal‘,
                ‘Dubstep‘,
                ‘Electro‘
            ]
        },
        {
            id: 1,
            name: ‘Chris‘,
            music: [
                ‘Indie‘,
                ‘Drumstep‘,
                ‘Dubstep‘,
                ‘Electro‘
            ]
        },
        {
            id: 2,
            name: ‘Harry‘,
            music: [
                ‘Rock‘,
                ‘Metal‘,
                ‘Thrash Metal‘,
                ‘Heavy Metal‘
            ]
        },
        {
            id: 3,
            name: ‘Allyce‘,
            music: [
                ‘Pop‘,
                ‘RnB‘,
                ‘Hip Hop‘
            ]
        }
    ];
});

　　　　2.修改index.html文件的内容如下：

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<head>
    <title>Learning AngularJS</title>
    <script src=http://www.mamicode.com/"https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"app.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"maincontroller.js" type="text/javascript"></script>
</head>
<body>
    <div id=‘content‘ ng-app=‘MyTutorialApp‘ ng-controller=‘MainController‘>
        <select ng-model=‘selectedPerson‘ ng-options=‘obj.name for obj in people‘></select>
        <select ng-model=‘selectedGenre‘>
            <option ng-repeat=‘label in people[selectedPerson.id].music‘>{{label}}</option>
        </select>
    </div>
</body>
</html>

　　　　3.效果

　　　　

 

九、Angular的数据过滤

　　1.修改index.html文件内容如下:

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <title>Learning AngularJS</title>
    <script src=http://www.mamicode.com/"./angular.min.js"></script>
    <script src=http://www.mamicode.com/"app.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id=‘content‘ ng-app=‘MyTutorialApp‘ ng-controller=‘MainController‘>
    <input type=‘text‘ ng-model=‘searchText‘ />
    <ul>
        <li ng-repeat=‘person in people | filter:searchText‘>#{{person.id}} {{person.name}}</li>
    </ul>
</div>
</body>
</html>

　　2.效果

　　

 

十、使用Angular显示或隐藏元素

　　1.修改maincontroller.js文件如下：

　　

?
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
app.controller("MainController", function($scope){
  $scope.people = [
        {
            id: 0,
            name: ‘Leon‘,
            music: [
                ‘Rock‘,
                ‘Metal‘,
                ‘Dubstep‘,
                ‘Electro‘
            ],
            live: true
        },
        {
            id: 1,
            name: ‘Chris‘,
            music: [
                ‘Indie‘,
                ‘Drumstep‘,
                ‘Dubstep‘,
                ‘Electro‘
            ],
            live: true
        },
        {
            id: 2,
            name: ‘Harry‘,
            music: [
                ‘Rock‘,
                ‘Metal‘,
                ‘Thrash Metal‘,
                ‘Heavy Metal‘
            ],
            live: false
        },
        {
            id: 3,
            name: ‘Allyce‘,
            music: [
                ‘Pop‘,
                ‘RnB‘,
                ‘Hip Hop‘
            ],
            live: true
        }
    ];
});

　　2.修改index.html文件如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<head>
  <title>Learning AngularJS</title>
    <script src=http://www.mamicode.com/"https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"app.js" type="text/javascript"></script>
    <script src=http://www.mamicode.com/"maincontroller.js" type="text/javascript"></script>
</head>
<body>
    <div id=‘content‘ ng-app=‘MyTutorialApp‘ ng-controller=‘MainController‘>
        <input type=‘text‘ ng-model=‘searchText‘ />
        <ul>
            <li ng-repeat=‘person in people | filter:searchText‘>#{{person.id}} {{person.name}}</li>
        </ul>
        <ul>
            <li ng-repeat=‘person in people | filter:searchText‘>#{{person.id}} {{person.name}}</li>
        </ul>
    </div>
</body>
</html>

　　3.效果

　　

十一、事件绑定

　　1.


联系
我们