盛行框架
简介
- angularjs是一款异常优异的前端高等JS框架，由谷歌团队开辟保护，能够疾速构建单页web运用，化繁为简
- 无论是angularjs照样jQuery都是用原生JS封装的
- 库：对代码举行封装，挪用封装的要领，简化操纵
- 传统体式格局是用get体式格局猎取元素，然后点要领
- jQuery库完成了对猎取体式格局的封装，对要领的封装
- 框架：供应代码誊写划定规矩，依据划定规矩去写代码，框架会帮我们完成相应的功用
- 中间：经由过程指令扩大HTML功用，经由过程插值表达式绑定数据到HTML，不推荐在掌握器中直接操纵DOM，而是经由过程指令操纵，以数据为中间，用数据驱动DOM
版本：
- 现在angularjs框架的版本是1.6.x
- angularjs框架09年降生，专注PCweb，并没有考虑到挪动端，在挪动端机能较差
- angular2框架在16年降生
- angular2并非angularjs的升级版，而是一个全新的框架
- 2016年国内已形成了angularjs，vue，react鼎足之势的形势，angular2占有的市场份额依然比较小
- 企业内里用的比较多的依然是angularjs框架
猎取体式格局
- 在官网上下载 http://angularjs.org
- 经由过程CDN的体式格局引入到页面中
<script src=”https://cdn.bootcss.com/angul…; ></script>
插值
- {{}}这类双大括号的情势称之为插值表达式
- 能够写ng中的变量
- 能够显现字符串
- 能够在表达式中能够举行盘算
- 能够在表达式中写三目运算符
- 能够挪用函数
- 实行angularjs函数
不能写if else语句
<div>{{val}}</div> <div>{{'angularjs'+'很好很壮大'}}</div> <div>{{1+1}}</div> <div>{{1==1?'相称':'不相称'}}</div> <div>{{getItem()}}</div>
基础指令
在运用了angularjs的页面，以ng-开首的属性，称之为指令
<body ng-app></body> <input type="text" ng-model="val" ng-init="val">ng-app
- 页面加载完成今后angularjs会在页面中查找这个指令
- 没有找到这个指令，angularjs将不会启动
- 找到这个指令，angularjs将会实行指令地点标签内部包裹的代码
- 能够吸收模块名字作为参数 angularjs会将当前页面交给指令所指定的模块去管
ng-model=”变量”
- 猎取表单元素的值，完成双向数据绑定
ng-click=” “
- 给指令地点元素绑定点击事宜，不能写原生js代码
ng-init
- 初始化数据
模块化
- 模块化开辟带来的优点：轻易治理，复用，后期保护轻易
- 处置惩罚代码争执，轻易多人合作开辟
- angularjs中模块的品种：进口模块、功用模块
- 定义模块时第二个参数加与不加的区分：加第二个参数是竖立模块，不加第二个参数是猎取模块
模块化四步
竖立模块，myApp是模块的名字，module要领，数组中要依托的模块的名字，用逗号衔接。没有要依托的文件的话，传空数组。
<script> var app=angular.module('myApp',[]); </script>ng-app背面写模块的名字，关照angularjs当前的页面由自身竖立的myApp模块去治理
<body ng-app="myApp"></body>竖立掌握器，竖立模块的语句的返回值就是一个模块对象，用这个对象去点要领，就是竖立掌握器
<script> app.controller('demoCtrlA',function(){ alert(1) }); app.controller('demoCtrlB',function(){ alert(2) }); </script>关照angularjs当前地区由这个掌握器去掌握
<div class="sideBar" ng-controller="demoCtrlA"></div> <div class="main" ng-controller="demoCtrlB"></div>- 兄弟掌握器设置雷同的属性，不会争执
双向数据绑定
- 双向：html和js
- 数据：angularjs中的变量
- body标签中的ng-app示意当前页面由myApp治理，ng-controller示意当前地区由demoCtrl这个掌握器掌握
- input标签中的ng-model示意猎取表单元素的值
- div标签中显现这个值
- 两个按钮离别注册点击事宜，一个设置值一个猎取值
在掌握器中封装两个函数
<body ng-app="myApp" ng-controller="demoCtrl"> <input type="text" ng-model="val"> <div>{{val}}</div> <button ng-click="setValue()">设置值</button> <button ng-click="getValue()">猎取值</button> <script src="node_modules/angular/angular.min.js"></script> <script> var app=angular.module('myApp',[]); app.controller('demoCtrl',function($scope){ $scope.val="我是初始值"; $scope.setValue=function(){ $scope.val="我是经由过程setValue要领变动的值" } $scope.getValue=function(){ alert($scope.val) } }) </script> </body>
路由
- 路由就是用来设置页面之间的跳转关联的，设置锚点与页面之间的对应关联
- 在angularjs中路由并没有集成在angular.js文件中
- 路由作为一个零丁的模块存在，假如要运用路由，我们须要将路由模块作为主模块的依托模块
- 主模块或进口模块 == 治理页面的谁人模块
- angularjs中模块依托的步骤：将要依托的模块文件引入到页面中，将模块的名字写在主模块的第二个参数中
- $routeProvider路由设置对象，名字临时不能改
- angularjs会将猎取到的模板文件内容放在页面中有ng-view指令的元素中
- angularjs要求，锚点值必需以/开首，在路由设置中使不须要写#号
- 当我们运用了路由今后，就不须要直接在页面中写ng-controller指令
传参
- 在被通报参数页面（详情页）的路由中设置参数占位符，类似于函数的形参
- 在通报参数页面（列表页）的跳转链接中将现实的参数通报过去
- 在被通报参数页面（详情页）的掌握器中猎取通报过来的参数
通报多个参数，直接接在背面写，只要和背面逐一对应起来就可以够
<ul> <li><a href="#!/article/1/我是第1篇文章">我是第1篇文章</a></li> <li><a href="#!/article/2/我是第2篇文章">我是第2篇文章</a></li> <li><a href="#!/article/3/我是第3篇文章">我是第3篇文章</a></li> </ul> <script> var app=angular.module('myApp',['ngRoute']) app.config(function($routeProvider){ $routeProvider .when('/article/:id/:title',{ templateUrl:'articleTpl', controller:'articleCtrl' }) }); </script>
单页web运用
- 单页面运用程序的特性：全部网站由一个页面组成，群众部份只加载一次，应用Ajax部分革新到达页面切换的目标，不会发作页面跳转白屏的征象，锚点与页面对应
单页web运用的运用场景：单页面运用对搜刮引擎不友好，不适合做面向群众的展现型网站，网站背景治理体系、办公OA、夹杂App等等不须要被搜刮引擎搜刮到的运用
<script src="node_modules/angular/angular.min.js"></script> <script src="node_modules/angular-route/angular-route.min.js"></script> <body ng-app="myApp"> <a href="#!/index">首页</a> <a href="#!/list">列表页</a> <div ng-view></div> </body> <script> var app=angular.module('myApp',['ngRoute']) app.config(function($routeProvider){ $routeProvider .when('/index',{ templateUrl:'./tpl/index.html', controller:'indexCtrl' }) .when('/list',{ templateUrl:'./tpl/list.html', controller:'listCtrl' }) .otherwise('/index') }); app.controller('indexCtrl',function($scope){ $scope.msg="我是首页msg" }) app.controller('listCtrl',function($scope){ $scope.msg="我是列表页msg" }) </script>
三种模板体式格局
<script>
templateUrl:'./tpl/index.html'//localhost
template:'<div>我是首页</div>'//file|localhosst
template:'indexTpl'//file|localhosst
</script>$scope
- 能够通报的参数有许多，不须要逐一写出来
- angularjs中通报参数不能依托递次而是名字
- 假如形参名字转变了，angularjs就不晓得要干什么了
- 处置惩罚要领：第二个参数写数组，回调函数放到数组中
紧缩的时刻，不会对字符串举行紧缩，所以数组中通报字符串来肯定参数的递次
<script> angular.module("myApp",[]).controller("demoCtrl",["$scope","$timeout","$http","$location",function(a,b,c,d){ a.msg="我是msg" }]) </script>
作用域
- 作用域就近准绳
- angularjs中掌握器掌握的地区就是一个部分作用域，
- 也就是$scope代表部分作用域
- $rootScope代表全局作用域
- 变量先顺着$scope找，找不到就去全局找
- 能够挂载群众属性要领
遍历
ng-repeat=”轮回过程当中确当前项 in 数据”轮回数据并天生当前DOM元素
<ul> <li ng-repeat="item in arr">{{item}}</li> </ul>遍历数组对象，能够嵌套，有ng-repeat的标签中还能够嵌套ng-repeat的标签
<ul> <li ng-repeat="person in person"> {{person.name}}{{person.age}} <span ng-repeat="item in person.hobby">{{item}}</span> </li> </ul>数组项反复，会报错
<ul> <li ng-repeat="item in arr track by $index">{{item}}</li> </ul>
其他指令
- ng-class=”{‘类名1′:布尔值,’类名2’:布尔值}”特地用来增加或许删除类名，吸收的值是一个对象，布尔值为真，增加类名，布尔值为假，删除类名
- 复选框，ng-model用来猎取复选框的值，是一个布尔值
- ng-bind=”数据”，将msg放到属性中举行加载，防止涌现闪灼结果
- ng-bind-template=”{{数据1}} {{数据2}}”
- ng-non-bindable直接获得插值表达式中的内容，只要与属性相干，都不实行
- ng-show=”布尔值”，掌握元素的显现和隐蔽
- ng-hide=”布尔值”，掌握元素的显现和隐蔽
- ng-if=”布尔值”，掌握元素的显现和隐蔽 true 显现 false 隐蔽
- ng-switch&ng-switch-when用法和switch-case类似
事宜指令
- onclick => ng-click
- onmouseenter => ng-mouseenter
- onchange => ng-change
- ng-dblclick 双击事宜
- ng-src没有src就不会剖析就不会报错，直到angularjs加载完成，剖析ng-src以后再天生src
- ng-href同上
- ng-options用来轮回下拉列表，不能零丁运用，须要合营ng-model一同运用
要求数据
- 要要求数据须要先引入js文件
- 引入的js文件作为依托文件，掌握器中必需写入$http
- $http–>要求的地点，相当于jQuery中的ajax
- method–>type要求的体式格局
- params–>data只用于get传参
- data能够用于post传参
- $http点then背面是两个回调函数
- 第一个回调函数是胜利回调
- 第二个回调函数是失利回调
res是形参，示意要求返来的数据
<script src="node_modules/angular/angular.js"></script> <script src="node_modules/angular-sanitize.min.js"></script> <script> angular.module('myApp',['ngSanitize']) .controller('demoCtrl',['$scope','$http',function($scope,$http){ $http({ url:'./test.json', method:'post',//要求体式格局 params:{//get传参 a:1, b:2 }, data:{ c:3, d:4 } }).then(function(res){ //胜利回调 console.log(res) },function(){ //失利回调 }) //别的一种写法 $http.get('./test.json',{params:{a:1,b:2}}).then(function(res){ //get体式格局传参 console.log(res) }) $http.post('./test.json',{c:3,d:4}.then(function(res){ //post体式格局传参 console.log(res) }) }]) </script>
jqLite
- 为了轻易DOM操纵，angularjs供应了一个jQuery精简版，叫做jqLite
- $(原生的JS对象)将原生JS对象转换成jQuery对象，目标是为了运用jQuery对象下面供应的要领
- angularjs.element(原生JS对象)将原生JS对象转换成jqLite对象，目标是为了运用jqLite对象下面供应的要领
- 这里angularjs.element相当于jQuery中的$
- jqLite中要领的运用和jQuery高度类似
$watch
- $watch用来监控数据的变化
- 第一个参数是要监控的数据，第二个参数是回调函数
- 回调函数中第一个参数newValue是用户输入的最新内容，第二个参数oldValue是上一次用户输入的内容
页面一上来的时刻，回调函数会先实行一次
<script> $scope.$watch('val',function(newValue,oldValue){ if(newValue.length>10){ $scope.tips="大于10"; }else{ $scope.tips="小于10" } }) </script>
$apply
- 当经由过程原生JS将angularjs中的数据做了转变今后，angularjs不晓得，所以须要挪用$apply()要领关照angularjs更新html页面
自定义指令
- return中是对DOM操纵的全部内容
- templateUrl或许运用template引入模板
- replace将自定义指令标签自身删掉，只显现模板的内容
- transclude将自定义标签内部的内容保存，合营ng-transclude指令运用，模板中span标签运用了ng-transclude，所以自定义标签内部的内容会显现在span标签
假如自定义指令中的内容是用标签包裹的，会被剖析出来
<script> angular.module('myApp',[]) .directive('myHeader',[function(){ return { templateUrl:'myHeaderTpl', replace:true, transclude:true } }]) </script>- return中link是angularjs供应的特地写DOM操纵的处所
link中的函数有三个参数
- scope向指令的模板地区暴露数据
- element是指令地点的元素，是jqLite对象，能够直接运用jqLite要领
- attributes是元素身上属性的鸠合，假如有多个元素须要制订，用attribute
- css中内容不能写死，attribute是一个属性鸠合，attributes.myDir点出属性
return中有scope，默许是false，这时候，link中的scope就是掌握器中的$scope，假如将scope设置成turn，指令就有了零丁的作用域
<script> angular.module('myApp',[]) .directive('myDir',[function(){ return { link:function(scope,element,attributes){ element.css('background','red') element.css('background',attributes.myDir) } } }]) </script>
分类
- 标签指令element E
- 属性指令attributes A
- 款式指令class C
- 解释指令comment M
- return中能够用restrict设置
MVC&MVVN
MVC后端头脑
- model模子，跟操纵数据相干的要领，用angularjs中的效劳来完成
- view视图，用户界面
- controller掌握器，重要用来写一些营业逻辑
MVVN
- model模子，跟操纵数据相干的要领
- view视图，用户界面
- viewmodel在双向数据绑定的框架中，$scope帮我们同步HTML页面
- angularjs是基于MVVM头脑的框架
过滤器
- 过滤器：将数据花样化成我们想要的形式
- {{ 数据模子 | 过滤器的名字:过滤器的参数:多个参数以冒号离隔 }}
内置过滤器
- currency，钱银过滤器，传参示意前边的标记
- date，日期过滤器，传参能够转变date的时候情势，能够用短横支解，也能够写汉字
- filter，将数据依据某种划定规矩举行过滤，隐约过滤（去数据中每个字段中查找）和准确过滤（去数据中指定的字段中查找）
- limitTo，限定，第一个参数limit 限定的数目，能够为负数，从后往前最先限定，第二个参数begin，从第几个最先限定
- orderBy，排序，orderBy:’字段’ 默许是升序，orderBy:’-字段’ 降序，依据age字段，升序分列
- number，数字过滤器，传参示意保存几位小数
- uppercase，大写
- lowercase，小写
- json将数据一个优越的花样展现到页面中，重要用于调试，要合营HTML页面中的pre双标签有一个参数用来掌握缩进
自定义过滤器
- 模块对象.filter(‘过滤器的名字’,[function() {return function(value){return 数据}}])
<script> angular.module('myApp',[]) .filter('phonestar',[function(){ return function(value){ return value.substr(0,3)+'****'+value.substr(7) } }]) </script>
效劳
- 模块对象.service(‘效劳的名字’,[function(){this.name=”qwe”;alert(this.name)}])
ui-router
- 路由模块的名字ui.router
- 模块须要引入uirouter的依托文件
- 用$stateProvider设置路由的对象
- $urlRouterProvider设置没有匹配到路由时的默许跳转位置
- url示意锚点值
- template衬着模板
name是路由名字，必需存在
<script> angular.module('myApp',['ui.router']) .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){ // $stateProvider 设置路由的对象 $stateProvider .state({ url:'/index', // 锚点值 templateUrl:'indexTpl', name:'index', controller:'indexCtrl' }) .state({ url:'/list', // 锚点值 templateUrl:'listTpl', name:'list', controller:'listCtrl' }) // 当没有匹配到的路由时 默许跳转到首页 $urlRouterProvider.otherwise('/index'); }]) .controller('indexCtrl',['$scope',function($scope){ $scope.msg = "indexCtrl"; }]) .controller('listCtrl',['$scope',function($scope){ $scope.msg = "listCtrl"; }]) </script>
gulp
- gulp官网(英文)gulp官网(中文)
观点:
- 前端自动化流式构建东西
- 我们能够运用gulp编写一些机械化的使命
- 有用进步开辟效力 改良开辟体验
申明
- gulp这个东西依托node环境 所以在运用gulp之前须要装置node环境
- 就像我们运用bootstrap要先引入jQuery是一个原理
- 编写gulp使命运用JS语法
下载gulp
- npm install gulp
- 在项目标根目录运转这个敕令，会自动天生一个node_modules文件夹 gulp会被下载到这个文件夹中。
- node_modules文件夹中除了gulp之外，还会多出许多文件，这些都是gulp所要依托的文件。
运用gulp编写使命
- gulp要求我们在项目标根目录下新建一个gulpfile.js文件，这个文件是特地用来编写gulp使命的。
就像运用angularjs框架须要引包一样，要运用gulp也须要引包
// require('包名') 引包 var gulp = require('gulp'); // gulp变量是对象范例 // 我们编写使命 处置惩罚使命须要用到gulp对象下面的要领编写人生中的第一个gulp使命
// gulp.task('使命称号',使命回调函数) 竖立使命要领 // 使命称号的用途:在实行使命的时刻须要指定使命称号 // 回调函数:要做的事变须要写在回调函数中 比方less剖析 代码紧缩... gulp.task('first',function(){ // gulp.src('文件途径') 猎取文件 // 猎取使命要处置惩罚的文件 gulp.src('./css/base.css') // pipe('如何处置惩罚') 处置惩罚使命 // gulp.dest('文件途径') 将处置惩罚好的文件放入参数途径中 .pipe(gulp.dest('dist/css')) });
实行使命
- 使命编写在了gulpfile.js文件中，要实行使命，就须要运转这个JS文件，那末题目来了，我们之前编写的JS文件，都邑引入到HTML页面中，然后运转HTML文件，JS就可以实行了
- 装置一个gulp-cli东西即可
- 在敕令行中的恣意目录下实行下面的敕令
- npm install gulp-cli -g
- -g 代表全局装置 目标是在其他项目中也能够运用这个东西
- 装置完成今后在项目标根目录下输入以下敕令就可以够实行使命了
- gulp 使命称号
gulp中供应的要领
- gulp.src() 猎取使命要处置惩罚的文件
- gulp.dest() 输出文件
- gulp.task() 竖立gulp使命
- gulp.watch() 监控文件的变化
- gulp自身供应的要领不多,大多数的使命都是由插件完成的
