Angularjs day01
框架：优秀的可以重复使用的代码，单独提取并封装，提高代码的服用了、开发速度，并保证良好的浏览器的兼容性。
angularJS、phoneGap、Ionic、ZeptoJS、React。。。
判断框架：①它适用的场景 ②如何使用 ③遇到了问题怎么解决(维基百科、官网、论坛（stackoverflow）)
一、常用的设计原则和设计模式
1、设计原则（明确）
① YANGI（You aren't gonna need it） 不写不需要的代码
②KISS（Keep it simple and stupid） 代码越简单越好
③DRY（Don't Repeat Yourself）封装代码
④高内聚低耦合
内聚：一个模块内部的不同部分之间的关系
耦合：不同模块/组件的关系
⑤SRP(single responsibility principle) 单一责任原则
⑥OCP（open closed principle） 开闭原则
对扩展开放 对修改关闭
⑦LCP（least knownledge principle） 最少知识法则
2、设计模式（23种 了解）
总体来说设计模式分为三大类：
①创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
②结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
③行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。
经常用到的设计模式：
工厂方法模式、单例模式、适配器模式、解释器模式、观察者模式
MVC、MVVM、MVP。。。--》终极目标：模块化和复用
MVC：
Model（模型数据）、View（视图）、Controller（控制器）
遥控器--》控制器：数据的增删改查的操作
电视 --》View：展示数据
光缆 --》Model：模型数据
why MVC？
解耦（降低代码的耦合度）、职责的切分。。。。
工作原理：当对视图操作的时候，触发控制器中的一些方法，在这些方法中对于数据的增删改查的操作，借助一些绑定显示，更新到视图。
二、认识AngularJS
1、什么是AngularJS
ng是一个由Google维护的开源的框架，实现单页面应用程序，适用于数据操作比较频繁的场景
2、为什么AngularJS
四大特征：
①采用了MVC的设计模式
②双向数据绑定
③依赖注入
④模块化设计
3、怎么使用？
引入对应的js文件。
3.1 表达式
语法：{{表达式}}
作用：将表达式的结果输出到调用该表达式的元素的innerHTML中
练习：新建一个html文件，在文件中，通过双花括号语法执行算术运算、比较运算、逻辑运算、三目运算。
3.2 指令
ngApp指令：①指定angularJS的作用范围②自动载入并启动ng应用
ngInit指令：初始化一些变量（对象、数组。。。），注意：不需要写上var关键字
语法：<ANY ng-init=""></ANY>
练习：ngInit指令创建一个对象数组（学生数组），模拟4个对象，每个对象包含name、sex、score；将对象数组输出到一个table中。
步骤：
①引入js文件，指定ngApp指令
②通过ngInit初始化数据
③将数据展示在table中。
ngApp/ngInit
注意事项：ngInit来初始化变量的时候，如果需要初始化多个变量，只需要通过‘；’来隔开
<span ng-init="name='lucy';age=20">{{name}}</span>
ngApp指令ng应用的作用范围，如果ngApp调用了多次，只有第一次是生效的。
三、ng常用的指令
ng中的指令：是由AngularJS提供的，可以将指令用在HTML中作为扩展属性、扩展标签
扩展属性用法：<ANY ng-xx=""></ANY>
扩展标签用法：<ngView></ngView>
1、ngBind
用法： <ANY ng-bind=“”></ANY>
双花括号 -》表达式的结果输出到调用元素的innerHTML中。
ngBind 将表达式的结果输出到调用元素的innerHTML中，但是相对于{{}}，解决在ng启动较慢时，{{}}闪烁的问题。
2、ngRepeat指令
为HTML添加循环功能
语法1：<ANY ng-repeat="临时变量 in 集合"></ANY>
语法2：<ANY ng-repeat="（下标变量名，值变量名） in 集合"></ANY>
用途：对于指定的集合的每个成员，依次赋值给临时变量，将当前元素循环输出一遍。
$index/$first/$middle...
练习：学生数组 ngInit初始化，通过ngRepeat遍历对象数组并显示在table中。
3、ngIf指令
为HTML添加选择功能
语法:<ANY ng-if="表达式"></ANY>
用途：表达式的结果为true，当前元素会挂到DOM树，否则删除。
练习：通过ngIf指令将对象数组中，成绩大于60分的显示在table中。
4、ngShow/ngHide
语法:<ANY ng-show="表达式"></ANY>
用途：根据表达式输出结果，true-》显示 false-》隐藏
语法:<ANY ng-hide="表达式"></ANY>
用途：根据表达式输出结果，true-》隐藏 false-》显示
5、ngSrc
语法：<img ng-src='{{url}}'/>
四、AngularJS如何实现MVC
M： model 模型数据：js定义的变量
V： view 视图：增强过后的html，显示数据
C： controller 控制器，负责数据的操作，function来处理
步骤：
①声明一个模块
var app = angular.module('模块名','依赖列表');
②注册模块：ng-app='模块名'
③声明控制器： app.controller('控制器名字'，function(){})
④调用控制器：ng-controller='控制器名字'
⑤操作：操作模型数据($scope.name='xiaofang'
⑥显示 （<p>{{name}}</p>）
在控制器的范围内，通过ng指令或者双花括号语法来显示数据
$scope是一个控制器的作用域对象，服务service，单例模式的对象)
事件：
单击事件 ngClick--》 <button ng-click='show()'></button>
ngDblClick
ngMouseEnter/Leave...
练习：
使用angularJS的MVC的设计模式，来实现一个加载更多的列表。
分析：
①创建模块、控制器、模型数据（对象数组）
②将模型数据通过ngRepeat显示在ul中
③按钮通过ng-click指定点击的回调：对象数组push两条数据
两种方法：①ngInit 耦合度比较高 ②$scope
初始化模型数据：通过控制器的$scope来实现。
ngDisabled
ngChecked
ngStyle/ngClass...
Angularjs day02
一、自定义指令
语法：
var app = angular.module('myModule',['ng']);
app.directive(name,fn);
自定义指令：
restrict:'EACM'
E-->Element 元素
A-->Attribute 属性
C-->Class
M-->Comment 注释（在指令中添加一个属性：replace:true）
新指令的命名：
①驼峰式
②前缀一般是公司或者项目的简写，后缀一般是指令的作用
③使用指令: tsHello--->ts-hello
在第二个参数 指定一个方法，在方法中返回一个对象设置指令。对象中template、restrict、replace、scope。。。
总结：如果要参数的传递，需要在创建指令的时候，加上scope，同时指定对应的属性的名称（testName），在使用指令的时候，需要加上对应的属性（test-name=''）
练习：创建自定义的指令 tsDirective,传入ts-name="Hello Directive"，调用指令（作为元素来使用）显示出来。
二、双向数据绑定
1、方向1的绑定（Model数据 绑定到View）
实现方法：{{name}}、常用指令（ngRepeat/ngBind/ngIf...）
相比DOM操作：先去查找元素，再去设置元素，只需要把model数据绑定视图上，数据改，视图就会更新。
2、方向2的绑定（将View数据绑定到Model数据）
实现方法只有一种方式： ng-model
<input type='text' ng-model='myText'/>
$scope.$watch('模型变量名',function(){})
练习：
留言本：多行文本输入框textarea、
选择城市：下拉菜单select、
是否同意：复选框 checkbox
三、过滤器
过滤器是用在表达式中，实现对表达式结果的筛选、过滤、格式化，达到更好的表现效果
语法：|--》管道
{{表达式 | 过滤器1：'name' | 过滤器2 }}
currency 货币样式的过滤器
date 日期
uppercase
lowecase 大小写的转换
orderBy 升序或者降序 orderBy:'age':true
limitTo 限定显示的数量
number 限制显示小数点后几位
练习：过滤器，模拟一个list=[{name,age,score},{}],、
①按照age升序，②按照score降序并只显示前三名
四、常用函数
forEach
uppercase/lowercase
toJson/fromJson
序列化：将一个json对象转换为json格式的字符串
反序列化：将一个json格式的字符串 转换为json格式的对象
五、服务
在ng中 服务 是 一种单例对象，所谓单例，服务在每一个应用中只会被实例化一次。
功能：为应用提供数据和对象
两大类：①内置的服务 ②自定义服务
1、内置的服务的使用方法
如果在控制器中，使用ng中内置的服务，需要在控制器的回调函数中
①将对应的服务给注入进来
②使用服务所提供的数据和对象
app.controller('myCtrl',function($scope,$location){
var url = $location.absUrl();
});
2、控制器和作用范围
$scope与$rootScope：
$scope是$rootScope的子作用域控制对象，$rootScope的id为1，其他的为2,3....
不同的控制器之间，所对应的作用域控制对象($scope),之间是相互隔离的，如果要共享数据，怎么办？
借助$rootScope这个根作用域控制对象来实现。
如果父作用域对象想要调用子作用域对象的变量或者方法，ng提供了2个方法：
①$broadcast 将事件从父亲传递给子级
$scope.$broadcast(eventName,data);
②$emit 将事件从子级传递给父亲
$scope.$emit(eventName,data);
接收：
$scope.$on(eventName,function(event,data){
})
每日一练：全选
双向数据绑定
ngChecked/ngClick/ngModel/ngChange
分析：
模型数据是一个对象数组
步骤：
①ui搞定
②部分选中
③全部选中
Angularjs day03
一、ng内置的服务（$http,$interval,$timeout...）
①双向数据绑定的工作原理
<p>{{num}}</p>===>ng框架自动添加一个监听（watch），和$scope.$watch是一样的，只要是数据发生了变化，视图就会更新。？？？
如何知道数据是否发生了变化？
ng会周期性的运行一个函数来检查$scope的模型数据是否发生变化，称之为$digest===>$scope.$digest()
什么时候才会调用$digest()?
ng指令，很少直接手工调用$digest(),都是$scope.$apply();==>$rootScope.$digest()
setInterval是原生js的功能，本身就是一个循环，需要我们手工调用$scope.
②$interval $timeout
var t = $interval(function(){},100);
$timeout(function(){},100);
$interval.cancel(t);
定时器练习：
使用周期性定时器来实现一个图片轮播，同时实现一个自增的计数器，当计数器大于30时自动停止。
③$http
AJAX调用：$http服务向服务器发起AJAX请求，异步的获取服务器端返回的数据，声明为模型数据，在视图中展现出来。
$http.get('url').success(function(data){....});
$http.post('url',data).success(function(data){..})
如果要发起post请求，必须设置头信息，设置的方式：
$http.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'};
练习：$http发起get请求，编写一个php文件，返回json数组。
显示在table中。
分析：apache服务跑起来，将工程放在c:\xampp\htdocs的目录中。
第一步:编写php文件，在浏览器中去访问该文件能否拿到数据
第二步：$http发起get请求，拿到数据
第三步：将数据显示在table中。
二、自定义服务
无论是哪种方式创建的服务，和ng内置的服务使用的方式都是一致：注入进来，直接拿来用
1、factory方法
app.factory('服务名称',function(){
return {
}
})
2、service方法
app.service('服务名称',function(){
})
3、constant、value
创建的服务返回是变量
app.constant('服务名称',value) ==> 创建配置数据
app.value('服务名称',value) ==》创建对象
常量服务如果注入到控制器之后，可以通过angular.extend方法进行重置
练习：使用service方法 创建一个服务，在服务中有两个方法，方法1中，启动一个定时器 每隔1s打印一句话，方法2：结束定时器；放置2个按钮，点击时分别调用服务中的方法1、方法2，
三、依赖注入
1、文件压缩
使用YUICompresspor来完成文件的压缩，使用方式有2种：
①直接通过命令行
②借助webStorm来配置
File--》Settings-->tools-->file watchers--》点击右上角的+号--》选中YUICOMPRESSOR-JS，设置program为jar包。
文件压缩的作用：
①删除所有的注释
②删除空白、没有语义的字符
③简化变量名、函数名、形参名--》混淆
2、依赖注入
每个angularjs的应用，注入器负责查找和创建依赖的服务，注入器的本质是服务的定位器，快速定位到应用需要注入的各种服务，在定位服务的过程当中，需要提供注入的标记，根据标记的不同，划分为3大类：
①推断式依赖注入（猜测）
这种方法不需要关心注入服务的顺序，ng会自动处理，根据参数列表注入服务，如果参数一旦经过混淆或者压缩，有问题。
只能处理原始的代码
②标记式依赖注入
直接调用$inject属性来完成标记式的注入声明，该属性是一个字符型的数组，由于它是数组，所以有引入的先后顺序的。
③行内式依赖注入（内联）
在构建一个ng对象时，允许开发人员将一个字符型数组作为对象的参数，而不仅仅是一个函数；在这个数组中，除最后一个元素必须是函数体外，其余都是注入的服务名称，而且顺序保持一致。
建议：使用第三种依赖注入的方式：行内式依赖注入。
练习：要求采用行内式依赖注入，创建一个服务，服务中有一个方法实现求和 add:function(arg1,arg2)
视图：两个input标签，一个按钮（调用服务的add方法将求和的结果弹窗显示出来）。
3、注入器（$injector）
定位和查找服务的。
has --》查找服务是否存在
get --》得到服务的实例
练习：在案例基础之上，放置一个按钮，点击按钮时，通过get拿到实例并调用print方法（angular.injector-->$injector 行内式依赖注入）
每日一练：
实现一个购物车：要求从php服务器获取初始化的数据，通过$http.
Angularjs day04
ng四大特征：
①采用了MVC的设计模式
②双向数据绑定（view和model）
③依赖注入
④模块化设计
一、如何自定义模块并进行调用？？
自定义模块：angular.module()
模块之间如何相互之间的调用： angular.module('myApp02',['ng','myApp01']);
模块化好处：体现“高内聚低耦合”的设计原则，提高代码的复用率，降低测试难度。
模块分类：
①ng官方提供的模块
ng\ngAnimate\ngRoute\ngTouch...
②用户自定义的模块
angular.module();
二、ng包含哪些模块
一个angularJS的模块可以包含哪些组件？？
①controller：维护模型数据
②directive：用在view中 输出/绑定Model数据
③function：forEach\toJson\fromJson
④filter：结果的筛选、过滤、格式化
⑤service：提供变量或者方法的服务
。。。
三、SPA应用以及通过ngRoute来实现的方式
单页面应用的工作原理：
①url
http://127.0.0.1/index.html#/路由地址
②浏览器请求index.html,解析路由地址
③查找路由词典，#/start ==>tpl/start.html
④获取当前路由地址 对应的真实模板的地址 start.html
⑤发起ajax请求，获取目标模板页面，将服务器返回的代码片段，插入到当前的DOM树，实现局部刷新
使用ngRoute模块来实现SPA应用的基本步骤：
①创建完整的HTML页面 index.html,引入angular.js,angular-route.js
②创建自定义的模块，指定依赖于ng\ngRoute
③指定容器，盛放代码片段 ngView
④创建模板页面
⑤配置路由词典
$routeProvider.when('/start',{
templateUrl:'tpl/start.html',
controller:'startCtrl'})
⑥测试在地址栏中 输入不同的路由地址的时候，能否将代码片段加载进来。
四、代码片段之间的跳转
模板页面之间 执行跳转的3种方式：
①直接修改地址栏中的url
②使用超链接 <a href='#/路由地址'></a>
③$location.path('/路由地址')
如果有多个代码片段，都需要通过js的方式来跳转，为每个代码片段去创建控制器 去定义jump方法，这个是不合理的，可以这么处理：借助父控制器定义方法，然后让子控制器去调用。
配置代码片段的控制器的方式：
①ng-controller
②配置路由词典设置
$routeProvider.when('/myLogin',{
templateUrl:'tpl/login.html',
controller:'loginCtrl'
});
练习：使用ngRoute来实现一个SPA应用。
创建一个完整的html--》index.html;创建2个代码片段 --》start.html register.html
start.html --> 点击按钮跳转到register,
register.html -->a 跳转到start.html
从register跳转到start
五、代码片段进行传参
使用ngRoute进行参数的传递：
①明确发送方和接收方
发送方：register
接收方：start
②配置接收方的路由以及接受参数
.when('/myStart',{
templateUrl:'tpl/start.html'
})
.when('/myStart/:id',{
templateUrl:'tpl/start.html'
})
如果接受id，
借助ngRoute服务
$routeParams.id
③发送参数
<a href='#/myStart/123'></a>
$location.path('/myStart/123')
练习：实现SPA应用
完整：manager.html
代码片段：check.html pay.html send.html
要求：
①能够实现不同页面的跳转
②check.html-->超链接跳转到pay.html，传入price,
pay.html接受参数并显示在页面中
pay.html--》按钮 点击跳转到send.html
send.html-->超链接跳转到check.html
六、动态引入页头页尾
ngInclude：
<ANY ng-include="'tpl/include/header.html'"></ANY>
七、其他模块
ngAnimate 支持js动画和css动画
①通过script 引入angular-animate.js到工程中
②指定自定义的模块，要依赖于ngAnimate
③设置cssngAnimate模块为ngView添加ng-leave和ng-leave-active、ng-enter和ng-enter-active.
八、表单
在ng中，专门针对表单和表单中的控件，提供了一些属性，用于验证控件值的状态。
$pristine 未输入过
$dirty 已输入过
$valid 验证通过
$invalid 验证未通过
$error 验证时的错误信息
Angularjs day05
基本流程：
产品经理：根据客户的需求，编写需求文档，原型图。
开发人员：根据原型图做开发
①前端：（web、android、iOS） 与后端约定好需要的接口和数据格式
②后端：写API
先去模拟json数据，能否正常显示，再与后端联合调试，交给测试部门，部署到线上，配合着运营部门，进行开发的迭代
项目的技术架构：
SPA应用：采用angularJS实现SPA应用（路由、MVC、$http）
响应式：bootStrap(视图)
服务器端：php实现与数据库的交互（数据库）
使用ngRoute搭建SPA应用的基本步骤：
①引入angular.js angular-route.js
②创建模块，指定依赖于ng、ngRoute
③ng-view
④创建代码片段
⑤路由词典
app.config(function($routeProvider){
$routeProvider.when('/start',{
templateUrl:'tpl/start.html',
controller:'startCtrl'
})
.otherwise({redirectTo:'/start'})
})
跳转：
① <a href='#/start'></a>
② $location.path('/start');
参数传递：
方式1：
①明确发送和接收 ②配置接收方的路由 $routeParams.id
③<a href='#/start/12'></a> $location.path('/start/12');
方式2：
借助父控制器或者$rootScope
方式3：
localStorage/sessionStorage...
1、项目的搭建
2、所有静态页面的编写---》运行通畅，数据静态死数据
3、调用php页面，联调。
代码片段：start main detail order myOrder
一、搭建项目框架
1、创建项目，添加css、js、img、tpl文件夹，添加必须引用的css、js文件，添加自定义的css、js文件以及img图片，并创建完整的引导页面kaifanla.html；
2、编写kaifanla.html文件：
定义模块ng-app=”kaifanla”
引入bootstrap.css以及自定义的css文件
定义用于替换模板的视图
引入angular.js angular-route.js文件，并引入自定义的js文件。
3、添加模板文件：添加 start/main/detail/order/myorder页面，每个页面中删掉原有内容，添加一个文字；
4、编写 kaifanla.js 文件
定义各自的控制器
定义路由：为所有模板定义路由，默认跳转到start
5、测试：跳转是否正常，是否有错误
Angularjs day06
基本流程：
产品经理：根据客户的需求，编写需求文档，原型图。
开发人员：根据原型图做开发
①前端：（web、android、iOS） 与后端约定好需要的接口和数据格式
②后端：写API
先去模拟json数据，能否正常显示，再与后端联合调试，交给测试部门，部署到线上，配合着运营部门，进行开发的迭代
项目的技术架构：
SPA应用：采用angularJS实现SPA应用（路由、MVC、$http）
响应式：bootStrap(视图)
服务器端：php实现与数据库的交互（数据库）
使用ngRoute搭建SPA应用的基本步骤：
①引入angular.js angular-route.js
②创建模块，指定依赖于ng、ngRoute
③ng-view
④创建代码片段
⑤路由词典
app.config(function($routeProvider){
$routeProvider.when('/start',{
templateUrl:'tpl/start.html',
controller:'startCtrl'
})
.otherwise({redirectTo:'/start'})
})
跳转：
① <a href='#/start'></a>
② $location.path('/start');
参数传递：
方式1：
①明确发送和接收 ②配置接收方的路由 $routeParams.id
③<a href='#/start/12'></a> $location.path('/start/12');
方式2：
借助父控制器或者$rootScope
方式3：
localStorage/sessionStorage...
1、项目的搭建
2、所有静态页面的编写---》运行通畅，数据静态死数据
3、调用php页面，联调。
代码片段：start main detail order myOrder
一、搭建项目框架
1、创建项目，添加css、js、img、tpl文件夹，添加必须引用的css、js文件，添加自定义的css、js文件以及img图片，并创建完整的引导页面kaifanla.html；
2、编写kaifanla.html文件：
定义模块ng-app=”kaifanla”
引入bootstrap.css以及自定义的css文件
定义用于替换模板的视图
引入angular.js angular-route.js文件，并引入自定义的js文件。
3、添加模板文件：添加 start/main/detail/order/myorder页面，每个页面中删掉原有内容，添加一个文字；
4、编写 kaifanla.js 文件
定义各自的控制器
定义路由：为所有模板定义路由，默认跳转到start
5、测试：跳转是否正常，是否有错误
二、静态页面的编写
1、起始页 start
2、菜单列表 main
header/footer/菜品列表
3、详情页 detail
4、表单提交页 order
5、个人中心页 myOrder
三、编写php页面
分析
main:
①分页查询 dish_getbypage.php
②根据关键词进行搜索 dish_getbykw.php
detail:
①根据id获取详情 dish_getbyid.php
order:
①将提交的用户数据插入到数据库中 order_add.php
myOrder:
①获取当前用户的订单信息 order_getbyphone.php
注意事项：
①初始化数据库，启动apache和mySql
②工程放在C:/xampp/htdocs/...
③调试要访问php文件，端口:80.
访问php的时候，直接将php文件内容返回了，说明访问的方式是不对的！
④写完php文件之后，浏览器先去访问，如果测试没问题，接着实现具体的模型数据、视图。
三、SQL语句的基本语法
1、MySQL分页查询
分页查询的语法如下：
SELECT 列名 FROM 表名 LIMIT 起始行, 行数 ;
提示：起始行从0开始；行数指定此次返回的最多可能数。
2、MySQL查询
精确查询：
SELECT 列名 FROM 表名 WHERE did=3;
SELECT 列名 FROM 表名 WHERE name='鸡蛋';
模糊查询：
SELECT 列名 FROM 表名 WHERE 列名 LIKE '%关键字%'
3、MySQL获取自增长的键值
获取最近的一条INSERT语句产生的自增主键，代码如下：
$id = mysqli_insert_id( $conn );
4、MySQL跨表查询/多表查询
跨表查询时，代码如下所示：
SELECT 表1.列1，表1.列2, 表2.列3, 表2.列4 FROM 表1, 表2 WHERE 表1.列=表2.列;
扫一扫
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
