AngularJS+npm+bower相关笔记(三)

2019-04-14 16:47发布

0.AngularJS所有的代码版本信息都在https://code.angularjs.org/这个网站上,各种AngularJS的压缩版、非压缩版、独立模块儿(Angular插件)都有。


1.JSONP是一种跨域的解决方案


2.AngularJS自定义服务(每一个服务实际上在代码上呈现的就是一个模块儿)
◆factory:【
◇App.factory("showTime",['$filter',function($filter){
// 在方法中可以做任何事儿,但最后必须直接显式返回一个对象
return {
now:function(){
console.log(Date);
}
}
}]);
◇定义好的服务就可以在控制器中直接依赖注入,就像依赖注入其它服务一样
App.controller('DemoController', ['$scope', 'showTime', function ($scope, showTime) {
$scope.now =showTime.now();
}]);

◆ service:【
◇App.service("showTime",['$filter',function($filter){
//要以this的名义来添加方法
this.now=function(){
console.log(Date);
}
}]);
◇定义好的服务就可以在控制器中直接依赖注入,就像依赖注入其它服务一样
App.controller('DemoController', ['$scope', 'showTime', function ($scope, showTime) {
$scope.now =showTime.now();
}]);

◆ value:【
◇本质上一个服务,从表现形式上是一个常量,常量就是不变的值与变对量相对应,直接使用应用.value来定义,是一个自定义的常量服务,App.value("author",'zzz');
◇// 声明依赖调用服务
App.controller('DemoController', ['$scope', 'author', 'version', function ($scope, author, version) {
$scope.author = author;
}]);
◇直接使用value方法定义,然后立马可以在控制器中依赖注入,直接使用,最为方便了。



◆ factory是需要返回一个对象的,service是需要在this上添加成员的,value是直接定义,这三种各有各的特点。


3.AngularJS模块儿加载
◆AngularJS模块可以在被加载和执行之前对其自身进行配置。可以在应用的加载阶段配置不同的逻辑。
◆ 开始->浏览器解析DOM树->遇到angular.js停止解析,开始执行脚本呢->Angular监听DOMContentLoaded事件(页面dom加载结束后)->启动Angular应用(也就是ng-app)->查找模块儿依赖->寻找ng-app指令->初始化必要组件($injector/$compie/$rootScope,也就是解析指令、依赖注入的一些必要模块儿)->配置和运行(你自己改变的AngularJS默认配置)->开始解析DOM树->$compie遍历DOM数,搜集指令->执行每个指令的compile函数->处理DOM转换,编译模板->调用链接函数,生成实时视图->等待时间触发,执行$digest循环,检测到变化,调用$watch函数->再次执行$digest循环,直到没有变化->结束
◆ 配置模块儿(功能上讲就是配置服务):【
◇通过config方法实现对模块儿的配置,AngularJS中的服务大部分都对应一个provider,用来执行与
◇$log、$http、$location都是内置服务,相对应的“provider”分别是$logProvider、$httpProvider、$locationPorvider。
◇取消某一个默认的功能:App.config(["$logProvider","$httpProvider",function($logProvider,$httpProvider){
$logProvider.debugEnabled(false);//那么就禁用了$log.debug这个功能了,当你在调用的时候就会无效。
}]);,允许一次配置多个服务(模块儿),传递的是一个数组,也还是以依赖注入的方式。
◇新注册某一个默认的功能:App.config(["$filterProvider",function($filterProvider){
//默认的九个格式化过滤器,通过配置可以新增加格式化过滤器
$filterProvider.register('capitalize'){
return function(input) {
//首字母大写
return input[0].toUpperCase()+input.slice(1);
}
}
}]);

◆ 运行模块儿:【
◇服务也是以模块形式存在的,且对外提供特定功能,前面学习中都是将服务做为依赖注入进去的,然后再进行调用,除了这种方式外,也可以直接运行相应的服务模块,AngularJS提供了run方法来实现。
◇不但如此,run方法还是最先执行的,利用这个特点,可以将一些需要优先执行的功能通过run方法来运行,比如验证用户是否登录,未登录则不允许进行任何其它操作。
◇App.run(['$http',function($http){
$http({
url:'example.php',
method:'get'
})
}]);
◇$rootScope是应用的根作用域,也是一个应用最外层的服务,
App.run(['$rootScope',function($rootScope){
$rootScope.name='祖宗';
}]);,直接可以在视图中使用{{name}}来调用了,不要通过控制器来注入模型的方式使用了,$rootScope的作用域是根作用域,而$scope的作用域在rootScope作用域之中,也就是说$rootScope是应用程序的作用域,而$scope是一个控制器的作用域,一个应用可以有多个控制器,一个控制器只能有一个应用,所以应用的作用域就是根作用域。




4.页面性能优化
◆ js会阻塞浏览器解析html标签
◆ js最好不要卸载head里面
◆ 性能优化,直接百度搜索,雅虎14条,就能够看到。
◆ 


5.路由
◆ SPA(Single Page Application)单页面应用
◇不产生页面跳转
◇把若干功能集成到一个页面
◇动态生成数据,通过ajax异步获取
◇为了增强用户体验
◇可以提升性能
◇仿制手机APP的交互
◆ 锚点是前端的功能,路由是通过对锚点的处理来实现的
◇监听锚点改变的事件:hashchange
◇window.addEventListener('hashchage',function(){
var hash=location.hash;//获取锚点部分的信息
//创建异步对象
var xhr=new XMLHttpRquest();
//设置请求方式和url
xhr.open('get',url,true);
//监听状态改变 xhr.onreadystatechange=function(){
//判断请求是否成功
if(xhr.readyState==4&&xhr.status=200) {
//返回结果
xhr.responseText;
}
}
//发送请求
xhr.send(null);
});
◇原理是通过获取到的锚点信息,然后异步请求对应的url,将请求的结果添加到指定的页面活动区域中,从而实现了不刷新而切换页面的效果
◇在单一页面中可以通过hashchange事件监听到锚点的变化,进而可以实现为不同的锚点准不同的视图,单页面应用就是基于这一原理实现的。
◇AngularJS对这一实现原理进行了封装,将锚点的变化封装成路由(Route),这是与后端路由的根本区别。
◆ 在1.2版前路由功能是包含在AngularJS核心代码当中,之后的版本将路由功能独立成一个模块,需要下载angular-route.js(https://code.angularjs.org/)【
◇先引入核心脚本
◇再引入其它插件脚本
◇when表示判断是否符合某一个路由规则进入,otherwise表示当不符合其它路由规则时才进入,template表示视图区域替换的模板(字符串内容),templateUrl表示视图区域替换的模板(引入外来的资源文件,如html),controller表示引入的视图模板所属哪个控制器(用于指定某个控制器中的数据传递到引入的视图中),redirectTo表示进入otherwise后跳转某个路由规则中去(只能够在otherwise中使用)脚本代码:【
//依赖ngRoute模块儿
var App=angular.module('App',['ngRoute']);
//需要对路由模块儿进行配置,使其正常工作。
App.config(['$routeProvider',function($routeProvider){
//如果路由是 /index
$routeProvider.when('/index',{
//替换后的视图模板内容
template:'

index Pages!

';
//如果路由是/introduce
}).when('/introduce',{
//替换后的视图模板内容
template:'

introducePages!

';

}).when('/list',{
//直接引入外部视图模板
templateUrl:'./list.html',
//设置视图模板所属的控制器
controller:'ListController'


//如果路由不是以上的而是其它的
}).otherwise({
//跳转到其它路由
redirectTo:'/index'
});
}]);

◇html视图代码【

index
introduce
list








◆ 当制定的路由规则中需要传递其它参数时,有两种传递方式

◇显式传递,这种方式可以实现知道形式参数的名字,也就是知道key是什么,推荐使用,$routeProvider.when('/index/:id/:name',{}),:id表示一个指定的形参,AngularJS提供了一个专门负责获取参数的一个服务$routeParams,可以在你指定的视图模板所属的控制器中依赖注入这个服务,然后从中获取,$routeParams["id"]就能够获取传递过来的数据,当然此时的html标签的锚点格式就是这样的index,$routeParams["id"]获取到的值为1,$routeParams["name"]获取到的值为stu。
◇隐式传递,这种方式不能事先知道形式参事的名字,并不会事先知道key是什么,第二种传递与路由规则没有多大关系了,但是可以通过$routeParams来获取,index,$routeParams["sex"]获取到的值为0,$routeParams["aihao"]获取到的值为play。



◆ 


6.前端做的写页面,做交互,传递数据
◆后端会说明需要什么样的参数



7.在php中如果你不给数组元素设置下标或者设置的下标没有按照顺序,php会自动给数组元素按照顺序的分配小标的,如$arr=Array();$arr[]=1;$arr[]=2;print_r($arr);//$arr[0]=1;$arr[1]=2;,所以不需要你手动的去写下标了,也不用担心下标写错了。



8.AngularJS内置了一个精简版jQuery,在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite,通过angular.element可以将一个DOM元素转成jQuery对象,如果提前引入了jQuery,则angular.element则完全等于jQuery了。
◆AngularJS可以通过element方法将一个dom对象转换为jquery对象,var box=document.getElementById("box");box=angular.element(box);console.log(box);//一个简单的jQuery.fn.init对象,



9.一款管理静态资源的软件 bower
◆基于NodeJS来开发的一个静态资源管理工具,由twitter公司开发维护,解决大型网站中静态资源的依赖问题。
◆bower就是用来下载插件的,就像后端的包管理工具用来下载一些开源的插件,可以简单快捷的从github里面下载一个些插件,不需要你去到网上找了,而且还支持模糊搜索,通过bower search 插件部分名称,就能够找到与该插件相关的一些信息。
◆bower是使用nodejs开发的,要想使用bower,需要先安装nodejs,nodejs就是一个软件,正常安装nodejs即可,nodejs不要装到中文目录里。
◆验证电脑是否安装了nodejs,cmd命令输入node -v,如果下一行返回了版本号,那么则证明nodejs安装成功。
◆npm(Nodejs Package Manager)是专门用来管理使用nodejs来开发的工具的管理器。
◆验证电脑是否安装了nodejs里的软件管理工具npm(Nodejs Package Manager),cmd命令输入 npm -vv,如果下一行返回了版本号,那么则证明npm安装成功。
◆安装bower,使用npm进行安装 npm install 工具名称(bower) -g,-g表示全局安装,可以在操作系统任何一个地方直接访问


10.npm(Nodejs Package Manager)是专门用来管理使用nodejs来开发的工具的管理器。
◆依赖NodeJS环境和git工具。
◆npm install -g bower --registry=https://registry.npm.taobao.org安装bower,在国内下载bower,不然就会去国外下载bower了,国内有些人将国外的资源做了一个镜像(备份),所以可以在国内的服务器进行下载了。
◆安装bower完毕之后,打开git brsh,然后通过bower来进行操作【
◇原理是从github里面进行查询然后再下载到指定的目录中去。
◇可以通过搜索部分资源信息来找到资源,支持模糊搜索
◇并且下载后的资源会产生强制性的依赖,通过uninstall进行卸载时必须将主资源卸载才能够卸载其它被依赖的资源,因为下载主资源后,会同时产生一个bower.json的文件,里面的dependencies就写了依赖于哪些文件,这个文件里写了关于这个插件的所有信息,如果有依赖文件,那么就会去下载指定的依赖文件。
◇bower search 查找资源信息
◇bower install  安装(下载)资源,通过#号可以指定版本号,bower install jquery#1.7.2
◇bower info 查看资源信息
◇bower uninstall 卸载(删除)资源
◇bower init初始化(在windows下只能使用cmd来操作),用来记录资源信息及依赖。

◆如果要查看npm安装了哪些软件,可以输入npm -g list --depth=0 ,就能够查看到本机使用npm安装了哪些软件,-g表示全局查找,--depth表示深度,如果不写=0,那就会递归查找软件的所有子文件,太多了,=0直接返回软件名称,不找子文件。