一.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.
相关推荐
原始: : 创建一个空文件夹名字任意,此项目为angular-gulp-seed mkdir angular-gulp-seed初始化工程npm init创建项目基本目录结构如下: +src+app // 业务模块-app.js// 应用入口+demo // 业务模块目录,所有子模块...
**标题解析:** "babelify-angular-seed" 这个标题暗示了这是一个使用Babelify来处理AngularJS项目的种子工程。Babelify是基于Babel的工具,用于在Browserify流程中转换ES6+语法到ES5,使得现代JavaScript代码能在旧...
"backend-angular-seed"则是一个项目模板或种子工程,它为开发者提供了一个初始的、预配置的开发环境,包括基本的目录结构、构建脚本和依赖管理。使用这个种子工程,开发者可以快速搭建起一个符合最佳实践的新...
"angular-seed-start" 是一个基于 AngularJS 框架的项目模板,旨在为开发者提供一个快速启动新应用的种子工程。AngularJS 是一个由 Google 维护的前端 JavaScript 框架,它极大地简化了单页应用(SPA)的开发,通过...
angular-seed — AngularJS应用程序的种子该项目是典型 Web应用程序的应用程序框架。 您可以使用它快速引导您的角度化webapp项目以及这些项目的开发环境。 种子包含一个示例AngularJS应用程序,并且已预先配置为安装...
angular-seed — AngularJS 应用程序的种子这个项目是一个典型的 Web 应用程序的应用程序框架。 您可以使用它来快速引导您的 angular webapp 项目和这些项目的开发环境。 种子包含一个示例 AngularJS 应用程序,并...
Angular-seed 是 AngularJS 的官方种子项目,提供了一个基础模板,包括基本的构建工具配置和目录结构,便于开发者快速启动新项目。 使用 AngularJS 开发 RequestTracker 前端有以下几个优势: 1. 双向数据绑定:...