angularjs

Web前端兼容性指南

会有一股神秘感。 提交于 2020-08-12 06:21:38
一、Web前端兼容性问题 一直以来,Web前端领域最大的问题就是兼容性问题,没有之一。 前端兼容性问题分三类: 浏览器兼容性 屏幕分辨率兼容性 跨平台兼容性 1、浏览器兼容性问题 第一次浏览器大战发生在上个世纪90年代,微软发布了IE浏览器,和网景公司的Netscape Navigator大打出手,1998年网景不得不将公司卖给AOL。没有了对手的IE不思进取,W3C标准支持发展缓慢,为以后的IE兼容性灾难埋下了伏笔。到2004年,IE的市场份额达到95%,但在此之后IE的份额逐步遭其他浏览器蚕食,主要包括Firefox,Chrome,Safari和Opera。. 2001年8月27日,微软发布IE6,时隔五年直到2006年才发布了IE7。2009年3月19日,经历了众多测试版后,IE8最终发布,虽然IE8针对旧版IE在多方面做了很大改进,但在HTML5、CSS 3等标准支持方面仍落后于其他浏览器对手。这三个版本的IE是所有兼容性问题的最大根源,堪称前端噩梦。 IE6、7、8不支持HTML5、CSS3、SVG标准,可被判定为“极难兼容” IE9不支持Flex、Web Socket、WebGL,可被判定为“较难兼容” IE10部分支持Flex(-ms-flexbox)、Web Socket,可被判定为“较易兼容” IE11部分支持Flex、WebGL,可被判定为“较易兼容” IE6

【译文】【前端架构鉴赏 02】:可拓展 Angular 2 架构

故事扮演 提交于 2020-08-12 05:12:59
李熠:【译文】【前端架构鉴赏 01】:Angular 架构模式与最佳实践 ​ zhuanlan.zhihu.com 原文 https:// blog.strongbrew.io/A-sc alable-angular2-architecture/ 序 这篇文章或许看上去仅和 Angular2 开发者相关,但我相信它也适用于其它的框架。这只是一份关于编写具有可拓展性和可维护性单页面应用的指南。需要指出的非常重要的是,这并不是达成目标的唯一方式,但是对我个人而言它们在不少的场景中都行之有效 编写可拓展性的单页面应用 许多开发者在编写大型的具有可拓展性和可维护性的单页面应用时都遇到困难。导致在开发早期就留下了技术债,修复 bug 时举步维艰,编写测试和创建复用代码时也踌躇不前 最大的一个挑战是:在一个拧巴的基础之上拓展现有逻辑和编写新的功能 对于那些能允许你用100种不同方式设计一个应用,没有结构和封装可言,一切东西都紧紧的耦合在一起的旧时框架,单页面应用是全新的概念 大部分时候在项目的开发的初始阶段都希望快速迭代。但是经过一些开发者,几轮功能迭代和重构之后,代码变得越来越难以维护。它开始看上去像意大利面了。虽然目前框架成熟了很多,但重要的是你编写的软件架构也要与时俱进 2016 年的单页面应用(甚至更早之前) 为了解释这篇文章谈到的架构,有必要回顾一下2016年的web应用长什么样子

Vue.js入门(一)插值操作&&绑定属性

一曲冷凌霜 提交于 2020-08-11 21:03:32
Vue.js(一) 准备知识 什么是vue? ​ | vue.js是前段主流框架之一(还有Angular.js React.js) ​ |一套构造用户界面的框架,只关注视图层,主要和界面打交道,便于与第三方库或既有的项目整合(vue有配套的第三方库) 框架和库的区别 ​ | 框架:完整的解决方案, 只需要使用框架提供的类或函数,即可实现全部功能 ,对项目的入侵性很大,中途不能轻易更换框架否则需要重新架构整个项目 ​ | 库:提供某一个小功能, 库为我们提供了很多封装好的函数,我们就取所需的某部分 ,其他没有用上的我们自己来实现 ,对项目的入侵性小,如果某个库无法完成某些需求,可以切换到其他库 MVVM ​ | MVVM前端的分层开发思想,把每个页面分成了M,V,VM;VM是MVVM核心(VM是M和V之间的调度者) ​ |M: 数据模型 。保存每个页面单独的数据 ​ |VM: 修改数据 & 自动渲染 。对从后端获取的 Model 数据进行转换处理,做二次封装,以生成符合 View 层使用预期的视图数据模型 ( 包括 视图的状态和行为 ),而 Model 层的数据模型是只包含状态的。比如页面的这一块展示什么,那一块展示什么 => 视图状态(展示),而页面加载进来时发生什么,点击这一块发生什么 =>视图行为(交互)。 ​ |V: 带 特殊属性 的 html 模板

How can I conditionally display HTML in a button using AngularJS?

假如想象 提交于 2020-08-11 19:50:42
问题 I would like for a certain button element to contain plain text by default, but then contain HTML based on some variable in my Angular scope. My goal is to have the button say "Save", but then become disabled and display a loading wheel when clicked (while awaiting a response from a long AJAX request). The problem is, Angular is displaying the literal text of my ternary operator in the button rather than the result of the expression. Here's what my button looks like: <button type="submit" ng

一个AngularJS控制器可以调用另一个吗?

孤街浪徒 提交于 2020-08-11 19:37:46
问题: Is it possible to have one controller use another? 一个控制器可以使用另一个控制器吗? For example: 例如: This HTML document simply prints a message delivered by the MessageCtrl controller in the messageCtrl.js file. 该HTML文档仅在 messageCtrl.js 文件中打印由 MessageCtrl 控制器传递的 MessageCtrl 。 <html xmlns:ng="http://angularjs.org/"> <head> <meta charset="utf-8" /> <title>Inter Controller Communication</title> </head> <body> <div ng:controller="MessageCtrl"> <p>{{message}}</p> </div> <!-- Angular Scripts --> <script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind></script> <script src="js/messageCtrl.js" type

abp添加动态菜单

我只是一个虾纸丫 提交于 2020-08-11 19:11:40
abp中MenuDefinition封装了导航栏上的主菜单的属性,MenuItemDefinition则封装了子菜单的属性,子菜单可以引用其他子菜单构成一个菜单树。 MenuDefinitio成员如下:     public object CustomData { get ; set ; } // 自定义数据      public ILocalizableString DisplayName { get ; set ; } // 表示本地化字符串      public IList<MenuItemDefinition> Items { get ; set ; } // 子级菜单集合      public string Name { get ; } // 菜单名称      public MenuDefinition AddItem(MenuItemDefinition menuItem); // 子菜单添加方法 MenuItemDefinition成员如下:     public object CustomData { get ; set ; } // 自定义数据 public ILocalizableString DisplayName { get ; set ; } // 表示本地化字符串 public IFeatureDependency

How to implement bootstrap corousel with angular ng-repeat?

被刻印的时光 ゝ 提交于 2020-08-11 19:05:49
问题 When I am trying to use ng-repeat inside corousel-inner the corousel is not working properly, how to use carousel with ng-repeat ? 回答1: Not exact but seems like what you want. <div class="container" ng-show="ifImages"> <br> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators" ng-repeat="image in images"> <li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li> </ol> <!-- Wrapper for slides --

How to implement bootstrap corousel with angular ng-repeat?

喜你入骨 提交于 2020-08-11 19:04:28
问题 When I am trying to use ng-repeat inside corousel-inner the corousel is not working properly, how to use carousel with ng-repeat ? 回答1: Not exact but seems like what you want. <div class="container" ng-show="ifImages"> <br> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators" ng-repeat="image in images"> <li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li> </ol> <!-- Wrapper for slides --

How to implement bootstrap corousel with angular ng-repeat?

冷暖自知 提交于 2020-08-11 19:04:06
问题 When I am trying to use ng-repeat inside corousel-inner the corousel is not working properly, how to use carousel with ng-repeat ? 回答1: Not exact but seems like what you want. <div class="container" ng-show="ifImages"> <br> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators" ng-repeat="image in images"> <li data-target="#myCarousel" data-slide-to="$index" ng-class="{'active': $index == 0}"></li> </ol> <!-- Wrapper for slides --

从零开始的微信小程序入门教程(三),有趣且好玩的数据绑定

≯℡__Kan透↙ 提交于 2020-08-11 18:58:32
壹 ❀ 引 我在 从零开始的微信小程序入门教程(二),初识WXML与WXSS 一文中简单介绍了小程序组件与小程序样式相关概念,在了解这两者之后,其实我们已经可以搭建出简单的静态页面,与书写HTML页面一样,小程序页面也只能通过多写多练提升。在构建完页面后就出现了一个问题,我们该如何获取组件元素让数据与之关联呢? 在网页开发中,我们同样使用JS操作DOM,包括数据渲染,事件监听等,比如我现在要通过点击一个按钮后,替换段落中的本文信息,使用JS可以这么做: <p>我是谁?</p> <button>点我点我</button> let btn = document.querySelector("button"), p = document.querySelector("p"); btn.onclick = function () { p.innerHTML = '我是听风是风啊!' }; 没问题,效果虽然实现了,但是类似的操作我们总是得获取并操作DOM,逻辑层与渲染层高度耦合,每一份数据我们似乎都得找到对应的DOM所在,并帮助它们相互关联,这很明显不太友好。伴随发展,angularjs,vue,react的出现,我们知道了MVVM模式的存在,在开发中逻辑层与渲染也得以分离,微信小程序在开发模式上也借鉴了这一点,比如还是上面的效果,用小程序就可以这么做,我们分别在 index.wxhl 和