`

AngularJS项目

 
阅读更多

1. AngularJS介绍

AngularJS是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用 数据绑定 和 依赖注入,它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合。

 

2. 构建AngularJS项目

 构建项目有三种:

  • 手工项目: 自己建目录,下载类库,写html,js,css,自己实现引用关系
  • angular-seed项目: 下载github的angular-seed,在别人的基础之上开发
  • Yeoman项目:通过Yeoman下载一个标准Yeoman项目,已经内置了grunt及各种工具包

1). 手工项目

构建手工项目是我们平时用的最多的一种方式了,适用于小型或demo项目。我不在解释,参照angularjs一步一步操作就行了

 

2). angular-seed项目

一般把这个项目称为angular的“种子项目”,构建方法是去github下载项目源代码,基于已有项目结构再做开发。这种项目都融入了前人的经验,会以一种比较合理的结构,帮我们构建出项目的原型。适合于有一定规模项目开发,同时更适合geek的扩展。

 

3).下载AngularJs项目

 github上有一个比较好的纯净AngularJs app的种子,可以去github下载,地址:

 https://github.com/glitchtank/angular-seed-master

 

4). AngularJs目录说明

## Directory Layout
    app/                --> all of the files to be used in production
      css/              --> css files
        app.css         --> default stylesheet
      img/              --> image files
      index.html        --> app layout file (the main html template file of the app)
      index-async.html  --> just like index.html, but loads js files asynchronously
      js/               --> javascript files
        app.js          --> application
        controllers.js  --> application controllers
        directives.js   --> application directives
        filters.js      --> custom angular filters
        services.js     --> custom angular services
      lib/              --> angular and 3rd party javascript libraries
        angular/
          angular.js        --> the latest angular js
          angular.min.js    --> the latest minified angular js
          angular-*.js      --> angular add-on modules
          version.txt       --> version number
      partials/             --> angular view partials (partial html templates)
        partial1.html
        partial2.html

    config/karma.conf.js        --> config file for running unit tests with Karma
    config/karma-e2e.conf.js    --> config file for running e2e tests with Karma

    scripts/            --> handy shell/js/ruby scripts
      e2e-test.sh       --> runs end-to-end tests with Karma (*nix)
      e2e-test.bat      --> runs end-to-end tests with Karma (windows)
      test.bat          --> autotests unit tests with Karma (windows)
      test.sh           --> autotests unit tests with Karma (*nix)
      web-server.js     --> simple development webserver based on node.js

    test/               --> test source files and libraries
      e2e/              -->
        runner.html     --> end-to-end test runner (open in your browser to run)
        scenarios.js    --> end-to-end specs
      lib/
        angular/                --> angular testing libraries
          angular-mocks.js      --> mocks that replace certain angular services in tests
          angular-scenario.js   --> angular's scenario (end-to-end) test runner library
          version.txt           --> version file
      unit/                     --> unit level specs/tests
        controllersSpec.js      --> specs for controllers
        directivessSpec.js      --> specs for directives
        filtersSpec.js          --> specs for filters
        servicesSpec.js         --> specs for services
分享到:
评论

相关推荐

    AngularJS项目搭建技术入门

    AngularJS项目搭建技术入门,文档中教你用Grunt、Gulp搭建完整的前端运行框架,以及对于新手如何快速上手angularjs起到很大的帮助。

    Ads-AngularJS-Project:AngularJS 项目

    **AngularJS 项目详解** AngularJS,作为一款强大的前端JavaScript框架,由Google维护,主要用于构建单页应用程序(SPA)。这个“广告-AngularJS-项目”很可能是为了演示或者实践如何利用AngularJS来开发广告相关的...

    AngularJS入门之简单的项目搭建

    本教程将引导你逐步入门AngularJS,通过创建一个简单的项目来理解其核心概念。在我们的项目中,我们将涵盖网络请求封装、模拟Android的toast效果以及前台数据MD5加密。 1. **AngularJS基本概念** - **模块(Module...

    ionic项目简介以及Angularjs 基础

    根据所提供的文件内容,我们可以总结出以下关于Ionic项目以及AngularJS的知识点: ### Ionic项目简介 Ionic是一个开源的前端框架,用于开发跨平台的移动应用。它主要利用Web技术(HTML5、CSS、JavaScript)以及...

    angularApp:AngularJS 项目的脚手架

    "angularApp:AngularJS 项目的脚手架" 提供了一种快速启动 AngularJS 应用程序开发的方式,它预先配置了一系列工具,使得开发者能够更加高效地进行项目构建。 在描述中提到的 "安装" 部分,提到了几个关键的命令行...

    angularjs分页实例

    在本文中,我们将深入探讨AngularJS分页的实现方法,这是一种强大的前端JavaScript框架,用于构建交互式的Web应用程序。...在实际项目中,应根据具体需求进行适当的定制和优化,确保分页功能既实用又高效。

    angular-base:新的AngularJS项目的脚手架项目

    "angular-base:新的AngularJS项目的脚手架项目" 这个标题表明我们正在讨论一个用于创建新AngularJS项目的初始模板或脚手架。"angular-base"可能是一个特定的项目或工具,它预先配置了必要的文件和结构,使得开发者...

    requirejs-angularjs-uiroute-uploadfile:用requirejs搭建angularjs项目,以及angularjs常用功能使用demo

    用requirejs搭建angularjs项目,以及angularjs常用功能使用demo #注意 项目的资源并没有用bower管理,直接提交了 先手动搭建一个server,让项目可以正常访问 index.html是requirejs 搭建angularjs入口 其他html页面...

    ng-mini-ws:小型AngularJS项目的文件夹结构

    这将为您提供创建小型angularjs项目的基本结构。 它使用jquery,angularjs,angular-route和bootstrap。 安装 为了使用此仓库,请检查是否 节点和npm 凉亭 吉特 咕unt 已安装在您的系统上。 启动和运行的步骤- ...

    flapperNews:AngularJS 项目

    **AngularJS 项目——flapperNews** AngularJS 是一个由 Google 主导开发的前端 JavaScript 框架,它主要用于构建动态、数据驱动的 Web 应用。在"flapperNews"这个项目中,我们将深入探讨如何利用 AngularJS 来创建...

    AngularJS实战.pdf 中文完整版

    AngularJS实战通过理论与实践相结合的方式,精选了92个简洁、实用的实例,用由浅入深、逐层推进的方式,详细地展示了Angular作为前端Web页面开发新利器的方方面面。通过本书的学习,读者不仅可以全面了解并掌握整个...

    angularjs项目的页面跳转如何实现(5种方法)

    在AngularJS项目中,页面跳转是常见的操作,它涉及到应用程序的导航流程和用户体验。本文将详细介绍五种在AngularJS中实现页面跳转的方法,帮助开发者更好地理解和掌握这些技术。 1. **基于ui-router的页面跳转传参...

    html-angular-validate:针对AngularJS项目HTML验证程序节点模块

    一个针对AngularJS项目HTML验证器。 尽管还有其他一些节点插件可以验证HTML文件,但是缺少一些重要的功能: 支持AngularJS属性和标签(来自AngularJS和自定义创建) 支持模板化/片段化HTML文件 能够同时验证文件...

    Mastering Web Application Development with AngularJS

    Pawel是自由和开源软件的坚定支持者,他在AngularJS 社区非常活跃,为AngularJS项目贡献了大量的代码。他也对Angular UI (AngularJS的配套框架)有所贡献,并为AngularJS 提供了Twitter Bootstrap 相关的指令...

    AngularJS Eclipse 1.2.0 插件下载

    5. **项目模板**:提供了AngularJS项目的创建向导,可以快速搭建起一个标准的AngularJS应用结构。 6. **集成测试**:与 Karma 集成,支持单元测试和端到端测试,方便进行自动化测试。 7. **资源管理**:对...

    Angular-Ad-Project:SoftUni 中 AngularJs 课程的 AngularJs 项目

    SoftUni 中的 AngularJs 课程的 AngularJs 项目 您被指派设计和实施一个使用 HTML5 和 AngularJS 作为单页应用程序 (SPA) 发布在线广告的网站。 该应用程序管理按城镇和类别组织的用户及其广告。 匿名网站访问者...

    项目中用Yeoman构建AngularJS

    本文将深入探讨如何利用Yeoman这一自动化工具来构建AngularJS项目,以提高开发效率。 首先,让我们了解什么是Yeoman。Yeoman是一个现代化的工作流工具,它可以帮助开发者快速搭建项目结构,自动配置各种构建工具,...

    angularJSproject:SoftUni 的广告 AngularJS 项目

    **AngularJS项目——软uni广告应用** AngularJS是一款由Google维护的前端JavaScript框架,用于构建单页应用程序(SPA,Single Page Applications)。这个“AngularJSproject”是一个基于AngularJS的实战项目,专注...

    angularjs 开发实例

    本开发实例“angularjs 开发实例”提供了一个实际的项目案例,帮助开发者深入理解AngularJS的核心概念和功能。 在下载并解压缩文件后,您会得到一个名为"angular-phonecat"的文件夹。这个文件夹包含了完整的...

    AngularJS入门小Demo

    要深入了解这个入门 Demo,建议访问项目笔记地址(),那里会有更详细的步骤和代码解释。同时,通过实践 AngularJS-demo 中的示例,你将更好地掌握 AngularJS 的基础,为进一步深入学习和应用打下坚实的基础。

Global site tag (gtag.js) - Google Analytics