Angular:
SPAS:单页应用程序
MVC:
M(model):数据模型
V(view):视图
C(controller):控制器
控制器是用于协调数据模型和视图之间的关系,视图和模型都是相互独立的
为什么要使用MVC?
希望代码重用性更强,降低视图和数据模型的耦合度(粘连成都)
Anguler:
模块:每一个部分都可单独成立一个模块
指令:ng开头的属性,有特殊意义的属性
服务:自定义服务和内置服务
控制器:用于协调数据类型和视图->主要写逻辑的部分
路由:一条线进,多条线出
特征:允许使用MVC的方式书写代码
数据模型的双向绑定
模块:允许创建很多模块,必须有一个入口模块
入口模块与创建其他模块一样,可以通过ng-app指令指定哪一个模块是入口模块
指令:
ng-app:指定入口模块 | 指定angular的有效区域(作用域),一般都写在html或者body中
{{}}:表达式、变量
注意:如果表达式或者指令失效
1、是不是没有写ng-app
2、表达式或者指令没有写在ng-app指定的范围之内
3、ng-app指定的入口模块名字是否错误
4、没有引入JS文件
ng-model:用于指定数据模型,用在输入框中
ng-bind:用于绑定数据模型
ng-repeat:类似于for in 用于遍历数组,这个指令写在哪个dom元素上面就会重复某一个dom元素
如果数组中有重复数据会报错,可以在遍历的时候通过track by来指定一个不重复的参考物($index)
ng-init:初始化数据模型
ng-class:用于设置元素类名
字符串:可以是变量也可以是具体的值
对象:key:类名,值:表达式 如果表达式是真的就会选择这个类
数组:可以使字符串也可以是对象
模块:
angular是一个对象,里面有一个叫imodule的函数需要传递个参数->
1.模块的名字。
2.需要使用其他模块的名字
angular.module(‘模块的名字’,[‘需要使用其他模块的名字’,’模块2’]);
创建完模块之后,可以通过ng-app指定入口模块 ->一个单页SPAS只能有1个入口模块
控制器:是angular里面的一个函数,controller需要传两个参数 ->
1.控制器的名字
2、回调函数
angular.module(‘app’,[]).controller(‘控制器的名字’,回调函数);
创建了控制器并不代表使用了控制器->需要在html中通过指令(ng-controller)来指定控制器的名字
<div ng-controller='控制器的名字'></div>
注意:控制器的名字不要写错
$scope
:控制器的作用域,类似命名空间,只能在当前的控制器中,使用$scope
上面的数据模型
模块的注入:
angular.module('app',['app.conteoller']);
angular.module('app.controler',[])
.controller('homeControlller',function($scope){
});
服务:
内置服务:
$timeout
:定时器
$interval
:定时器
使用步骤:
1、注入服务
2、使用服务
angular.module('app.controler',[]) .controller('homeControlller',function($scope,$timeout,$interval){
$scope.username='xiaoming';
$timeout(function(){
$scope.username='小明';
},3000);
$interval(function(){
$scope.username='小明'+Math.random();
},1000)
});
$http:
自定义服务:
是angular里面的一个函数
Service() -> 1、服务名 2、回调函数
为什么要使用服务?
控制器中有很多相同的功能 -> 把相同功能的代码抽取为一个服务,在需要使用这个功能的地方应用
angular.module('app',['app.controler','app.service']);
angular.module('app.controler',[])
.controller('homeControlller',function(DateTool){
console.log(DateTool.toTimeStamp(new Date()));
});
angular.module('app.service',[])
.service('DateTool',function(){
this.toTimeStamp=function(date){
return date.getTime();
}
});
Scope中的$apply
和$watch
:
$apply
:用于传递数据模型的值到界面上 ->用于回调函数中不可以直接传递数据模型的值到界面上
$watch
:用于监听界面上的数据模型值发生改变时候的状态
$scope.$watch('username',function(newValue,oldValue){
console.log(newValue,oldValue)
})
Angular-router(ngRouter)
SPAS:单页面的应用程序
两大块:
1.配置路由
a.引入angular-route
b.注入ngRoute这个模块
c.通过angular对象中的config的函数去配置路由
d.在config中传入一个回调函数,回调函数的参数中有routProvider->两小块部分
2.通过ngView展示路由中的内容
两小块:
1.通过routerProvider配置每一个路由的内容
a.通过when这个函数指定路由的名字和内容
2.Otherwise配置重新定向的位置
注意:1.6在指定路由跳转到路由位置的时候会出现乱码,可以使用$locationProvider修复
$locationProvider.hashPrefix("");
自定义指令:
自定义指令的目的:要封装视图
方法:Directive()需要传两个参数
1、指令的名字
2、回调函数 -> return -> {} -> 指令的内容
.directive("ucai",function () {
return {
restrict:"EAC",
// template:"<button>ucai按钮</button>"
template:"<div><h1>ucai</h1><p>ucai介绍</p><ul><li>1.xxxxx</li><li>2.xxxxx</li></ul></div>"
}
})
Ionic:
是angular里面的一个UI框架 -> 主要用于写移动端
Ionic的安装和创建
npm i ionic -g
npm i cordova -g
创建工程:
1、通过命令行去创建(脚手架CLI)
创建工程:ionic start 工程的名字 模板的名字
生成移动端执行的平台:ionic add platform ios android
同步代码到ios android 平台的代码中:ionic build ios android
2、通过可视化的工具(ionicLab)创建
移动端的方式:
web技术:
webApp:是一个可以执行在手机浏览器中的网站,没有自己的入口,或者嵌入到其他应用程序中
hybridApp:混合开发,即使用原生技术又使用前端的技术
Ionic+cordova
RN React Navitive
好处:热更新 -> 不需要在应用商店中更新版本 -> 可以直接让应用程序里面的内容更新
原生:OC Swift Java
NativeApp - > 是使用ios 中的SDK和AndroidADK开发的应用程序
优点:用户体验好,流畅
缺点:开发周期长,不能跨平台
Run:是angular里面的一个函数
应用程序开始执行的时候会先执行这个run函数
所有应用程序配置相关的 都写在run里面 比如配置android的底部分栏的位置
在run这个函数中 可以使用rootScopt(根作用域)
Config:angular里面可以用于配置路由的函数
UI-Router:也是在config中配置路由
与ng-route不同的是,UI-Router是根据路由的状态 去切换页面(也可以根据地址切换(href的锚点
))
使用方法:
1、引入UI-Router
2、注入UI-Router模块
3、在config中配置路由
4、每一个路由都是通过state这个函数配置
a、路由状态的名字->字符串
b、当前路由状态的详细配置->对象i、母板
1、没有views
2、Abstract:设置为母板ii、视图
1、需要设置views
2、在views里面需要设置视图的名字(每一个分栏都对应着一个视图)
3、如果有一个分栏中有多个页面需要展示 是通过(导航)跳转到其他页面,每一个页面视图的名字都是相同的
5、也是通过otherwise重新定向页面
6、每一个路由里面的内容,是通过UI-View展示
Ionic:UI框架
Ionic里面包含路由,路由使用的是uirouter
分栏:
外层:ion-tabs
Tabs-颜色:设置分栏的背景颜色
Tabs-icon-方向:图标的位置
Tabs-icon-only:设置只有图标没有文字
内层:ion-tab -> 每一个分栏都对一个视图 -> 每一个视图都对应着多个页面
icon-on:选中时候的图标
icon-off:未选中时候的图标
Title:分栏的标题(图标底部的文字)
内容的展示:
Tabs中 每一个tab都对应着 需要展示的视图,这个视图可以使用ion-nav-view表示 通过name的属性来区分不同视图。
在index中视图也是通过ion-nav-view来展示,具体展示的内容根据路由对应视图的名字决定
视图部分:
两层:
Ion-view:包含导航栏设置的部分
设置导航栏的标题:view-title
设置导航栏上的按钮:ion-nav-buttons
Side:left(默认) right
设置多个按钮 在ion-nav-buttons中添加
Ion-content:只用于设置展示内容的部分
ionic:中设置安卓平台分栏在底部和导航栏在底部标题居中
在config中添加$ionicConfigProvider
:
$ionicConfigProvider.platform.android.tabs.position("bottom");
$ionicConfigProvider.platform.android.navBar.alignTitle("center");