Unit01: AngularJS 概述 、 表达式和指令 、 MVC模型
【Angular Js】
【软件工程】
1.软件设计“原则”:
- 避免重复原则(DRY – Don’t repeat yourself)
- KISS原则(Keep It Simple and Stupid ):
逻辑代码越简单越少;
- 避免创建你不要的代码 YAGNI (You aren’t going to need it)
- 开闭原则(Open/Closed Principle)
别人可以基于你的代码进行拓展编写,但却不能修改你的代码
- 最小惊讶原则(Principle of least astonishment)
你编写的代码只需按照项目的要求来编写。其他华丽的功能就不必了,以免弄巧成拙。
- 单一责任原则(Single Responsibility Principle)
某个代码的功能,应该保证只有单一的明确的执行任务。
- 高聚合低耦合原则
一个组件内部的逻辑关系越紧密越好(高聚合);组件与组件之间的关系越少越好(低耦合);
- 迪米特法则又叫作最少知识原则(Law of Demeter):百度百科解释为->就是说一个对象应当对其他对象有尽可能少的了解,不和陌生人说话。(低耦合)
2.软件【设计模式】:大话设计模式--java
23+1中设计模式;
+1:MVC模式;
3.MVC设计模式
马走日象走田 => 双炮枪/马后炮
|| ||
对象/原型/闭包 => 设计模式 => 设计框架
设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。
23+1种设计模式
+1的那种设计模式:MVC模式
modal: 模态框['məʊd(ə)l]model: 模型['mɒdl]module: 模块['mɒdjuːl] |
根据逻辑关系,把前端项目的代码分为三个层次:
1).Model:模型,就是“业务数据”,前端项目中JS中的变量;
2).View:视图,“业务数据”在用户面前的展现;前端项目中就是HTML;
3).Controller:控制器,负责“业务数据”中的增删改查,前端项目中就是Function;
developer.mozilla.org
4.Angular Js概述:
是一个JS框架,彻底颠覆了传统的DOM操作,所有的关注点集中在业务数据上,而不是DOM树,适合以数据CRUD(增删改查)操作为主的SPA(Single Page Application)单页应用;QQ空间.饿了么.....
不需要数据的,如单页广告,飞机大战游戏等;
面试题:
AngularJs的四大特性:
1.MVC模型设计模式
2.双向数据绑定
3.依赖注入
4.模块化设计
5,第一个AngularJs()页面;
i18n:语言包 internationalization 国际化 ;
引入angular.js;
6.ng表达式
语法:{{表达式}}
含义:ng会计算表达式,输出在当前位置;
测试:Angular表达式可以执行那些运算:
算数运算:+ - * / % 都可以 ; ++ --不可以!;
比较运算:< > 都可以;
逻辑运算:&& || !都可以;
三目 :可以;
字符串的属性和方法:可以;
在表达式使用对象直接量:可以 2.html;
使用数组:可以
使用new创建对象:不可以!不允许使用new和var关键字 *****
全局函数: 不可以!
JavaScript中对象的分类: (1)ECMAScript标准对象 Global String Date RegExp Array Object ... 可以在任一个js解释器中使用 (2)宿主对象: DOM: Node Element Attribute .... BOM: window document .... 只能在浏览器中的js解释器中使用,不能在独立的服务器端js解释器(如NodeJS)中使用 (3)用户自定义对象 |
7.ng模块提供的指令:Directive
1).ngApp:启动一个Angular应用--只有Angular应用中的表达式才会被执行;
用法:<ANY ng-app >...</ANY>
注意: Angular应用范围仅限于申明它的元素且默认情况下不允许声明多个ng-app,一般放在body或html元素上;
2).ngInit:声明模型变量--不是局部变量
用法:<ANY ng-init="变量名=值;变量名=值;" >...</ANY>
注意:ngInit申明的变量不能使用var关键字;声明的变量可以在Angular表达式中输出;***
3).ngBind:计算一个表达式的值,输出为当前元素的"innerHTML";
**** ngBind的指令及时完成后;元素的已有内容全会被替换;*****
可以利用这点做加载效果;********
用法:
<p ng-bind="age+5"></p>
<p class="ng-bind:age*2;"></p>
说明:ngBind指定作用与{{}}作用相似,只是在刷新的时候不会出现{};
4).ngController:调用Controller创建函数,实例化一个控制器对象,指定其作用范围
用法:<ANY ng-controller="控制器名称" >...</ANY>
5).ngRepeat:用于在View中循环输出;
<ANY ng-repeat="变量名 in 集合对象">...</ANY> 变量名:值;
含义:对于集合对象的每个元素,一次赋值给指定的变量名,对每次赋值都输出一遍当前元素;
6).ngIf:用于在View中判断输出,为false就不输出;
用法:<ANY ng-if="布尔表达式">...</ANY>
8.AngularJs中声明模型数据的方式;
1).使用ngInit指令来声明Model数据
说明:此方式将Model数据声明在View中,严重违反了MVC分工;不推荐使用;
2).使用Controller对象创建Model数据--符合MVC分工;
新版本的AngularJs中创建Model的方法:
ngApp => Module => controller => Model;
-1.声明Angular应用程序:
HTML里:ngApp;
-2.创建一个自定义模块:
script里:angular.module('模块名',[依赖模块列表]);
-3.在应用程序里注册自定义模块:
让 data-ng-app="模块名"
-4.在模块中声明Controller函数:
-5.在View中指定Controller对象的作用范围;--调用控制器创建函数:
html里:<ANY ng-controller="控制器名称" >...</ANY>
-6.在Controller中声明Model数据; 3.html
$scope.string="hanmeimei";