一.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.
相关推荐
angularjs+require+angular-ui-router环境搭建
angularjs学习需要导入的angular.js
angularjs
AngularJS提供的种子工程文件。 用于开发小型基于Angular的WebApp使用。 该框架主要包含 app.js - 应用启动文件 controller.js - 控制器文件 filer.js - 过滤器文件 partials文件夹 - 显示模板文件夹 services.js -...
angular-1.6.10 ,官方完整包 AngularJS 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。 AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。 AngularJS 通过 指令 ...
小伙伴们找了很多坑爹的手册 终于找到干货了 非常值得拥有
Angular-xeditable 是 AngularJS 指令绑定,允许创建(可编辑元素) editable elements,这种技术被称之为 click-to-edit 或 edit-in-place。Angular-xeditable 是基于 x-editable 开发的,但是是使用 AngularJS,...
angularJs 本地化js下载 angular-locale_zh-cn.js 我是用来处理 日期工具英文的问题,转换成中文,直接引用就行,都是从官网上下载的,为啥不能选择需要的分数了???我还想一分呢
(精通AngularJS)Mastering Web Application Development with AngularJS code 源代码
angular-seed — AngularJS 应用程序的种子 这个项目是一个典型的 Web 应用程序的应用程序框架。 您可以使用它来快速引导您的 angular webapp 项目和这些项目的开发环境。 种子包含一个示例 AngularJS 应用程序,并...
文件内容包括angular,js,angular-animate.js,angular-cookie.js,angular-loader.js,angular-mock.js,angular-resource.js,angular-route.js,angular-sanitize.js,angular-scenario.js,angular-touch.js等,是github...
angular-seed — AngularJS 应用程序的种子 这个项目是一个典型的 Web 应用程序的应用程序框架。 您可以使用它来快速引导您的 angular webapp 项目和这些项目的开发环境。 种子包含一个示例 AngularJS 应用程序,并...
AngularJS_权威教程.pdf AngularJS_深度剖析与最佳实践.pdf
AngularJS参考手册,AngularJS相关数据和资源。 AngularJS参考手册,AngularJS相关数据和资源。
里面有精通angularjs权威指南和精通angularjs两本书的pdf,我从两本书中学到很多开发技术,希望大家也能从中获取很多。
本工程只是对qiankun官网样例的补充,如果想要详细了解qiankun请访问官网:https://qiankun.umijs.org/工程启动在主应用与子应用下先分别完成依赖的安装npm install启动主应用npm run start:main启动 angularjs 子...
AngularJS到Angular升级路径 组织 角度v1 来自基本AngularJS应用程序 角v1角v5 带有AngularJS和Angular测试的混合应用程序 可以在找到所采取的步骤 src 脚本集合,这些脚本对于将AngularJS升级到Angular很有用。 ...
angularjs 增加 breadcrumb并支持翻译
angular-seed — AngularJS 应用程序的种子这个项目是一个典型的 Web 应用程序的应用程序框架。 您可以使用它来快速引导您的 angular webapp 项目和这些项目的开发环境。 种子包含一个示例 AngularJS 应用程序,并...