Anguluar的基本基本概念(一)

2024-04-03

topic

3.2k 词

带着问题学习，效果可能更好一些，本文基于 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的基本使用？

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

<!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>

如果上面简介的代码看得云里雾里，那就可以看看下面这份完整版的，然而文末并没有彩蛋..

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

最新文章

归档

Anguluar的基本基本概念(一)

1.AnguluarJS是什么？

2.AnguluarJS与jQuery有什么区别？

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

4.Angular的基本使用？