• w2_466162
    了解作者
  • 54.8KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-04-20 01:17
    上传日期
2021-01-18:升级了项目依赖,添加了eslint和stylelint。因为发现还有小伙伴在叉子本项目,由于本项目距今已经有两年多的时间,只剩下参考意义了,如果确实对Angularjs非常感兴趣,建议学习 ,再不济也看一下的方式吧。 一个用AngularJS + es6/es7 + webpack构建的种子项目。 该项目只有两个页面,目的是为了展示如何使用主流的方式开发AngularJS应用。 截图 用法 下载到本地 git clone https://github.com/onlymisaky/AngularJS-ES6.git 切换到项目目录 cd AngularJS-ES6 安装依
AngularJS-ES6-master.zip
内容介绍
2021-01-18: 升级了项目依赖,添加了 eslint 和 stylelint 。因为发现还有小伙伴在fork本项目,由于本项目距今已经有两年多的时间,只剩下参考意义了,如果确实对 Angularjs 非常感兴趣,建议学习 <a href="https://angular.cn" target="_blank" rel='nofollow' onclick='return false;'>Angular</a> ,再不济也看一下 <a href="https://github.com/onlymisaky/AngularJS-TypeScript" target="_blank" rel='nofollow' onclick='return false;'>用 TypeScript 写 Angularjs</a> 的方式吧。 --- 一个用 `AngularJS` + `es6/es7` + `webpack` 构建的种子项目。 该项目只有两个页面,目的是为了展示如何使用主流的方式开发 `AngularJS` 应用。 <a href="http://onlymisaky.gitee.io/angularjs-es6" target="_blank" rel='nofollow' onclick='return false;'>在线地址</a> ## 截图 ![首页](https://s1.ax1x.com/2018/04/03/CpmYex.png) ![列表页](https://s1.ax1x.com/2018/04/03/Cpmtw6.png) ## 用法 1. 下载到本地 ```bash git clone https://github.com/onlymisaky/AngularJS-ES6.git ``` 2. 切换到项目目录 ```bash cd AngularJS-ES6 ``` 3. 安装依赖,这一步很慢,耐心等待即可,如长时间没有安装好,请尝试用 [cnpm](https://npm.taobao.org/) 安装 ```bash npm i --registry=http://r.cnpmjs.org/ ``` 4. 启动服务 ```bash npm run dev ``` 5. 打包 ```bash npm run build ``` 6. 如果在执行 **第4** 或 **第5** 步的过程中提示 *node-sass* 错误,请使用下面的命令重新 build node-sass ,build 完成后再次使用 **第4** 或 **第5** 的命令即可 ```bash npm rebuild node-sass ``` **提示** 原则上,不建议用 [cnpm](https://npm.taobao.org/) 安装依赖,因为用 cnpm 安装依赖后,再用 vscode 打开项目会导致 cpu 狂飙至 100% ,这个锅应该是 cnpm 的。 详情可以查看这两个 issues : [When using cnpm/pnpm, rg uses lots of CPU #35659](https://github.com/Microsoft/vscode/issues/35659) [Use search.followSymlinks for all searches #37000](https://github.com/Microsoft/vscode/issues/37000) 如果由于网络问题,不得不使用 cnpm ,恰巧你的开发工具可是 vscode ,那么请用下面两种方式解决: 第一种方式 : 在 `cnpm i` 完成后,打开 vscode 将**设置**中的 **search.followSymlinks** 修改为 **false** 。 第二种方式 : 在 cnpm 命令后面添加参数,即使用 `cnpm i --by=npm` 来安装。 另外也不推荐用 taobao 的源安装,他的速度还没 cnpm 的快。 ## 开发日记 ### 1、目录结构 项目的目录结构决定了整个项目的风格,下面是整体的目录结构图: ![项目结构](https://s1.ax1x.com/2018/12/09/F80RVH.png) 这个结构是在参考的了 Angular 项目结构的基础上结合个人的经验构建出来的,现在你可能不是很明白为什么要这样设计,不要着急,你只要先总体的看一下它的结构,对它有一个大概的了解即可,继续往下读,你会明白为什么这样设计。 ### 2、模块设计 这里采用了多模块设计,angularjs 的 module 一直饱受病诟,它希望开发者通过 angular.module 来对项目进行更合理的划分,但是这个 module 实在是太弱了。首先它是脱离了文件系统的,而 es6 的 module 则是完全基于文件来设计的,一个 .js 文件就是一个 esModule ,所以当这两个结合到一块的时候,还是有些怪异的。其次 angular.module 顶多算是一个不可检测的命名空间,何为不可检测?就是当你拿到这个 module 的时候,你不知道这个 module 下面到底有哪些东西,另外当你想在 moduleA 下面注册 MyService 的时候,可能 moduleA 依赖了 moduleB ,而 moduleB 可能已经注册了一个功能不一样的 MyService ,这些你明白什么叫不可检测了吧。造成这个原因主要是因为在 angularjs 诞生的时候,还有 esModule 的概念。 既然 angular.module 这么弱,为什么还要用它呢,干脆在整个项目中只用一个 module,这样不就可以最小化上面的那些问题了吗。的确可以这样,但是这样一来,我们打包出的文件体积就太大了,也许你想到了用按需加载的方式来切分代码,但是在 angularjs 中,只有 module 可以动态加载,而且 component 等等都是在项目启动的时候就已经创建好了,如果你想动态的加载一个 component ,你只能去动态的加载注册这个 component 的 module 。所以这个 module 虽然不好用,但是又不得不用。 在整个项目中,首先定义了个三个 module : 1. 根模块:`angular.module('app')` 2. 通用模块:`angular.module('app.common')` 用于注册一些通用的 service、component等 3. 路由模块:`angular.module('app.router')` 配置路由和路由钩子 这三个 module 是在首次启动的时候就创建好了,所以在这个三个 module 中注册的 service、component等都是可以在整个项目中直接使用的,其次是每一个页面可以定义为一个 module ,这里建议将每一个顶级的路由对应的所有代码都放在一个 module 中,然在 router module 中根据需求直接 require 这个 module 或者使用 oclazyload 动态加载。如果项目加大,可以具体到每一个组路由定义为一个 module 。 ### 3、干掉filter `filter` 也是一个饱受争议的设计,虽然它很有用也很好用,但是极为消耗性能的,在 `$digest` 过程中,filter会执行很至少两次,在很多关于angularJS的讨论中,都不推荐使用它。 其实 filter 的作用就是转换数据,当你需要处理数据的时候,你可以写一些专门处理数据的函数,然后在 controller 或者 service 中调用它,而视图只负责显示数据。 ### 4、新的写法 #### service 在 angularjs 中,注册一个自定义服务有三种写法:`provider`、`factory`、`service` ,我们都知道 factory 和 service 都是基于 provider 封装的。而 service 的写法是最适合用 es6 的 class 来写: ```javascript export class UserService { static $inject = ['$http']; constructor($http) { this.$http = $http; } getUser(userId) { return this.$http .get(`/user/${userId}`) .then(response => { if (response.status === 200) { return response.data; } }); } } ``` #### controller AngularJS 1.2 版本开始提供了一个 `controllerAs` 语法,让 `controller` 成为了一个纯净的 `ViewModel` ,而且 AngularJS 是通过 `new` 关键字把它当成构造函数来调用的,所以 controller 的写法和 service 完全一样: ```javascript class UserController { static $inject = ['$stateParams', 'UserService']; user; constructor($stateParams, UserService) { this.UserService = UserService; this.userId = $stateParams.id; } $onInit() { this.UserService .getUser(this.userId) .then(user => this.user = user); } } ``` #### 更安全的注册 什么叫更安全的注册呢,我们以上面的 UserService 为例,虽然我们我们创建的类名为 UserService ,但在将 UserService 导入到 module 的是时候,我们可以注册为 XxxService : ```javascript import { UserService } from './user.service'; angular .module('user') .service('XxxService', UserService); ``` 这样一来就全乱了套了,那样才能避免这样的情况呢?angularjs 的 .service 、 .component、 .directive 等方法除了可以用 `userModule.service('UserService', UserService)` 的写法注册,还可以用对象的方式注册 `userModule.service({UserService: UserService})` 。利用对象方式的写法,我们可以 es6 的属性的简洁表示法来注册 `userModule.service({UserService})` ,通过这种学法来注册 service、component、directive 这样就可以避免上述情况发生了。 ### 5、router [ui-router](https://ui-router.github.io/ng1/) 绝对是 AngularJS 的标配了,它最大的优势就是解决了路由的嵌套。 `ui-router` 还支持 [Route to compone
评论
    相关推荐
    • inesosoares6.github.io
      inesosoares6.github.io
    • es6-presentation
      es6-presentation-build
    • 阮一峰es6教程文档源码
      阮一峰es6教程文档源码 阮一峰es6教程文档源码 阮一峰es6教程文档源码 阮一峰es6教程文档源码 阮一峰es6教程文档源码
    • es6-workflow:立即使用 ES6
      git clone git@github.com:turingou/es6-workflow.git cd es6-workflow npm install . 发展 将所有的 ES6 js 文件放在src文件夹中,使用下面提供的 ES6 工作流程,它们将全部编译为 ES5 js 文件到dist文件夹。 建造 ...
    • qiliangya.github.io
      a-plane 这是一个用原生ES6写的飞机大战游戏,采用面向对象的方式,可扩展性强,拥有注释。 目前共一关,分数达到一定时会出现boos。
    • github-calendar-web-component:基于ES6 WebComponent的GitHub Calendar
      ES6 Web组件包装器。 并非所有功能都已公开,请随时贡献。 安装 # Using npm npm install --save github-calendar-web-component # Using yarn yarn add github-calendar-web-component 用法 <!-- Serve from ...
    • es6-tutorial
      克隆存储库: git clone https://github.com/YauhenKavalchuk/es6-tutorial.git 安装依赖项: npm install 转到与本git checkout lesson_1相对应的相应分支: git checkout lesson_1或git checkout lesson_2 ,...
    • Github
      Github
    • es6-workflow
      git clone git@github.com:nkbt/esnext-quickstart.git cd esnext-quickstart npm install npm start 打开 运行ESLint报告 npm run lint 运行测试 npm test 生成测试覆盖率报告 npm run test:cov 打开 滑梯
    • GaussDB_100_1.0.1-DATABASE-REDHAT-64bit.tar.gz
      guassdb100在redhat上安装包,单机部署的包,安装步骤请看我的文中介绍,经过大量实验搭建总结出来的文档