Anguluar的基本基本概念(一)

带着问题学习,效果可能更好一些,本文基于 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).
  • 第四步,绑定模块,指定模块生效的区域,也就是要开多大的餐厅.
  • 第五步,绑定控制器,制定运营制度。
    最后,祝贺你,你的餐厅开张了,你已然是一位餐厅老板了,是不是发现开个餐厅太容易了,简直分分钟搞定,如果以后这行做不下去了,咱还可以创建个餐厅玩玩对吧。

糖果

糖果
LUA教程

如果不小心安装错 SQL Server 为 Evaluation 的版本,要小心当超过 180 天之后,系统就会无法正常使用了 这几天遇到一个蛮特别的案例,原本收到的问题是 “维护计划” 忽然无法使用,即便是里面没有任何的Task,都无法顺利地执行。但从对方所提供的错误消...… Continue reading

PLUM NIZ静电容键盘怎么样?

Published on September 25, 2020

程序员如何选择合适的机械键盘

Published on September 18, 2020