Angularjs学习笔记（一）软件设计的基本原则和MVC设计模式

快来打我* 2022-04-04 14:58 270阅读 0赞

1、软件工程——软件设计原则

(1)避免重复原则（只要用得到Ctrl+c和Ctrl+v的就算）

(2)KISS原则，代码越简单越傻瓜越好（因为要注重团队意识）

(3)YAGNI原则，不创建不需要的代码（严格遵守客户需要，不创建不必要的功能）

(4)开闭原则，不让别人修改自己的代码，但可以扩展它

(5)单一责任原则（例如在Bootstrap中每一层div包含不同功能的class）

(6)高聚合低耦合原则，组件内部的逻辑关系越紧密越好，组件和组件之间关系越少越好。（angularjs的模块化设计就是遵循此原则）

(7)最少知识法则/迪米特法则，例如司机不必知道如何造汽车。（在一个模块或函数中只有本身需要的东西）

2、软件工程——设计模式

象棋（马走日象走田） => 基本套路（双炮枪/马后炮）

||     ||

js（对象/原型/闭包） =>       设计模式   =>      设计框架

设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。

共23+1种设计模式

\+1的那种设计模式：MVC模式（现在特别常见的设计模式，也是angularjs的设计模式）

3、MVC设计模式

MVC模式根据逻辑关系，把前端项目的代码分为三个层次：

（1）Model：模型，就是业务数据，前端项目中就是JS变量；

（2）View：视图，就是业务数据在用户面前的展现，前端项目中就是HTML

（3）Controller：控制器，负责业务数据的增删改查，前端项目中就是function

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70][]

4、AngularJS概述

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。所有的操作思路都以“业务数据”为关注点，彻底颠覆了传统的DOM操作。适用于以数据的CRUD（增删改查）操作为主的SPA应用。

5、面试题：AngularJS的四大特性

(1)MVC设计模式

(2)双向数据绑定

(3)依赖注入

(4)模块化设计  例如帮助手册：

![20181217220340715.png][]

注：i18n:   internationalization  国际化，Web项目若可以实现见中国人呈现汉语，见英国人呈现英语。

6、如何使用angularjs（angularjs简写为an）

引入angular.js文件即可

7、Angular表达式（前提ngApp启动）

语法：\{ \{ 表达式 \}\}

含义：Angular会计算表达式的值，输出在当前位置。

8、Angular表达式可以执行哪些运算

1.  算数运算？   + - \* / %    都可以，唯独不能自增/自减
2.  比较运算？ > < 都可以
3.  逻辑运算？ && || !        都可以
4.  三目运算？ ?: 可以
5.  调用字符串对象的成员方法？ 可以
6.  使用直接量表示法创建对象？ 可以
7.  可以使用数组吗？ 可以
8.  使用new关键字创建对象？ 不可以！不允许使用new和var关键字
9.  调用ES全局函数？ 不可以！

9、ng模块提供的指令(directive)

(1)ngApp：启动一个Angular应用——只有Angular应用中的表达式才会被Angular执行。

用法： <ANY ng-app>

注意：angular应用的范围仅限于声明它的元素范围；且默认情况下一个HTML中不允许声明多个ngApp元素。

** **(2)ngInit：声明模型变量(Model)——不是局部变量（违背MVC设计原则，尽量不用）

用法： <ANY ng-init="变量名=值; 变量名=值;">

注意：ngInit声明变量不能声明var关键字！声明的变量可以在Angular表达式中进行输出

(3)ngBind: 计算一个表达式的值，输出为当前元素的innerHTML

用法： <ANY ng-bind="表达式"></ANY>

例：<**div  ****ng-init=****"****age****=20;"**></**div**>  
         <**p** **ng-bind=****"age+5"**></**p**>  
         <**p** **class=****”ng-bind:age\*5;”**></**p**>

说明：ngBind指令作用与\{ \{\}\}表达式基本类似，只是可以防止用户在一瞬间看到\{ \{\}\}。ngBind指令计算完成表达式的值，会替换当前元素的innerHTML.

(4)ngController：调用Controller创建函数，实例化一个控制器对象，指定其作用范围

用法： <ANY ng-controller="控制器名">...</ANY>

(5)ngRepeat：用于在View实现循环输出

用法： <ANY ng-repeat="变量名 in 集合对象"></ANY>

含义：对于集合对象中的每一个元素，依次赋值给指定的变量名，对每次赋值都输出一遍当前元素。

** **(6)ngIf：用于在View实现判断输出，为false就不输出了

用法： <ANY ng-if="布尔表达式">

含义： 若布尔表达式为true则输出当前元素；否则当前元素在DOM树不存在

<div ng-if=”isIPO”>仅为真时可见</div>

10、AngularJS中声明模型数据的方式

(1)使用ngInit指令来声明Model数据

说明：此方式将Model声明在View中，严重违反了MVC模型的分工，不推荐使用

(2)使用Controller对象创建Model数据——符合MVC模型分工

新版本的AngularJS中创建Model的语法：

ngApp=>Module=>Controller=>Model

1.  声明一个AngularJS的应用程序： ngApp
2.  创建一个自定义的模块： angular.module('模块名', \[依赖列表\])
3.  在应用中注册自定义模块：  ng-app="模块名"
4.  在模块中声明Controller函数
5.  在View中指定Controller对象的作用范围——调用控制器创建函数
6.  在Controller中声明Model数据

使用Controller创建Model数据：

创建一个新的HTML页面，声明一个ngApp，创建一个模块，其中声明一个控制器，创建一个Model数据，在View中显示这些数据：

<!DOCTYPE **html**>  
**  
<**html** **lang=****"en"** **ng-app=****"myModule5"**>  
<**head**>  
  <**meta** **charset=****"UTF-8"**>  
  **  
*  *<**link** **rel=****"stylesheet"** **href=****"css/bootstrap.css"**>  
  <**title**></**title**>  
</**head**>  
<**body**>  
<**div** **class=****"container"**>  
  <**h1**>练习：使用Controller创建Model，在View中加以显示</**h1**>  
  **  
*  *<**div** **ng-controller=****"myCtrl5"**>  
    **  
*    *<**p**>\{ \{empCount\}\}</**p**>  
  </**div**>  
  </**div**>  
    **  
*    *<**script** **src=****"js/angular.js"**></**script**>  
    <**script**>  
      *// 用angular.module定义一个组件后边是所依赖的模块*  
*        *angular.*module*(**'myModule5'**, \[**'ng'**\]).  
        **controller**(**'myCtrl5'**, **function**($scope)\{ *// 用controller定义一个控制器，控制器中函数是对**业务**数据的函数操作*  
*            //在Controller中声明Model数据*  
*            *$scope.**empCount** = 1000;  
        \});  
    </**script**>  
</**body**>  
</**html**>

11、AngularJS在项目中的优缺点是什么？

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70]: /images/20220404/f34e5777994046028d40b61555446adb.png
[20181217220340715.png]: /images/20220404/581ae0d52652430e9bebc576dd454acf.png