0、前言 当一个公司有多个开发团队时，我们可能会遇到这样一些问题：1.技术选项杂乱，大家各玩各 2.业务重复度高，各种通用api，登录注销，权限管理都需要重复实现（甚至一个团队都需要重复实现） 3.业务壁垒，业务之间的互通变得比较麻烦 4.部署方式复杂，多个域名（或IP地址）访问，给用户造成较大的记忆难度 5.多套系统，风格难以统一 6.等等... 当然，解决方式有不少。以下就来讲解下我们这边的一种解决方案。 1、思路 Angualr...
本文将探讨material2中popup弹窗即其Dialog模块的实现。 使用方法 引入弹窗模块自己准备作为模板的弹窗内容组件在需要使用的组件内注入 MatDialog 服务调用 open 方法创建弹窗，并支持传入配置、数据，以及对关闭事件的订阅深入源码 进入material2的源码，先从 MatDialog 的代码入手，找到这个 open 方法: open<T>(componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,config?: MatDialogConfig ): MatDialogRef<T> {// 防...
在使用路由延迟加载中，我们介绍了如何使用模块来拆分应用，在访问到这个模块的时候， Angular 加载这个模块。但这需要一点时间。在用户第一次点击的时候，会有一点延迟。 我们可以通过预加载路由来修复这个问题。路由可以在用户与其它部分交互的时候，异步加载延迟的模块。这可以使用户在访问延迟模块的时候更快地访问。 本文将在上一个示例的基础上，增加预加载的功能。 在上一节中，我们的根路由定义在 main.routing.ts，我们在...
当项目变得复杂庞大以后，如果所有页面都在一个模块里，就会出现首页加载慢的问题，因为首页就已经把整个项目加载进来了。所以，很有必要根据业务将不同的功能分模块，以便Angular2按需加载,提升用户体验。 下面的例子是将首页放到home模块里，访问/home时加载home模块内容，仅供学习懒加载，其实首页访问路径应该是/ 先看项目文件结构：home模块放到src/app/home目录下，里面的home目录是home组件。home模块有单独的定义和路由(ho...
一、现象 一个全屏的“走马灯”每项需要添加背景图，在循环标签里需要动态添加行内样式 二、解决 1、首先有一个图片数组，如： export class AppComponent {array = ["url(/assets/images/img1.png)","url(/assets/images/img2.png)"]; }2、模块中添加数据，如： <div nz-carousel-content *ngFor="let item of array" [ngStyle]="{background-image: item }"></div>三、总结 需要继续思考，如果数组中不带有url，只是单纯的图片路...
根模块 (root module) 每个应用都至少有一个根模块用来引导并运行应用。根模块通常命名为 AppModule。 示例 src/app/app.module.ts import { NgModule } from @angular/core; import { BrowserModule } from @angular/platform-browser; import { AppComponent } from ./app.component;@NgModule({imports: [ BrowserModule ],declarations: [ AppComponent ],bootstrap: [ AppComponent ] }) export class AppModule { }impo...
前言 本文主要给大家介绍的是关于利用angular.js + require.js构建模块化单页面应用的方法，分享出来供大家参考学习，需要的朋友们下面来一起看看详细的介绍吧。 AngularJS描述: angularjs是可以用来构建WEB应用的，WEB应用中的一种端对端的完整解决方案。通过开发者呈现一个更高层次的抽象来简化应用的开发。最适合的就是用它来构建一个CRUD应用，它提供了非常方便的且统一高效的解决方案，其数据绑定、基本模版标识符、表单验证、...
require 模块化开发问题，正常自己写的模块 是exports 导出一个模块 //模块化引入jquery 不同和问题require 引入jquery swiper .... 插件和库的时候需要require.config({baseUrl:"js/libs", //文件夹目录相对与html的位置paths:{jquery:"jquery-1.9.1" //插件或库的文件名swiper:"文件名/swiper" //当每个插件和库不在同一文件夹下时 这里也可以进行更改} })define([angular,swiper],function($){ //中括号中写上边你保存的插件和库...
学习要点： 控制器模块化指令模块化过滤器模块化服务模块化定义值模块化使用模块工作第一步：创建一个模块 // function : define module named exampleApp // param detail : // param one : module name // param two : relay on modules collection // parms three : config information var myApp = angular.module("exampleApp", ["exampleApp.Controllers", ["exampleApp.Controllers", "exampleApp.Filters", "exampleApp.Di...
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块. 要学习这个服务,先要了解另一个指令: ng-bing-html. 顾名思义,ng-bind-html和ng-bind的区别就是,ng-bind把值作为字符串,和元素的内容进行绑定,但是ng-bind-html把值作为html,和元素的html进行绑定.相当于jq里面的.text()和.html(). 但是,出于安全考虑,如果我们直接使用ng-bind-html是会报错的,ng-bind-html后面的内容必须经过一定的处理. 处理的方式有两种,...
本文呢主要给大家介绍的关于Angular2模块和组件的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： 一、初步了解模块和组件 之前给大家介绍了构建工程，这篇文章简单讲述一下Angular2中的模块和组件。app文件夹下有五个文件，其中，app.component.spec.ts应该是和模块测试有关的文件，目前不用管它。剩下的四个文件就是典型的模块+组件的文件组成模式。Angular2应用由模块和组件构成，每个模块这样明明name.module.t...
前言 在编写一些大型工程的时候，会经常遇到一些公用提示，使用框架自带很多时候不方便，于是我手写了一个，下面来看看详细的介绍： 效果图如下方法如下 一、先在angular中注册一个模块二、注册一个模块 注入依赖三、返回不同的方法应对不同情况 四、获取模板路径 五、编写模板内容 和普通的页面一样调用使用angular服务六、 1. 开启http服务获取模板内容 2. 重点注意 $template = $compile(template)(scope); 这句代码...
本文实例讲述了AngularJS路由Ui-router模块用法。分享给大家供大家参考，具体如下： 由于某些设计原因，AngularJS原生的路由模块有一些缺点，比如说不支持view的嵌套等，所以有许多社区开始自己设计路由模块，最有代表性的就是ui-route了。 ui-route是一个功能强大的路由模块，它在原生的ng-route模块上加强了其他方面的功能。 现在就开始做几个DEMO接触一下ui-route。 <!--初始页面--> <!doctype html> <meta charset="UTF-8"> <h...
状态嵌套的方法状态可以相互嵌套。有三个嵌套的方法： 使用“点标记法”，例如：.state(contacts.list, {})使用parent属性，指定一个父状态的名称字符串，例如：parent: contacts使用parent属性，指定一个父状态对象，例如：parent: contacts（contacts 是一个状态对象）点标记法在$stateProvider中可以使用点语法来表示层次结构，下面，contacts.list是contacts的子状态。 $stateProvider.state(contacts, {}).state(contacts.lis...
用Angular2开发一个大型的应用，我们通常都需要分模块进行开发。例如将某一个功能的相关页面和功能放在一个模块里面，这样既可以实现系统的松耦合，给开发和后期的维护带来很大的便利。同时，对于子模块，我们还可以使用延时加载，这样可以减少初始加载的文件的大小。在这篇文章中，我们就来看看在Angular2框架下怎么实现子模块及其延时加载。 可以在这里查看本文使用的实例 。该实例基于上篇文章Angular2使用Guard和Resolve进行验...