指令
路由
rxjs
组件传参
"angular": "1.3.0",
"jquery": "~2.1.1",
"angular-ui-router": "~0.2.15",
"angular-bootstrap": "~0.13.0",
"angular-translate": "~2.7.2",
"angular-translate-loader-url": "~2.8.1",
"angular-animate": "1.3.0", 动画插件
"angular-bindonce": "0.3.3", 一次性数据绑定
"ng-table": "~0.8.3",
"angular-slider": "~0.2.15", 滑块指令
"angular-translate-loader-static-files": "~2.8.1", 国际化配置语言
"angular-amchart": "~1.0.6", 图表
"amcharts3": "~3.17.2", 图表
"angular-i18n": "~1.4.7", 延迟加载 i18n数据的异步加载
"angular-mocks": "1.3.0",
"angular-file-upload": "~2.2.0", 文件上传
"angular-breadcrumb": "~0.4.1", 面包屑
"showdown": "~1.3.0",
"jquery-zclip": "~1.1.5",
"ng-scrollbar": "~0.0.8", 滚动条
"angular-cookies": "1.3.0",
"oclazyload": "^1.0.9", 延迟加载
"angular-loading-bar": "^0.9.0" 自动加载
··································
AngularJS
ui-router 0.2.15
npm install --save @uirouter/angularjs@1.0.7
.filter .controller等等等 是angularjs的方法 有些类似于js原生链
gulpfile.js 服务器地址
bower.json
src/monitor 监控页面
src/lib/js 引入angular jquery包
src/lib/js/angular-amchart.js AngularAmChart .module
amchart .directive
src/common/angularAmchartsModule/amchartsModule.js .module
amchart .directive
src/login 登录页面
src/index.pug 主入口 左侧栏 头部 main
src/common 自定义标签
src/index/js/domeApp.js 路由
src/index/js/common/commonDialogs.js 修改密码 header头部
src/index/js/directives .diretive
src/index/js/directives/domeDirective.js 页码
src/index/js/directives/domeValidation.js 验证用户是否存在
src/index/js/services .factory
src/index/js/filter.js 分页过滤
src/index/mainpage 管理左侧导航栏 .controller header头部
src/index/tpl 组件
模板引擎
npm install pug-cli -g
目录结构
App是被src解析之后的html App是入口
bower.json 包管理工具
Pug模板引擎
Pug
npm install pug-cli -g
eventList 在src/common/formInputs/formInputs里 .component
pageContentBox 在src/common/pageLayout.js里 .directive
eventList 在src/common/formInputs/formInputs里 .component
src/common/pageLayout/page
src/common/pageLayout.js .directive
pageContainer pageContentBox
src/common/formInputs/formInputs formInputs.js .component
titleLine formHelpLine eventList
自定义的 就是公共组件
- var声明变量 取值#{}解析 =相当于# ()属性 if else
-for(var i in) each val,index in includes
Extends |段落 //注释
ng-app ng-controller {{}}解析 ng-model双向绑定 ng-init
ng-bind “”解析变量 ng-repeat循环 .directive自定义指令 元素名 属性 类名调用
| uppercase | lowercase
ng-click ng-cloak ng-pattern on-change ng-if | ng-class
ng-disabled
filter过滤 orderby排序
a标签 ui-sref 跳转路径
js
$scope js中定义变量 $modal $modalInstance $domeImage $util $http $domeAppStore $domeUser
$interval $timeout dialog
.controller .filter $state.go路由跳转 $state.$current.name $q promise $cookieStore
.provider 创建service
.factory自定义方法创建service 自定义服务 return
.service 创建service
.directive自定义指令pug用 return
.filter自定义过滤器 $filter()() pug中使用| 3种方式
.component pug用
.module依赖注入
内置服务 $http $timeout $interval $location $watch $q $log $emit $on
$ctrl
$domeAppStore在js/service/domeService.js .factory
$domeGlobal 在在js/service/domeService.js .factory
$domeImage 在common/imageModule/imageModule.js
$domeUser在 common/userModule/userModule.js .factory
api在 common/backendApi/backendApi.js 依赖注入
注入的都是自定义方法
Ingdex/js/common/
Ingdex/js/services/ 接口都在这里写 $http
Ingdex/js/directives/ 指令
Ingdex/js/filter.js 分页过滤
template bindings controller里写js
··································
Angular2 Angular7
*ngFor *ngIf 属性绑定[] 解析{{}} 事件绑定(click)=‘share()’
[()] 双数据绑定
创建一个新组件Angular Generator ts angular file 插件 Generate Component
Component.ts 引入html css service @Component
Module.ts 引入component service routing 所有的 @NgModule
Service.ts @Injectable
Routing.module.ts 引入component @NgModule
import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';
··································
TypeScript ES6超集
元祖Tuple : [string, number]
Any let list: any[] = [1, true, "free"]; list[1] = 100;
Object let