前端技术和angularjs

前端技术栈

• 浏览器/渲染引擎

  • IE
  • chrome
  • firefox
  • Safari
  • QQ/360???????

• 前端核心

  • HTML/HTML5,

    

    • DOM 树
    • 元素
    • 属性

  • JavaScript

    • 原型（prototype）
    • Scope
    • JSON https://baike.baidu.com/item/JSON/2462549?fr=aladdin
    • AJAX
    • Promise(解决回调函数嵌套过多的问题)
      • http://callbackhell.com/
      • http://liubin.org/promises-book/

  • CSS

    • 使用浏览器调试样式

• 编辑器

  • sublime text 3
  • WebStorm
  • VSCode（推荐！！）

• 构建工具/生成器

  

  • Yeoman http://yeoman.io/generators/
  • Grunt
  • gulp//在用
  • webpack//在用

• 调试

  • Developer Tools
  • Firebug

• 包管理

  • npm
  • bower

• 框架和库

  • JavaScript 基本库
    • Jquery
  • JavaScript 框架
    • angularjs/Angular
    • react
    • vue
  • UI 框架
    • BootStrap
    • ionic
    • Material
  • 数据可视化
    • Echarts
    • G2
  • CSS3 动画
    • Animate.css
  • 实用工具
    • lodash https://lodash.com/https://www.kancloud.cn/wizardforcel/lodash-doc-45/144108
    • Moment http://momentjs.cn/
  • 编译器
    • babel http://babeljs.cn/repl/#
  • 模板引擎
    • Jade-express
    • Ejs-thinkjs
  • 中间语言
    • Typescript
    • JSX
  • 手机应用
    • Cordova
    • React Native
  • 桌面应用
    • Electron

angularjs

• 搭建一个最简单的 angular 项目

• $scope、$rootScope、var

  • $scope 是一个 js 对象，包含属性和方法，可以在视图中使用。作用域范围当前的 controller
  • $rootScope 根作用域，范围是被 ng-app 包含的所有 controller
  • var 定义变量关键词。var 的作用域取决于定义变量的位置。在 controller 里面用 var 定义的变量只在这个 controller 里面有效

• {{}}

  • 在{{}}里面是可以写 js 表达式的，而不仅仅是写一个变量。

• 页面传参

  • 利用 ui-router 传参（常用）
  • $cacheFactory、service 或 factory、本地存储、全局变量

• 错误（ReferenceError,SyntaxError,TypeError）

  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError

  • HelloCtrl 没有注册

    

  • a 没有被定义

    

  • 不能读取 undefined 的属性 d

    

  • myApp.contoller 不是一个函数

    

  • 语法错误

    

• angular 自带过滤器

  • 时间格式化{{1502099966443| date:"yyyy-MM-dd HH:mm:ss"}}

• angular 常用的一些方法，指令等

• http 请求的两种写法https://docs.angularjs.org/api/ng/service/$httphttps://code.angularjs.org/1.4.3/docs/api/ng/service/$http

• angular select

• 常用插件

  • smart-table https://github.com/lorenzofox3/Smart-Table
  • ngDialog https://github.com/likeastore/ngDialog
  • ui.bootstrap http://angular-ui.github.io/bootstrap/
  • ngMaterial https://github.com/angular/material
  • ng-file-upload https://github.com/danialfarid/ng-file-upload
  • toastr https://github.com/Foxandxss/angular-toastr
  • oc.lazyLoad https://oclazyload.readme.io/
  • satellizer https://github.com/sahat/satellizer
  • vxWamp https://github.com/voryx/angular-wamp

我经常逛的网站

• 掘金 https://juejin.im/
• awesomes https://www.awesomes.cn/