指令 路由 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/[email protected] .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