suchen

Heim  >  Fragen und Antworten  >  Hauptteil

angular.js - 关于前端开发单页面的开发

不借用框架做一个很是复杂的单页面应用，会有什么问题要注意？
然后想使用yeoman+angularJS的框架来做，但我从来没接触过这些。网上也找不到angular开发的好的教程，希望大家帮忙给找找看。

某草草某草草2759 Tage vor672

Antworte allen(7)Ich werde antworten

  • 怪我咯

    怪我咯2017-05-15 16:57:02

    1.对于如果你是初学Angular那么希望你可以先把Angular的基本功掌握好了，对于你接下来的开发是有极大的帮助的。
    2.给你推荐一些网站：

    • 国内的ngnice

    • 国内的AngularJS中文社区

      3.国外的网站：

    • AngularJS官网

    • scotch

    • ng-newsletter

      4.关于你想使用的yeoman+Angular，可以看看下面的网站：

    • yeoman

    • generator-angular你用yeoman会用到的一个generator，帮你组织文件结构，相当方便。

      5.一点建议，学习Angular还是要多看看国外的资料，国内的一些讲解有些是旧版本的，有些讲解与Angular的思想根本不一样，当然最好是照着官网上的例子，还有文档走一遍，你就大概知道是怎么回事了。
      6.如果是看书的话，推荐看AngularJS权威指南，虽然书中也有一些印刷的错误，总体感觉还是可以的。

    Antwort
    0
  • 阿神

    阿神2017-05-15 16:57:02

    前人整理我只是借花献佛

    http://www.html-js.com/article/Angular-learning-angularjs-learning-resource-collection%203059

    GitHub地址 https://github.com/dolymood/AngularLearning
    基础

    官方： http://docs.angularjs.org angularjs官方网站已被墙，可看 http://www.ngnice.com/；
    官方zip下载包 https://github.com/dolymood/angular-packages，已增加docs服务，输入地址即可，例如：http://blog.aijc.net/angular-packages/angular-1.3.15/docs/
    jquery?ag? : http://stackoverflow.com/questions/14994391/how-do-i-think-in-angularjs-if-i-have-a-jquery-background
    ag note：https://github.com/joeylin/angular-note
    angularjs book：https://github.com/shyamseshadri/angularjs-book
    learning-angular：https://github.com/zafarali/learning-angular 以及我的翻译版本（ing）https://github.com/dolymood/learning-angular
    angular和require结合方式：https://github.com/tnajdek/angular-requirejs-seed
    利用angular开发下一代Web应用(angular js) 【书】
    Lcllao的ag笔记：http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html
    angular-service-or-factory ? 傻傻分不清楚？http://iffycan.blogspot.com.ar/2013/05/angular-service-or-factory.html 以及 https://github.com/tylermcginnis/AngularServices
    angular-injection http://iffycan.blogspot.com.ar/2013/07/angular-injection.html
    利用angular开发下一代Web应用(angular js) 书https://github.com/aztack/AngularJS-translation
    破狼的angular文章集合 http://www.cnblogs.com/whitewolf/category/404298.html
    邹业盛 angular的学习笔记 http://zouyesheng.com/angular.html
    吕大豹的angular文章合集 http://www.cnblogs.com/lvdabao/tag/AngularJs/
    尘封の烟雨的angular文章合集 http://wangjiatao.diandian.com/?tag=angularjs
    黑暗執行緒 的angular文章（繁体）http://blog.darkthread.net/blogs/darkthreadtw/archive/tags/AngularJS/default.aspx
    AngularJS 数据建模 http://blog.jobbole.com/54817/
    AngularJS 中的一些坑 http://blog.jobbole.com/52857/
    中文版guide http://angular.duapp.com/guide
    angular tips http://angular-tips.com/
    ng-newsletter http://www.ng-newsletter.com/
    AngularJS 开发者最常犯的 10 个错误 http://www.oschina.net/translate/top-10-mistakes-angularjs-developers-make
    AngularJS 指令实践指南（二） http://blog.jobbole.com/62999/
    fse.guru http://www.fse.guru/angular-core-components-roles 以及作者其他相关的ng文章
    深入理解AngularJS 的 Scope http://www.lovelucy.info/understanding-scopes-in-angularjs.html
    angularjs中文社区关于angular.js文章、教程 http://angularjs.cn/tag/AngularJS
    xufei的博客 https://github.com/xufei/blog/issues 一直在更新，荐，讲得很好！
    angularjs-internals-in-depth http://www.smashingmagazine.com/2015/01/22/angularjs-internals-in-depth/
    introduction-to-unit-testing-in-angularjs http://www.smashingmagazine.com/2014/10/07/introduction-to-unit-testing-in-angularjs/
    AngularJS Unit Testing – For Real, Though https://quickleft.com/blog/angularjs-unit-testing-for-real-though/
    Quick Starter Repository for Angular Material https://github.com/angular/material-start
    angular cheat sheet https://dncmagazine.blob.core.windows.net/downloads/AngularCheatSheet-DNCMagazine.pdf
    angular-translate https://github.com/angular-translate/angular-translate
    推荐 15 个 Angular.js 应用扩展指令 http://www.oschina.net/translate/15-directives-to-extend-your-angular-js-apps
    A Guide To Transclusion in AngularJS http://teropa.info/blog/2015/06/09/transclusion.html
    示例

    官方示例教程：http://docs.angularjs.org/tutorial/
    我自己的 angular example
    7步从菜鸟到专家（建议原文，可以直接看代码示例）：http://blog.jobbole.com/46779/”
    强大的ToDoMVC：https://github.com/tastejs/todomvc
    angular-ajax-upload 指导性质的http://iffycan.blogspot.com.ar/2013/08/angular-ajax-upload.html
    angular app https://github.com/angular-app/angular-app
    Fun with AngularJS! http://devgirl.org/2013/03/21/fun-with-angularjs/
    Angular指令及组件的全面范例 https://github.com/angular-cn/ng-showcase
    angular中的MVVM模式 http://greengerong.github.io/blog/2015/06/16/angularzhong-de-mvvmmo-shi/
    视频

    angular视频教程 http://www.kittencup.com/category/video/angularjs/
    阿里懒懒交流会AngularJS专场 http://www.imooc.com/view/203?utm_source=jobboleweibo
    大漠穷秋讲的AngularJS实战 http://www.imooc.com/learn/156
    codeschool上的angular视频教程 http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro
    方案，性能

    使用AngularJS构建大型Web应用http://www.infoq.com/cn/news/2013/02/angular-web-app
    优化1200=>35（建议去看看官方站点，从文章上来看，感触不深ps:个人观点） ：http://blog.jobbole.com/51180/
    模式指导：https://github.com/mgechev/angularjs-style-guide
    angularjs-performance-with-large-listshttp://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/
    angularjs-my-solution-to-the-ng-repeat-performance-problemhttp://www.williambrownstreet.net/blog/2013/07/angularjs-my-solution-to-the-ng-repeat-performance-problem/
    angularjs-pitfalls-using-scopes http://thenittygritty.co/angularjs-pitfalls-using-scopes
    只绑定一次 https://github.com/Pasvaz/bindonce
    天猪的angular-lazyload
    利用require.js动态加载路由文件的库 angularAMD https://github.com/marcoslin/angularAMD
    事件代理angular-delegate-event
    angular最佳实践 http://www.lovelucy.info/angularjs-best-practices.html
    如何组织大型JavaScript应用中的代码？http://kb.cnblogs.com/page/176541/
    databinding-in-angularjs http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933
    AngularJS Best Practices http://www.artandlogic.com/blog/2013/05/ive-been-doing-it-wrong-part-1-of-3/
    Best Practice Recommendations for Angular App Structure https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
    Superspeed your angularjs apps http://orangevolt.blogspot.com/2013/08/superspeed-your-angularjs-apps.html
    http://joshdmiller.github.io/ng-boilerplate/
    为什么我们的angular应用总是很慢 http://www.zhex.me/blog/2013/11/22/why-out-angular-app-is-slow/
    angular性能优化心得 http://atian25.github.io/2014/05/09/angular-performace/
    angular-debounce https://github.com/shahata/angular-debounce
    基于AngularJS的企业软件前端架构 http://www.infoq.com/cn/news/2014/05/angularjs-front-end-architecture
    angular data http://angular-data.pseudobry.com/
    AngularJS风格指南（包含各翻译版本） https://github.com/johnpapa/angular-styleguide
    快速构建app angular-kickstart https://github.com/vesparny/angular-kickstart
    动态加载controller https://github.com/DanWahlin/CustomerManager
    通过少使用ng-controller来提升ng性能 http://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html以及该站其他关于ng文章
    AngularJS风格指南2 https://github.com/toddmotto/angularjs-styleguide
    angularjs的数据绑定 https://github.com/rchee/translation/blob/master/angularJS/databinding-in-angularjs.md
    Create, read, update, delete MongoDB collections via AngularJS. https://github.com/Unitech/angular-bridge
    Token-based AngularJS Authentication https://github.com/sahat/satellizer
    Virtual Scroll for AngularJS ngRepeat directive https://github.com/kamilkp/angular-vs-repeat
    组件（UI|module）类

    angular UI https://github.com/angular-ui
    Bootstrap directives for Angular：https://github.com/mgcrea/angular-strap
    Material design for Angular https://github.com/angular/material
    angular lib，包含了“事件代理、dialog、上传flow、图片预览imageViewer、进化版keydown（支持传入keycode）、mousewheel、滚动加载、选择内容selection”， https://github.com/dolymood/angularLib
    xufei大神的 ng-control
    find modules for angular http://ngmodules.org/
    源码分析

    MVVM大比拼之AngularJS源码精析 http://www.cnblogs.com/sskyy/p/3709649.html
    前端源码分析 http://www.html-js.com/article/column/693
    xuwenmin的源码分析 http://www.ifeenan.com/categories.html#angularjs-ref
    其他集锦

    一个资源集锦：https://github.com/jmcunningham/AngularJS-Learning
    2013年AngularJS学习资源精选 http://blog.jobbole.com/54716/
    2013年度最强AngularJS资源合集 http://www.iteye.com/news/28651-AngularJS-Google-resource
    xuwenmin的angular合集 http://www.ifeenan.com/categories.html#angularjs-ref
    可以复制 AngularJS资源集合 http://www.csdn.net/article/2014-12-10/2823058-AngularJS
    angular2

    angular2 学习资源集锦：https://github.com/timjacobi/angular2-education

    Antwort
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-15 16:57:02

    什么是单页面应用

    如果只是简单的想拿一个单页面应用的话。你只要不用a跳转页面就好了，所有页面内容的更换都用Ajax来获取。

    我没学过angularJS，不能给你关于angularJS的建议

    这里可以给你个其他建议：
    http://www.zhile.name/2.html

    例子：http://m.shihj.com/

    Antwort
    0
  • 迷茫

    迷茫2017-05-15 16:57:02

    不借用框架的话，使用模板引擎是必要的，其次需要封装一堆常用操作，还有就是内存问题稍微注意一下。

    Antwort
    0
  • 给我你的怀抱

    给我你的怀抱2017-05-15 16:57:02

    URL，SEO最好提前设计，否则之后会蛋疼。
    url涉及浏览器前进后退，seo涉及你之后网站的访问量

    Antwort
    0
  • PHP中文网

    PHP中文网2017-05-15 16:57:02

    SPA说好做也好做，说难做也难做，SPA应用最重要的起点就是js逻辑架构，想要做出一个可以支撑起完整网站的单页面应用，架构的合理性和易用性是重点，网上很多demo都不一定适用，建议先看一些backbone的单页SPA应用，再回头架构angular会轻松很多，起码不会一头雾水，附上我做过的backbone：无贼

    Antwort
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-15 16:57:02

    还是得看你的需求，你有多少地方真的需要angular这么复杂的东西吗
    其实一个东西怎么实现都可以 还是看适合不适合
    Angular门槛不高
    建议你看
    Lynda - Up and Running with AngularJS
    网上找找 可以下载到

    Antwort
    0
  • StornierenAntwort