如下所示： <div ng-app="module"><div my-exam></div></div><script>var m = angular.module(module, []);m.directive(myExam, [function () {return {restrict: EA,template: <h1>欢迎浏览泠泠在路上</h1>,/*1.replace值为true的时候，把父级给替换掉，即 <div my-exam></div>变成<h1>欢迎浏览泠泠在路上</h1>*//*2.replace值为false的时候，放到父级的里面，即<div my-exam></div>变成<div my-exam><h1>欢迎浏览泠泠在路上</h1>...
ng-controller是为应用变量添加控制器 当有两个控制器father、child且child 在 father内，那child 可以称为子控制器，它将继承父控制器father的scope。child就可以访问到father的scope中的所有函数和变量。 例： <div ng-controller="father"><div >name1:{{ name1 }}</div><div ng-controller="child">name2:{{ name2 }}</div> </div>情况1： app.controller("father",function ($scope) {$scope.name1 = "x";$scope.name2 = "y"...
简介 为什么使用resolve： 当路由切换的时候，被路由的页面中的元素（标签）就会立马显示出来，同时，数据会被准备好并呈现出来。但是注意，数据和元素并不是同步的，在没有任何设置的情况下，AngularJS默认先呈现出元素，而后再呈现出数据。这样就会导致页面会被渲染两遍，导致“页面UI抖动”的问题，对用户不太友好。resolve的出现解决了这个问题。 resolve是干嘛用的： resolve属性里的值会在路由成功前被预先设定好，然后注入到...
不废话直接上教程 1.建立项目 ng new projectname 2.创建第三方库 项目创建完毕，依赖安装完毕后 # libraryname : 第三方包名字 # prefix : 组件前缀(如 nz-zorro 的组件前都是 nz-xxx) cd projectname ng g library libraryname --prefix prefix 3.查看项目目录多出一个projects目录,目录里就是刚才generate的第三方library可以看到实际和 ng new 出的项目无多大差别,第三包的依赖直接加入package.json中,然后依赖的Module按照常规...
环境：ubuntu16.04 按照官方文档的要求，跟着进行angular-cli的安装，但是我们知道，环境这种东西有时候很容易配置，有时候就会闹脾气，而且不同的操作系统，出现的问题也不尽相同。今天安装了一下，踩了几个坑，在这里跟大家分享一下。 更新nodejs，npm 根据官方的教程要求： Verify that you are running at least Node.js version 8.x or greater and npm version 5.x or greater by running node -v and npm -v in a terminal/...
主从组件继学习笔记6，现在可以在页面上显示一个数组，但是原则上不能将所有特性放在同一个组件中，因为如果将所有特性放在同一个组件中，当特性特别多时，组件就变得不好维护了。所以要将大型组件拆分为多个小型组件，使每一个小型组件集中处理某一个特性任务或者工作流，而且这样也便于维护。 这次要将学习笔记6中的查看hero详情，放置在一个新的，独立，可复用的组件中，集中在新的组件管理和维护hero详情的信息。 1.创建一个新...
写了一阵子的Angular 2 现在还是觉得更喜欢Angular 1的版本。 1的版本更多的是整合，按照模块来区分，并没有做更细的划分，而2的版本中，在创建时模块组件时就已经有了很好的区分，每个模块单独管理各自的组件，在组件中也是各自管理自己的样式，效果。 在以往1的版本中，要整合路由是十分容易的，无论是一级或者二级路由都可以写在一个文件中 但是在2中则是将路由写在上层模块中，一般app为主模块，定义一个app-routing.module.ts...
本文实例讲述了AngularJS自定义表单验证功能。分享给大家供大家参考，具体如下： Angular实现了大部分常用的HTML5的表单控件的类型(text, number, url, email, date, radio, checkbox)，也实现了很多指令做为验证(required, pattern, minlength, maxlength, min, max)。 在自定义的指令中，我们可以添加我们的验证方法到ngModelController的$validators对象上。为了取得这个controller对象，我们需要requirengModel指令。 在$valid...
Angular6 热加载配置方案，分享给大家，具体如下： 示例 ng 版本如下 ： $ ng --version_ _ ____ _ ___/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|/ △ \ | _ \ / _` | | | | |/ _` | __| | | | | | |/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___||___/Angular CLI: 6.0.8 Node: 8.11.1 OS: win32 x64 Angular: 6.1.3 ... ...
Intro 我自己有做一个个人主页，虽然效果不怎么样（不懂设计的典型程序猿...)，但是记录了我对于前端框架及工具的一些实践， 从开始只有一个 angularjs 制作的页面到后面加入 less 动态写css， gulp 自动化的将 less 文件编译成 css 文件以及自动化的压缩 js 和 css，到后面加入的基于 vue 和 angular 实现，主要维护的是基于 angular 的，目前 angular 的个人主页已经支持 PWA（Progressive Web Application）,前几天添加了 docke...
angular应用部署在iis上，刷新出现404 解决方案： 安装 iis URL Rewrite 模块，配置urlrewrite如下： 在 src 目录下增加web.config，内容如下：<configuration> <system.webServer><rewrite><rules><rule name="Angular Routes" stopProcessing="true"><match url=".*" /><conditions logicalGrouping="MatchAll"><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /><add input="{REQUEST_FILENAME}" matchType=...
如下所示： $http.get("/merchantmall/merchant.json").success(function(data, status, headers, config) {console.log(arguments);}).error(function(data, status, headers, config) {console.log(arguments);})$http({url: "/merchantmall/merchant.json", }).success(function(data, status, headers, config) {console.log(arguments);}).error(function(data, status, headers, config) {console.log(arguments);})var prom...
最近抽空学习了一下Angular6，之前主要使用的是vue，所以免不了的也想对Angular6提供的工具进行一些封装，今天主要就跟大家讲一下这个http模块。 之前使用的ajax库是axios，可以设置baseurl，公共头部；集中捕捉错误等，由于Angular6的依赖注入机制，是不能通过直接修改http模块暴露的变量来封装的，但是通过官方文档我们知道可以通过拦截器（HttpInterceptor）来实现这一功能。 拦截器可以拦截请求，也可以拦截响应，那么通过拦截...
前言 为了在我的编辑器中使用 Angular，我用 Angular 编写了一个重命名功能。而为了使用它，我得再次使用一次 customEvent ，而在这个微前端架构的系统中，其事件通讯机制已经相当的复杂。在这部分的代码进一步恶化之前，我得尝试有没有别的方式。于是，我想到了之前在其它组件中使用的 Web Components 技术，而 Angular 6 正好可以支持。 下面话不多说了，来一起看看详细的介绍吧 HTML 中引入 Web Components我所需要做的事情也相...
第一步 准备好api接口地址， 例如 https://api.example.com/api/ 第二步 在根组件 app.components.ts 中引入 HttpClientModule 模块。 // app.components.ts import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块 imports: [BrowserModule,AppRoutingModule,HttpClientModule //声明HTTP模块 ],第三步 在组件中使用HTTP模块向远程服务器请求数据 1.引入HTTP模块 // list.components.ts import { H...