带着问题学习,效果可能更好一些,本文基于 Angular 1.5.8 版本.

1.AnguluarJS是什么?

  • AngularJS是一款由Google公司开发维护的前端MVC框架.
  • 作用:克服了HTML在构建应用上的诸多不足,降低开发成本,提升开发效率。

    2.AnguluarJS与jQuery有什么区别?

  • jQuery准确地来说只是一个类库(类库指的是一系列函数的集合),以DOM元素做为驱动(核心).
  • AngularJS则一个框架(诸多类库的集合),以数据和逻辑做为驱动(核心),框架对开发的流程和模式做了约束,开发者遵照约束进行开发,更注重的实际的业务逻辑.

3.不得不提一嘴的MVC,MVVM?

  • 3.1 MVC是一种软件架构设计的思想,将软件按照模型、视图、控制器来划分。模型负责封装业务逻辑和数据;视图负责输入和输出,控制显示界面交互;控制器负责协调模型和视图。
    • Model(模型):模型是应用程序的主体部分,通常用于处理应用程序的业务数据,或者业务逻辑部分.
    • View(视图):视图是应用程序中处理用户界面显示的部分,通常视图是依据模型数据创建的.
    • controller(控制器):应用程序中处理用户交互的部分,通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。
  • 3.2 MVC的优点:
    • 实现了功能模块和显示模块的分离
    • 可维护性
    • 可扩展性
    • 可移植性和组件的可复用性
  • 3.3 MVVM是什么梗?
    • MV:可以通过模型到视图传递数据
    • VM:视图也可以传递数据到模型
    • MVVM属于数据的双向绑定

      AngularJS构建应用(App)时是以模块化(Module)的方式组织的,将整个应用划分成若干模块,每个模块都有各自的职责,最终组合成一个整体,采用模块化的组织方式,可以最大程度的实现代码的复用.
      OK,讲了一大堆虚头巴脑的理论,都看不下去了,那就废话不多说,直接上代码。

4.Angular的基本使用?

简单粗暴的代码长这样(删减版):

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('preController',['$scope',function ($scope) {
$scope.box = ['apple','banana','orange'];
$scope.msg = "xmg";
$scope.show = function () {
alert('hello world');
}
}]);
</script>
</head>
<body ng-app="app" ng-controller="preController">
<p ng-show="true"></p>
<ul>
<li ng-repeat="goods in box"></li>
</ul>
</body>
</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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建模块(MVC思想)</title>
<!--0.导入angular-->
<script src="angular.js"></script>
<script>
// MVC: Model(数据/模型) View(视图) Controller(控制器)
// 1.创建模块,angularJS提供了一个全局对象angular,在此全局对象下存在着若干的方法
// 其中angular.module()方法用来定义一个模块。
// 第一个参数:模块的名称
// 第二个参数:依赖模块的名称
var app = angular.module('app', []);
// 2.创建控制器
// 控制器(Controller)作为连接模型(Model)和视图(View)的桥梁存在,
// 所以当我们定义好了控制器之后也就定义好了模型和视图
// 参数一:控制器的名称
// 参数二:依赖的服务 app.controller('名称', ['$scope', function($scope){}]);
app.controller('perController', ['$scope', function ($scope) {
$scope.msg = 'zxc';
$scope.show = function () {
alert('Hello world');
};
$scope.box = ['apple', 'banana', 'orange'];
}]);
</script>
</head>
<!--指令:ng-app 定义应用程序的根元素。-->
<!--3.绑定模块-->
<body ng-app="app" ng-controller="pergController">
<!--4.绑定控制器-->
<!-- 指令:给原生的html添加了一些新的属性。可以达到指定的功能 -->
<!-- 指令:ng-show 显示或隐藏 HTML 元素 -->
<p ng-show="true"></p>
<ul>
<!--指令:ng-repeat 遍历元素,定义集合中"每项"数据的模板-->
<li ng-repeat="goods in box"></li>
</ul>
</body>
</html>

呃,并不打算放一张运行结果图,自己撸完看结果呗,现在,简单梳理一下这个过程,这整个流程就好比一个人要开一家餐厅:

  • 第一步,导入Angular框架
  • 第二步,创建模块,让当前页面支持angular,这就相当于餐厅选址,要在哪里开餐厅.
  • 第三步,创建一个控制器,这就好比请了一个服务员,并且这个服务员还自带了一个厨房,包括厨师(这个服务员有木有很6).
  • 第四步,绑定模块,指定模块生效的区域,也就是要开多大的餐厅.
  • 第五步,绑定控制器,制定运营制度。
    最后,祝贺你,你的餐厅开张了,你已然是一位餐厅老板了,是不是发现开个餐厅太容易了,简直分分钟搞定,如果以后这行做不下去了,咱还可以创建个餐厅玩玩对吧。