TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Mistakes AngularJS Developers Make

152 点作者 davidkellis超过 10 年前

21 条评论

lars超过 10 年前
This is possibly better called a list of framework design mistakes made by the AngularJS team.<p>#3: The fact that the default dependency injection mechanism breaks when minified means it should never have been included. If this mechanism sneaks in anywhere in your app (and there are plenty of third party libs that use it), it wont start breaking until you bundle and minify the code, at which point you may already be in production.<p>#5: The service&#x2F;factory distinction adds a conceptual complexity that is completely unnecessary, as demonstrated in this blog post.<p>#7: Having too many watchers will slow your app down to a crawl on a desktop machine, and be even worse on a phone. This happens more easily than you&#x27;d think and it&#x27;s fundamentally caused by Angulars reliance on its digest loop. This loop is the essence of how Angular works, and it means that there are tons of applications that cannot ever run efficiently if they&#x27;re built on Angular.<p>8#: Because of the way their $scope system works, it is actually literally impossible to tell what the the meaning of ng-model=&quot;foo&quot; is by reading the program. It may in fact depend on the order in which the user interacts with elements of the web page. Consider this example: <a href="http://jsfiddle.net/7kkxLkxh/" rel="nofollow">http:&#x2F;&#x2F;jsfiddle.net&#x2F;7kkxLkxh&#x2F;</a> What foo binds to is dependent on which input you type into first. Yes, there are ways to avoid this, but it should have been avoided by either disallowing this construct, or requiring foo to be declared before it is used. (If you miss a var in JS, you get a global - that turned out to be bad language design. Removing the var keyword and effectively deciding on variable scope at runtime is certainly a much worse language design.)<p>After working on a large Angular project, it is clear to me that there are a lot of ideas in there that are frankly not good. It&#x27;s sad that there seems to be very little discussion anywhere about the downsides of the various frameworks that are out there.
评论 #8407355 未加载
评论 #8407284 未加载
评论 #8408600 未加载
评论 #8408372 未加载
评论 #8407267 未加载
troybetz超过 10 年前
Grouping files by feature has made navigating and reasoning about a codebase so much easier. I&#x27;ve even found myself grouping stylesheets &amp; test files alongside templates and app code, it really helps enforce the idea of composing smaller apps together.<p>Google has released a recommended app structure similar to this as well [0], though I haven&#x27;t actually seen it being used too often in the projects I&#x27;ve come across.<p>[0] - <a href="https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/" rel="nofollow">https:&#x2F;&#x2F;docs.google.com&#x2F;document&#x2F;d&#x2F;1XXMvReO8-Awi1EZXAXS4PzDz...</a>
评论 #8407132 未加载
评论 #8406591 未加载
mfrisbie超过 10 年前
These types of articles are great, but too frequently I see phrases such as, &quot;It makes testing much simpler&quot; sprinkled throughout them without any justification. These claims are generally not untrue, but it seems like it would be appropriate to demonstrate scenarios of the unit and e2e tests actually being affected by decisions in the application code.
评论 #8407281 未加载
benlesh超过 10 年前
It&#x27;s a good article, but a good portion of these aren&#x27;t &quot;mistakes&quot; but rather &quot;opinions&quot;.<p>#1 isn&#x27;t a &quot;mistake&quot; it&#x27;s a preference, really. Also, I&#x27;m really not sure about putting the template files in the directory with the other files. Then I guess I&#x27;d have to add something to my build script to copy them to a hosted directory?<p>#3.1 IMO, Is actually more of a mistake. Imagine you have 3-4 modules, which one do you define that underscore service in? Oops, better make a 5th &quot;common&quot; module, I guess. Just to include something that you could have injected with $window. Notably, the underscore service is also missing that it should be injecting $window. How is he going to test that? Scrap the whole underscore service, and just inject $window where you need something from the global scope.<p>#9.1 Protractor - Protractor is great. But it&#x27;s a little hefty for true &quot;unit&quot; tests. Jasmine with `angular-mocks` works a little better for unit testing Controllers and Services, where Protractor is better at testing directives and full end-to-end tests.<p>and one thing I&#x27;d add to this list:<p>#11 - Overly &quot;DRY&quot; Jasmine tests.<p>A lot of Angular developers I know are way too fond of drying up their Jasmine tests with nested describe() blocks and lots of beforeEach() clauses. Tests should really be &quot;DAMP&quot; not &quot;DRY&quot;.
评论 #8407351 未加载
评论 #8407377 未加载
评论 #8407369 未加载
评论 #8407311 未加载
joesmo超过 10 年前
I disagree with #10 (Using jQuery). Why would I rewrite perfectly good widgets (jQuery plugins) in Angular (or any other library) when I can create a thin Angular wrapper around them? Because the philosophy is different? That&#x27;s hogwash. At the end of the day, you&#x27;re still manipulating HTML no matter what library you use or don&#x27;t. This is pure nonsense, not to mention impractical, and bad advice.
评论 #8407276 未加载
评论 #8407488 未加载
评论 #8407969 未加载
maaaats超过 10 年前
Point 3 about &quot;Dependency injection&quot; is often not needed. Just use ng-annotate before minify&#x2F;uglify, and it will convert the code to the array syntax for you. It handles most of the cases, leaving your code without the ugly array stuff.<p>It doesn&#x27;t work for everything, though, so suddenly it blows up. So if you want to be 100% sure your code works as intended do it manually.
评论 #8406638 未加载
评论 #8407156 未加载
评论 #8407213 未加载
jcampbell1超过 10 年前
This is all really great advice. The only thing I would add is that the number of watches is important, but the type of watch (reference vs value) is also important.<p>I have seen people make Angular charts, and they use deep value type watches that kill performance. It is fine for angular to watch a massive array with time series data, but use a reference watch, and swap out the array when the data changes.<p>People talk about the scalability of Angular&#x27;s dirty checking, but in my experience the number of watches should be roughly the number of interactive elements in the user interface. Since there are limits to how much interface a human brain can process, the theoretical problems of dirty checking are not real problems in practice. If you have more than 2000 interactive elements on a page, then you probably have a different problem, not an angular problem.
mckinnsb超过 10 年前
Hey - #8 regarding &quot;consulting the prototype chain if the value is an object&quot; is something of an oversimplification, and slightly incorrect. The prototype chain is more or less always consulted because that is the only way to evaluate the property on a child scope.<p>What is happening in the first example is that the ng-bind directive is creating a new entry on the child scope, called &quot;user&quot;, which overwrites the reference to the property defined in the parent scope. When you ng-bind an attribute of an object, your child scope is not changing the reference to the original object, so both scopes will show updates.<p>Example fiddle: <a href="http://jsfiddle.net/02f4o7u9/1/" rel="nofollow">http:&#x2F;&#x2F;jsfiddle.net&#x2F;02f4o7u9&#x2F;1&#x2F;</a>
评论 #8406915 未加载
yesimahuman超过 10 年前
The modules one isn&#x27;t necessarily true. I&#x27;m seeing a lot of Angular devs keep things under one module (esp for libraries). I don&#x27;t think the value of multiple modules has really been realized. Exs: we do this for Angular Material and Ionic.
评论 #8406597 未加载
AdamCraven超过 10 年前
On point 1: &quot;AngularJS is, for lack of a better term, an MVC framework.&quot;<p>It is not an MVC framework. The angular team even describes it as an MVW framework (the W stands for Whatever).<p>Angular on its own does not provide enough structure to work on large projects. It requires a better structure than using directories called &#x27;controllers&#x27;, &#x27;services&#x27; and &#x27;directives&#x27;. These are just angular concepts that do not translate well into understanding of what functionality should go in each directory. If you&#x27;ve worked on a larger project, you may have already seen this problem.<p>Angular documentation is not very helpful in pushing this point to the developer, however. It recommends[1] the use of &#x27;services&#x27; as the place to do all business logic, which causes many projects to put most of the code in the &#x27;services&#x27; directory.<p>To work on larger projects, you should create the MVC structure to fill in the gaps that angular does not provide. Creating top level folders such as: Models, View Controllers, Controllers, Endpoints (server communication). And using services, not as a top level folder, but as a way to instantiate components.<p>[1] <a href="https://docs.angularjs.org/guide/concepts" rel="nofollow">https:&#x2F;&#x2F;docs.angularjs.org&#x2F;guide&#x2F;concepts</a>
rezistik超过 10 年前
I&#x27;ve never understood the pattern of separating out services, controllers and directives into different modules. Your post controller is probably going to need your post service, so why put them in separate modules? Makes more sense to have a post module with your WYSIWYG directive, post service, post controller, etc.<p>Every time I see it I just wonder aloud, what problem did you think this solved?
评论 #8406531 未加载
评论 #8406681 未加载
knicholes超过 10 年前
9: There are no excuses for not testing an AngularJS app, I have never actually written unit or integration tests.<p>The author mentions nothing of protractor&#x27;s use of selenium webdriver and how it does blackbox testing of your app. There is no mention of Karma interacting with your app&#x27;s code for integration tests, as well. They talk about unit tests under the &quot;Protractor&quot; header, but integration tests can be run both by Karma and Protractor.<p>9.2: &quot;Once integration tests have been written using Protractor?&quot; Karma and Protractor are both test runners that support tests written for Jasmine (among other various JS testing frameworks). Perhaps the author meant to say &quot;Once integration tests have been written using Jasmine.&quot;<p>Also, I fail to see how, &quot;Waiting for tests to run, especially integration tests, can be frustrating for developers&quot; has anything to do with Karma.<p>The rest of the stuff was useful, but the author clearly has never even coherently used these testing tools.
bicknergseng超过 10 年前
That first (and, to the extent that the author relates the two, second) point feels pretty dubious. I imagine most adherents of the &quot;directory by feature&quot; camp come from the Django-like world, while &quot;directory by type&quot; campers have Rails-like backgrounds. I haven&#x27;t found a concrete, objective reason to use one over the other. I tend to find a hybrid, &quot;directory by feature&quot; organization mirrored in each of the MVC roles to be the best of both: easy to find all views or models at once and therefore easy to spot and combine functionality across similar models or views, but also easy to find all files related to a feature via grep&#x2F;fuzzy searches&#x2F;navigating through the same directory names from different starting points.
评论 #8406885 未加载
评论 #8406872 未加载
ilovecomputers超过 10 年前
I think this the first Angular article I read that actually showed a functional difference between Factory and Service: factory can return a constructor function, service can&#x27;t. Personally, I have my factory be an actual factory by having it posses a method that returns a new instance of an object.
riffraff超过 10 年前
&gt; Whether using Sublime, Visual Studio, or Vim with Nerd Tree, a lot of time is spent scrolling through the directory tree.<p>There might be a lot of reasons to use dir-by-feature or dir-by-function but if the above is a problem you should probably get a better editor.<p>EDIT: or use yours better.
评论 #8407081 未加载
joshfinnie超过 10 年前
These are great suggestions!<p>I really enjoy 1, 9 and 10. Learn something new everyday.
seaghost超过 10 年前
Best of advices and guides are here <a href="https://github.com/johnpapa/angularjs-styleguide" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;johnpapa&#x2F;angularjs-styleguide</a>
andrew1601超过 10 年前
Not mentioned: Coding things so that your site content is invisible to the Google search engine. Which is ironic considering Google&#x27;s support of Angular
评论 #8406931 未加载
评论 #8406822 未加载
tbatterii超过 10 年前
great advice here, I would have liked to see some code examples for #4, b&#x2F;c I am currently struggling with a ng codebase where the controller are doing way too much in my opinion. using ui-router helps some, but, I would love to see more ways to keep the controllers slim.
davexunit超过 10 年前
The biggest mistake is using AngularJS. Been there, done that.
insertnickname超过 10 年前
Mistake #1: Thinking it is a good idea to use AngularJS or any other JS framework that reimplements <i>loading a page</i>.