专栏首页ThoughtWorksTW Insight - Good Practices to Build Your AngularJS Application

TW Insight - Good Practices to Build Your AngularJS Application

这是来自ThoughtWorks巴西团队分享的一些使用AngularJS的一些技巧和教训。经验内容包括结构、依赖注入、HTML扩展、作用域和模块。这是2014年ThoughtWorks Insights网站最受欢迎的内容,没有之一。

A team of us in the Porto Alegre office has been using AngularJS for a while now, and it has been learning curve. We want to share some practices that we have learned along the way that can help you start your AngularJS application on the right foot!. Learn from our mistakes! This article has no intention of setting rules or having the absolute truth but only to give some useful tips and lessons learned when writing AngularJS applications. Here are some good practices for AngularJS applications separated in five categories: #1 Structure: When we start to build an AngularJS application sometimes we don’t know exactly how to organise our files or even know what files we need. For this, the AngularJS team recommends two solutions: 1) Use the angular-seed (https://github.com/angular/angular-seed) project, which is basically a skeleton of a typical AngularJS application. You just need to clone the repository and you are good to go! 2) The other recommendation is to use yeoman (http://yeoman.io/) which is a tool that will basically create the skeleton and add other tools such as bower and grunt, which are widely used in the development of javascript applications according to the user preferences. You need to be very careful with these tools that seem to be very useful in the beginning. Why is that? Because you need to think first on what your project needs are. For example, angular-seed will create a folder named ‘app’ where all the static deployable files are and inside we will have a folder named ‘js’ with all our javascript files like ‘controllers.js’, ‘services.js’, etc… It depends a lot in the nature of the application we are building but there will be cases in which it is better to separate files for what they mean for the business rather that having them for what kind of component they are inside the framework we are using. In this case, for example, if we are building a sales module we could have files like ‘product-controller.js’ or ‘product-service.js’ and have folders inside our ‘js’ folder with the modules of the business. #2 Dependency Injection: The AngularJS injector is pretty powerful and can be very useful if used correctly. It’s in charge of creating components, resolving their dependencies and providing the components when required. What benefits do we have when we use it? One of the greatest benefits is given when writing tests for our application! If in each component we create, following the AngularJS syntax, we can require other components and it will take care of resolving these dependencies for us, then when creating our tests we can just simply create these same components but with dependencies created by us (mocked objects), then we are able to really unit test our application and have a good coverage.

本文分享自微信公众号 - 思特沃克(ThoughtWorks)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2014-12-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于angularJs和Bootstrap的计算器

    IT故事会
  • 必备!十款 Chrome 编程扩展工具,你少了哪个?

    腾讯NEXT学位
  • angularjs源码笔记(5.1)--parse

    alexqdjay
  • [脑图]如何入门技术、进阶技术(技术开发人员)

    好好学java
  • 什么是前端路由

    用户1741436
  • 全栈工程师的思考

    Java学习123
  • 高效快速地加载 AngularJS 视图|TW洞见

    今日洞见 文章作者、部分图片来自ThoughtWorks:陈计节。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,任何媒体...

    ThoughtWorks
  • 【踩坑】angularJS 1.X版本中 ng-bind 指令多空格展示

    做项目的时候遇到的问题 1、问题描述   用户在表单某个值输入多个空格,例如:A     B,保存至服务器   在列表查询页面中使用bg-bind的指令单向绑定...

    SmileSmith
  • 快速上手JHipster (Java Hipster)创建应用

    JHipster简单来看是一个代码生成器,能够快速创建基于Spring Boot + AngularJS的应用程序。所以这就要求对Spring、Spring B...

    Bobby

扫码关注云+社区

领取腾讯云代金券