一. js类库
1. jQuery是一个js函数库，操作思路仍然是DOM操作思路：先查找元素，再操作元素
2. jQueryUI是一个HTML组件库，简化了HTML/CSS的编写
3. Bootstrap是一个CSS框架，主要提供了响应式布局、HTML组件、CSSReset
4. Angular是一个js框架，彻底颠覆了传统的DOM操作，所有的关注点集中在业务数据上，而不是DOM树，适用于以数据操作为主的SPA(Single Page Application)应用
二. 软件工程---软件设计原则
1. 避免重复原则
2. KISS(Keep It Simple and Stupid)原则,代码越简单越傻瓜越好
3. YAGNI避免创建你不需要的代码
4. 开闭原则，不让别人修改自己的代码，但可以扩展代码
5. 最小惊讶原则
6. 单一责任原则 (不要给一个div添加太多的功能)
7. 高聚合低耦合，组件内部的逻辑关系越紧密越好，组件与组件之间关系越少越好
8. 最少知识法则、迪米特法则，组件用到的知识越少越好
三. 软件工程---设计模式
1. 概述
马走日象走田 => 双炮、马后炮
对象/原型/闭包 => 设计模式
设计模式是一套被反复使用，多数人知晓的，经过分类编目的，代码设计经验的总结。使用设计模式是为了可重用代码，让代码更容易被他人理解，保证代码的可靠性
2. 23+1种 +1是MVC模式
MVC模式根据逻辑关系，把前端项目的代码分为三个层次
1)model-模型/数据
就是业务数据，前端项目中是js的变量
2)view-视图
就是业务数据在用户面前的展现
3)controller-控制器
负责业务数据的增删改查,前端项目中就是function
四. angularjs概述
1. angularjs诞生于2009年，由Misko Hevery等人创建，后为Google所收购，所有的操作思路都以“业务数据”为关注点，彻底颠覆了传统的DOM操作，适用于以数据的CRUD操作为主的SPA应用
2. Angularjs的四大特性
1）使用MVC设计模式
2）双向数据绑定
3）依赖注入
4）采用模块化设计
五. Angularjs的使用-第一个ng页面
1. 引入angular.js文件即可
2. 写Angular表达式
{{表达式}}
ng会计算表达式的值，输出在当前位置
3. ng模块提供的指令(directive)
1) ng-app:启动一个Angular应用--只有Angular应用中的表达式才会被Angular执行
用法： <ANY ng-app>
注意： angular应用范围仅限于声明他的元素范围，且默认情况下一个HTML中不允许声明多个ngapp
2) ng-Init：声明模型变量
用法：<ANY ng-init="变量名=值；变量名=值">
注意：
ngInit声明变量不能声明var关键字,声明的变量可以在ng表达式中输出
只要在ngapp中声明的变量在哪里都可以使用
3) ngBind:计算一个表达式的值，输出为当前元素的innerHTML
用法：<ANY ng-bind="表达式"> 或
<ANY class="ng-bind:表达式;">
说明：ngBind指令作用于{{}}表达式基本类似，只是可以防止用户在一瞬间看到{{}}.
4）ng-Controller: 调用Controller创建函数，实例化一个控制器对象
5）ngRepeat:用于在view实现循环输出
<ANY ng-repeat="变量名 in 集合对象">
含义：
对于集合对象中的每一个元素，依次赋值给指定的变量名，对每次赋值都输出一遍当前元素
6）ngIf:用于在view中实现判断输出，为false就不输出
若布尔表达式为true,则输出当前元素，否则当前元素再DOM树不存在
4. 测试ng表达式可以执行哪些运算
算术运算 +-*/ % 都可以，唯独不能自增和自减
比较运算 <>
逻辑运算 && || !
三目运算 ?:-----
调用字符串对象的成员方法
使用直接量表示法创建对象
创建数组
使用new关键字创建对象 X
调用ES全局函数 parseInt() parseIntFloat()...
六. ng中声明模型数据的方式
1. 使用ng-init指令来声明Model数据
<ANY ng-init="变量名=值;">
说明：此方式将modal声明在view中，严重违法了MVC模型的分工，不推荐使用
2. 使用Controller对象创建modal数据--符合MVC模型分工
新版本的ng中创建Model的语法
ngApp -> Module -> Controller -> Modal
1) 声明一个ng的应用程序 ngApp
<html ng-app></html>
2) 创建一个自定义的模块：angular.module("模块名",[依赖列表])
angular.module("模块名",["ng"])
3）在应用中注册自定义模块 ng-app="模块名"
<html ng-app="myModule"></html>
4）在模块中声明Controller
angular.module("模块名",["ng"]).controller("myContro",function(){
});
5) 在view中指定Controller对象的作用范围-调用控制器创建函数
<div ng-controller="myContro">
{{name}}
</div>
6) 在Controller中声明Modal数据
angular.module.("模块名",["ng"]).controller("myContro",function($scope){
#$scope.name = "蓝科教育";
});
注意：
Angular明明命名空间，&和&&为防止和你的代码的名称产生冲突 ng公共对象的前缀名使用$ 私有对象名使用$$ 请不要在你的对象中使用这两个符号
应用实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<!--1.启动一个ngapp应用程序 ng-app-->
<!--3.在ng-app中注册自定义模块，将navbarModule作为启动模块-->
<body ng-app="navbarModule">
<!--ngApp -> Module -> Controller -> Modal-->
<!--6.将数据放到视图上 指定Controller对象的作用范围-->
<div ng-controller="myControl" class="container">
<p>{{name}}</p>
<ul>
<li ng-repeat="name in personArray">{{name}}</li>
</ul>
<table class="table">
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="object in objectArray">
<td>{{object.name}}</td>
<td>{{object.age}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//2.创建一个自定义模块
//4.在模块中声明Controller，利用模块创建控制器
angular.module("navbarModule",["ng"]).controller("myControl",function ($scope) {
//5.创建模型变量
//7.在Controller中声明Modal数据 $scope
$scope.name = 12;
$scope.name++;
$scope.personArray = ["张三","李四","王五","赵六"];
$scope.objectArray = [{
name:"珂狗",
age:29
},
{
name:"圈圈",
age:18
},
{
name:"屁屁",
age:18
}];
});
</script>
</html>
