`

AngularJS官网种子工程AngularSeed简单分析

阅读更多

一.AngularSeed工程结构



二.AngularSeed工程运行效果

        工程默认打开view1。

        点击“view2"的超链接,效果如下:

 

三.AngularSeed中的指令、服务、过滤器具体分析

1.指令、服务分析

        在index.html中有如下一行代码

<div>Angular seed app: v<span app-version></span></div>

        其中,app-version就是自定义的指令,它的具体实现是在directives.js中,而directives.js中的appVersion指令实现很简单,仅仅调用version服务将version设置到指令所在元素上,如下所示。

'use strict';

/* Directives */
angular.module('myApp.directives', []).
  directive('appVersion', ['version', function(version) {
    return function(scope, elm, attrs) {
      elm.text(version);
    };
  }]);

        于是,我们进一步看services.js

'use strict';

/* Services */

// Demonstrate how to register services
// In this case it is a simple value service.
angular.module('myApp.services', []).
  value('version', '0.1');

        此服务将version设置成0.1。

        所以我们在页面上(因为写在index.html,所以view1、view2都会显示)看到了“Angular seed app: v0.1”效果。

2.过滤器分析

        我们打开partial2.html页面,如下所示:

<p>This is the partial for view 2.</p>
<p>
  Showing of 'interpolate' filter:
  {{ 'Current version is v%VERSION%.' | interpolate }}
</p>

        {{ 'Current version is v%VERSION%.' | interpolate }}使用了interpolate过滤器,于是打开filters.js,发现interpolate作用就是将内容中的‘%VERSIN%’替换成0.1(因为version就是version服务返回的“0.1”)。

'use strict';

/* Filters */
angular.module('myApp.filters', []).
  filter('interpolate', ['version', function(version) {
    return function(text) {
      return String(text).replace(/\%VERSION\%/mg, version);
    }
  }]);

      这样,{{ 'Current version is v%VERSION%.' | interpolate }}的结果是:Current version is v0.1.

  • 大小: 83.9 KB
  • 大小: 15.3 KB
  • 大小: 20.8 KB
分享到:
评论

相关推荐

    AngularJs1.x-gulp-seed:AngularJs gulp种子

    原始: : 创建一个空文件夹名字任意,此项目为angular-gulp-seed mkdir angular-gulp-seed初始化工程npm init创建项目基本目录结构如下: +src+app // 业务模块-app.js// 应用入口+demo // 业务模块目录,所有子模块...

    babelify-angular-seed

    **标题解析:** "babelify-angular-seed" 这个标题暗示了这是一个使用Babelify来处理AngularJS项目的种子工程。Babelify是基于Babel的工具,用于在Browserify流程中转换ES6+语法到ES5,使得现代JavaScript代码能在旧...

    Angle-3.4-angular

    "backend-angular-seed"则是一个项目模板或种子工程,它为开发者提供了一个初始的、预配置的开发环境,包括基本的目录结构、构建脚本和依赖管理。使用这个种子工程,开发者可以快速搭建起一个符合最佳实践的新...

    angular-seed-start

    "angular-seed-start" 是一个基于 AngularJS 框架的项目模板,旨在为开发者提供一个快速启动新应用的种子工程。AngularJS 是一个由 Google 维护的前端 JavaScript 框架,它极大地简化了单页应用(SPA)的开发,通过...

    angular-express

    angular-seed — AngularJS应用程序的种子该项目是典型 Web应用程序的应用程序框架。 您可以使用它快速引导您的角度化webapp项目以及这些项目的开发环境。 种子包含一个示例AngularJS应用程序,并且已预先配置为安装...

    Portail:我们的门户网站

    angular-seed — AngularJS 应用程序的种子这个项目是一个典型的 Web 应用程序的应用程序框架。 您可以使用它来快速引导您的 angular webapp 项目和这些项目的开发环境。 种子包含一个示例 AngularJS 应用程序,并...

    requesttrackerfrontend:Requesttracker 的前端

    Angular-seed 是 AngularJS 的官方种子项目,提供了一个基础模板,包括基本的构建工具配置和目录结构,便于开发者快速启动新项目。 使用 AngularJS 开发 RequestTracker 前端有以下几个优势: 1. 双向数据绑定:...

Global site tag (gtag.js) - Google Analytics