南浔建设网站,全国企业信息公开系统,h5页面设计是什么意思,海报设计模板网站1、AngularJs中的Module可以包含哪些组件#xff1f;#xff08;1#xff09;value#xff1a;保存可以在不同的controller之间共享的对象、数据#xff08;2#xff09;constant#xff1a;保存可以在不同的controller之间共享的常量#xff08;3#xff09;service1value保存可以在不同的controller之间共享的对象、数据2constant保存可以在不同的controller之间共享的常量3service保存可以在不同的controller之间共享的对象、数据、操作4filter可以实现对数据的过滤和格式化date、currency、limitTo.........5controller控制器用于设定模型数据-------每一个控制器实例都与一个$scope对象相链接-------注意angular中的控制器不是单例的每次使用都会创建一个新的对象对应的$scope对象也是新创建的 6directive指令用于封装DOM操作扩展HTML标签及属性-----为HTML添加新标签、新的属性、新的样式2、关于模式231种模式一种最简单的设计模式单例模式------某个对象能够且仅能够创建一次JS中单例模式举例 //通过立即执行函数实现了JS中的单例模式
(function (ename,age){this.enameename;this.ageage;window.empthis;//此处虽然污染了全局变量但是使得外界可以访问这个对象
}
)(Tom,20);
console.log(window.emp);
//注因为AngularJs中的controller可以反复创建所以不是单例的 验证controller不是单例的 html代码 body ng-appmyModuleh1验证controller不是单例的/h1div ng-controllermyCtr1我是第一个controller/divdiv ng-controllermyCtr2我是第二个controller/divh3b结论/b若第一个输出为两个undefined,而第二个输出两个都是非undefined则验证controller是非单例的(若是单例则意味着myCtr1和myCtr2是同一个控制器那么当第一次输出位undefined时后面又赋值了那第二次应该输出有值)/h3script srcjs/angular.js/scriptscript srcjs/9.js/script
/body 对应的js代码 var mmangular.module(myModule,[]);
//声明第一个控制器
mm.controller(myCtr1,function($scope){//此例中的this代表当前对象即myCtr1console.log(this.uname this.age);this.unameTom;this.age20;
});
//声明第二个控制器
mm.controller(myCtr2,function($scope){//这中的this代表myCtr2console.log(this.uname this.age);
}); 运行结果截屏 页面 console: 验证service是单例的 结论service,是module中的一种组件专用于在不同的控制器对象间共享数据------任何一个service对象都是单例的-----只要一个service对象创建了只要浏览器不关闭当前网页此对象就一直存在---且只有这样一个对象创建service的语法 moduleName.service(serviceName,function(){this.xxxxx;this.yfunction(){};}); 验证的html代码 body ng-appmyModuleh1验证service是单例的,请打开控制台查看结果/h1div ng-controllermyCtr1我是第一个controller/divdiv ng-controllermyCtr2我是第二个controller/divscript srcjs/angular.js/scriptscript srcjs/10.js/script
/body 验证的js代码 angular.module(myModule,[])//创建一个服务注service中的数据是不能直接在网页上显示必须放在$scope中才可.service(myService1,function(){this.emp{};}).controller(myCtr1,function($scope,myService1){//将新创建的服务注入到controller中console.log(myService1.uname myService1.age);myService1.unameTom;myService1.age20;}).controller(myCtr2,function($scope,myService1){//虽然第一次输出为undefined但是在第一controller中//给服务又赋值了因为其是单例的所以在第二次输出时有值console.log(myService1.uname myService1.age);}); 页面截图 练习创建两个Controller第一个Controller中做一个双向绑定input ng-modelmsg/,设法在第二个Controller的范围内显示出前一个Controller中用户输入的msg 对应的html代码 !DOCTYPE html
htmlheadtitleAngularJs的练习/titlemeta charsetUTF-8//headbody ng-appmyModulediv ng-controllermyCtr1label请输入内容/labelinput ng-modelmsg//divp ng-controllermyCtr2输入框中输入的内容是{{ inputMsg }}/pscript srcjs/angular.js/scriptscript srcjs/11.js/script/body
/html 对应的js代码 angular.module(myModule,[]).service(myService,function(){//因为涉及到了不同的controller之间传递数据//故采用servicethis.message;}).controller(myCtr1,function($scope,myService){$scope.$watch(msg,function(newVal,oldVal){//当用户输入内容发生变化时就执行赋值语句更新service//中保存的数据myService.messagenewVal;});}).controller(myCtr2,function($scope,$interval,myService){$scope.inputMsgmyService.message;//此处用定时器实现了实时更新第二个controller中的mode数据$interval(function(){$scope.inputMsgmyService.message;},10);}); 3、AngularJs中自定义过滤器js代码演示-------此代码是弥补了原生的limitTo过滤器的不足即可以超出限制加省略号 angular.module(myModule,[])//自定义了一个过滤器.filter(myLimitTo,function(){return function(txt,len){var resulttxt;//对超出限制的文字加省略号if(result.lengthlen){resultresult.slice(0,len)...;}return result;}}); 对应的HTML中用法 p{{ hnhgfvvbb | myLimitTo : 30 }}/p 4、自定义指令 directive指令用于扩展HTML元素、属性、样式。定义新指令的语法 注$watch不能监听service中的数据 //指令是一个对象
moduleName.directive(指令名,function(){return {//A:attribute,E:element,C:class,这三个可以任意组合//用于限制该指令在HTML中扮演的角色restrict:AEC,template:该指令实际对应的HTML内容,//当template中内容过多时可以把内容写在一个单独的HTML文件中//用如下方式引入templateUrl:xxx.html}
}); 练习定制一个新的指令nav-logo只要使用该指令的地方就会显示一个灰色的导航条以及一个logo图片 注以下代码不能本地打开需要通过服务器才可运行成功 对应的html: !DOCTYPE html
htmlheadtitleAngularJs的练习/titlemeta charsetUTF-8/link relstylesheet hrefcss/12.css//headbody ng-appmyModule!-- 将指令当标签用 --nav-logo/nav-logo!-- 将指令当属性用 --div nav-logo/div!-- 将指令当样式用(注需要在指令中指定restrict:C才可实现) --!-- div classnav-logo/div --script srcjs/angular.js/scriptscript srcjs/12.js/script/body
/html 对应的js代码 angular.module(myModule,[])//声明一个指令.directive(navLogo,function(){return {//restrict:C, 不是必须的但是若要将指令当做样式的话必须写上templateUrl:directive/12.html}}); 对应的css: *{margin:0;padding:0;
}
.nav{height:60px;background:#afa;
}
.navimg{width:60px;height:60px;margin-left:100px;
} 对应的模板html(此例中的12.html): div classnavimg srcimg/3.png/
/div 效果截图 转载于:https://www.cnblogs.com/mujinxinian/p/5998993.html
