AngularJS 模块 模块包含了主要的应用代码. 一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码. 可以将module理解成一个容器,可以往其中放入controllers.services.filters.directives等应用的组成部分. 创建模块 <div ng-app="myApp">...</div> <script> var app = angular.module("myApp", []); &…

原文: https://www.jianshu.com/p/819421ff955a 大纲 1.angular应用是模块化的 2.对模块(Module)的认识 3.模块的分类:根模块和特性模块 4.NgModel参数详解 5.imports数组与文件头部的import的对比 angular应用是模块化的 1.Angular 应用是模块化的,并且Angular有自己的模块系统,它被称为Angular模块或NgModules. 2.每个Angular应用至少有一个模块(根模块),习惯上命名为AppM…

1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 var app=angular.module('myApp',['ngRoute']); //配置angular路由//$routeProvider是ngRoute模块中的服务 app.config(function($routeProvider){ //when:第一个值是配置路由的名称,第二个…

一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据 1. 内置filter大全 url: https://docs.angularjs.org/api/ng/filter uppercase lowercase 转换为大小写 date 转换为各种日期格式 number 将数字格式化成文本. 它的第二个参数是可选的, 用来控制小数点后截取的位数 currency 转换为货币形式 json 转换json或javascript对象成字符串 filter 过滤数据,可以…

自定义指令 directive()这个方法是用来定义指令的: angular.module('myApp', []) .directive('myDirective', function ($timeout, UserDefinedService) { // 指令定义放在这里 }); directive() 方法可以接受两个参数:1. name(字符串)指令的名字,用来在视图中引用特定的指令.2. factory_function (函数)这个函数返回一个对象,其中定义了指令的全部行为.$com…

路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导航到某个路由的情况. 新建一个文件PermissionGuard.ts import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';   export class Permissi…

本人原来是iOS开发,没想到工作后,离iOS开发原来越远,走上了前端的坑.一路走来,也没有向别人一样遇到一个技术上的师傅,无奈只能一个人苦苦摸索.如今又开始填angular的坑了.闲话不扯了.(本人学习是根据官网教程,如果想根据官网教程学习,我建议先把官网的例子先学一遍,路由的路基部分,都是根据这个例子来讲的).https://www.angular.cn/(官网地址)本章部分基本是官网的内容. 基础知识 1.应用的开始都会有一个根目录开始,路由也一样,所以使用路由就在index.html的<h…

angular.identity 函数返回本身的第一个参数.这个函数一般用于函数风格. ----------以上是官网对该接口的说明,只能说这个文档写得也太二,让人完全看不懂.要理解它的用途,可直接看以下代码: function getResult(fn, input) { //其实我们可以直接这样写: //return fn(input); 但这样写有个问题,如果传入的fn参数不是一个function类型,会导致出错. //官方推荐的写法如下: return (fn || angular.id…

子路由是相对路由 路由配置部分: 主要是children const routes: Routes = [ {path:'home', component: HomeComponent, children:[ { path:'homeDetail/:id', component:HomeMenuComponent },{ path:'', component:HomeListComponent } ] }  ] 第一种是通过标签跳转 这里是./(相对路径)不是/(绝对路径)   <a [rout…

一.为什么要用ElementRef Angular 的口号是 - "一套框架,多种平台.同时适用手机与桌面 (One framework.Mobile & desktop.)",即 Angular 是支持开发跨平台的应用,比如:Web 应用.移动 Web 应用.原生移动应用和原生桌面应用等. 为了能够支持跨平台,Angular 通过抽象层封装了不同平台的差异,统一了 API 接口.如定义了抽象类 Renderer(已废弃,现在用Renderer2) .抽象类 RootRende…

在HTML文件中 //主路由 <router-outlet></router-outlet> //辅助路由 <router-outlet  name="aux"></router-outlet> 配置 {path:'xxx',component:XxxComponent} {path:'yyy',component:YyyComponent,outlet:"aux"} <a [routerLink] = &quo…

我们经常用路由传递参数,路由主要有三种方式: 第一种:在查询参数中传递数据 {path:"address/:id"}   => address/1  => ActivatedRoute.param[id] 在路由中传递 <a [routerLink] = "['/address',1]"></a> 点击事件传递 this.router.navigate(['/address',2]) //在不同等级页面跳转可以用snapshot(…

一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppComponent. 稍后它还会声明更多组件.    2.自定义组件 ng g component components/header 组件内容详解: import { Component, OnInit } from '@angular/core'; /*引入 angular 核心*/ @Compon…

在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足你的各种需求的指令. 本篇文章的参考来自  AngularJS权威指南 , 文章中主要介绍指令定义的选项配置 废话不多说,下面就直接上代码 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDi…

前言 通过本文,你大概能清楚angular promise是个啥,$q又是个啥,以及怎么用它.这里咱们先灌输下promise的思想. 下面写的全是废话,一些看着高逼格其实没什么大作用的概念,想知道$q究竟是什么,怎么去用,建议跳到文章尾部的补充部分,在知道使用后再去补这些较为详细的概念. 一.从promise起步 promise啥意思?打开有道词典=>输入promise=>点击搜索,如图: OK,一个承诺,许诺,何为许诺? 打完这场仗,我就回老家娶你,flag高高挂起.这就是一个许诺.我告诉你…

Angular CLI(Angular.json) 属性详解 简介 angular cli 是angular commond line interface的缩写,意为angular的命令行接口.在angular cli在6.0版本以后已经不再创建angular-cli.json文件,而是用angular.json代替.https://www.cnblogs.com/liyong-blackStone/p/10189562.html 以下的属性详解是以angular6.X版本为基础. 属性 ver…

Angular7 Npm Package.Json文件详解   近期时间比较充裕,正好想了解下Angular Project相关内容.于是将Npm官网上关于Package.json的官方说明文档进行了一下翻译学习,仅供参考 原文出处: https://docs.npmjs.com/files/package.json 官方传送门 *** npm-package.json 特性说明 描述   本文介绍了package.json文件中,你需要了解的所有内容.Package.json文件必须是一个真正…

Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}.这种情况被叫做“Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.”. 问题 为…

原文: https://yq.aliyun.com/ziliao/40516 --------------------------------------------------------------------------- 摘要: 本文讲的是angular中$parse详解教程, 翻开angular的api文档,官方只给出了简短的解释"Converts Angular expression into a function(将一个angular的表达式转化为一个函数)",心中神兽奔…

不多说,直接上干货! 前期博客 Apache版Phoenix的安装(图文详解) 问题现象 Traceback (most recent call last): File , in <module> import argparse ImportError: No module named argparse 解决办法 [root@master phoenix]# yum install python-argparse Loaded plugins: fastestmirror, refresh-p…

ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记<六>模块化 —— module.exports - MirageFireFox - 博客园 https://www.cnblogs.com/MirageFox/p/7905724.html const formatTime = date => { const year = date.get…

Angular算是将后端开发工程化引入前端的先驱之一,而Dependency injection依赖注入(后面简称为DI)又是Angular内部运作的核心功能,所以要深入理解Angular有必要先理解这一核心概念. 维基百科对依赖注入的解释 在软件工程中,依赖注入是实现控制反转的一种软件设计模式,一个依赖是一个被其他对象(client)调用的对象(服务),注入则是将被依赖的对象(service)实例传递给依赖对象(client)的行为.将 被依赖的对象传给依赖者,而不需要依赖者自己去创建或查找所…

1,定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类. ng-class 指令的值可以是字符串,对象,或一个数组. 如果是字符串,多个类名使用空格分隔. 如果是对象,需要使用 key-value 对,key 为你想要添加的类名,value 是一个布尔值.只有在 value 为 true 时类才会被添加. 如果是数组,可以由字符串或对象组合组成,数组的元素可以是字符串或对象. 2.主要用法有三种 第一种双向数据绑定格式的不推荐所以就不列举了 第二种:通过字符串…

指令(directive)是angular里面最核心也是最难懂的东西,在慕课网看了下大漠穷秋老湿的视频,自己百度半天做了一些小test,总算把一切都搞明白了. 先列出学习来源: 指令中controller和link的区别:http://www.cnblogs.com/CreateMyself/p/5568202.html angular视频教程:http://www.imooc.com/learn/156 指令中的隔离 Scope :https://blog.coding.net/blog/an…

这是我第一次写博客,请大家多多指教^^ 拷贝试试 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>思涂客 Stooges</title> <script src="//ajax.googleapis.com/ajax/…

angular指令的transclude属性是一个让初学者比较难以理解的地方,transclude可以设置为false(默认),true或者对象三种值,如果不设该属性就默认为false,也就是说你不需要将该指令所在元素包含的内容嵌入到模板中. 当transclude为true的时候,这时指令所在元素包含的内容会被嵌入到模板中有ng-transclude指令的元素中,例如: index.html <!DOCTYPE html> <html ng-app="myapp"&…

AngularJS的一些指令会创建子作用域,而子作用域会继承自父作用域,大致可分为以下3种 1.创建子作用域并继承父作用域的指令 ng-repeat ng-include ng-switch ng-controller directive(scope:true) directive(transclude:true) 2.创建子作用域但不继承父作用域 directive(scope:{...}) 3.不创建作用域 directive(scope:false) AngularJS的作用域继承是从上到…

1.replace——最简单的使用方法,直接将自定义标签替换为模板内的内容:  html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="angular.js" ></script> <…

Angular中ui-grid的使用 在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验.最近,项目中用到的表格特别多,而且表格的列数和行数也超多.为了让用户浏览更爽,产品经理提出,当表格上下滚动时,表头固定,左右滚动时,表头随动.就这样一个看似十分easy的需求,我研究了一周时间,终于给实现了. 刚开始我研究bootstrap-table,这个插件可以实现表头固定的效果.由于我们的项目用的是angular 开发的,在项目中引入bootstrap-table和其它的文件冲突了,所以就…

Angular中通过$location获取url中的参数 最近,项目开发正在进行时,心有点燥,许多东西没来得及去研究,今天正想问题呢,同事问到如何获取url中的参数,我一时半会还真没想起来,刚刚特意研究了一下,常用的方法就以下几种: 1.获取当前完整的url路径 var absurl = $location.absUrl();     //http://88:8100/#/homePage?id=10&a=100 2. 获取当前url路径(当前url#后面的内容,包括参数和哈希值) var ur…