AngularJS快速入门,的常用特性
分类:前端技术

高效快速地加载 AngularJS 视图

2016/06/29 · JavaScript · 1 评论 · AngularJS

本文作者: 伯乐在线 - ThoughtWorks 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

当AngularJS应用程序变大时,很多问题就开始显现出来了,比如多层级视图的加载问题,如果在子视图显示之前没有预加载,则可能在需要展示时,发生视觉闪烁的情况。这种问题在网络缓慢,或者服务器使用较慢的https连接时更容易出现。

本文将讨论更高效加载AngularJS视图的系统方法。

单页Web应用(SinglePage)

13、使用路由和 $location 切换视图

AngularJS快速入门,angularjs

AngularJS 视图一般原理

AngularJS视图也并不是什么特别神奇的技术,在其内部就是按普通的directive来处理的。也就是说,当一个位置需要显示view时,AngularJS会尝试使用某种方法获得其HTML模板文件的具体内容、包装成directive,执行directive的标准流程,最后添加到页面上。

图片 1

回想一下,directive本身是不是正好也支持templateUrl属性?这就与view技术衔接上了。

这样说来,是不是视图模板也可以使用行内DOM甚至是字符串字面量值了呢?答案是肯定的!我们本来就可以使用一段行内DOM来作为view的模板。例如:

图片 2

当然,作为一个大型的AngularJS应用程序,将所有view都放在字符串值里,或者行内DOM里是不太现实的,我们希望可以使用多个小的HTML文件来作为子模板。这样,虽然整个应用很大,但每个子模板的文件并不大,一般都是几KB的小文件,当用户点击到指定位置,需要时使用对应界面的模板时再去加载,也就显著提高了效率。

我们可以用下图来表示“行内DOM”与“多个子模板文件”的性能对比:

图片 3

顾名思义,只使用一个页面的Web应用程序.单页面应用是指用户通过浏览器加载独立的HTML页面,Ajax加载数据页面无刷新,实现操作各种操作。

  对于一些单页面应用来说,有时候需要为用户展示或者隐藏一些子页面视图,可以利用 Angular 的 $route 服务来管理这种场景。

AngularJS是什么?

AngularJS是一个开源Web应用程序框架。它最初是由MISKO Hevery和Adam Abrons于2009年开发。现在是由谷歌维护。它的最新版本是1.3.14。

AngularJS在它的官方文档 中定义如下:

 AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

AngularJS 对视图加载的优化

上面提到了“多个子模板文件”的模板组织方式,这本是一件很平常、很自然的工作方式而已。也正是因此,才让人们感觉AngularJS工作方式与自己的期望的一致:因为在没有使用AngularJS之前,人们在开发一个 Web应用时,页面就是这样一个个组织的。

即使在以前,我们在提到性能的时候,自然会想到“缓存”。在以前,页面与页面之间的跳转使得每个页面都是相互独立的单位,因此页面内容的缓存只能有赖于浏览器了。而今,AngularJS让所有页面子模板都在“单页应用”中加载,于是,我们在这个单页面应用内便获得了缓存页面内容的机会。

AngularJS中内建了缓存机制templateCache:只要已经加载过某个页面子模板,就会在templateCahce中缓存起来,下次从服务器加载页面模板之前,先检查templateCache,如果已有缓存则不需要从服务器上加载,直接使用。

图片 4

AngularJS中内建了templateCache 机制之后,加载视图的过程变得高效而轻松,Web应用本身,以及开发者都不需要关心这一过程。不过,即使有页面内的templateCache,页面模板在初次使用时还是需要从服务器加载,因此偶尔能见到一些视觉闪烁的情况,比如标签切换、页面跳转等。

模板(template)

  你可以利用路由服务来定义这样的一种东西:对于浏览器所指向的特定 URL,Angular 将会加载并显示一个模板,并实例化一个控制器来为模板提供内容。

特性

  • AngularJS是一个功能强大的基于JavaScript开发框架用于创建富互联网应用(RIA)。

  • AngularJS快速入门,的常用特性。AngulajJS为开发者提供的选项(使用JavaScript)在一个干净的MVC(模型 - 视图 - 控制器)的方式来编写客户端应用程序。

  • AngularJS写的应用都是跨浏览器兼容。AngularJS使用JavaScript代码自动处理适应每种浏览器。

  • AngularJS是开源的,完全免费的,并且由数千名世界各地的开发者开发维护。它是根据Apache许可证2.0版许可发布。

总体来说,AngularJS是一个用来构建大型应用,高性能的Web应用程序的框架,同时使它们易于维护。

对AngularJS templateCache的优化

作为一种优化手段,我们很自然能想到,既然页面能够在加载之后在templateCache起来就能提高性能,如果在应用启动之初templateCache中就有了所有页面的缓存,也就根本不需要服务器了,那么在页面需要显示时,也就基本不需要加载时间了。图可以变成这样:

图片 5

要实现这一目标,只需要在发布应用之前,构建额外的templates.js 文件,在其中将所有的页面模板读取出来并提前put到templateCache中,再将形成的templates.js嵌入到应用中即可在Web应用启动时就已经拥有所有页面模板内容的缓存版本了。

不过,对于大型AngularJS Web应用来说,我们很快发现一个问题:这个templates.js文件本身的体积迅速大了起来,它又会成为一个新的性能问题。

于是,我们可以使用另一个已有的经验:“异步加载”。有了异步加载的支持,在加载templates.js 的请求还没有完成之前,可以“降级”使用AngularJS内建的机制,而一旦templates.js加载完成,就立即拥有了所有模板的缓存。

图片 6

理想中,templateCache最好能达到最佳的性能表现,但实际应用中,如果不加优化,templates.js文件本身的体积会令这种优化效果有所折扣,而加上异步加载 templates.js和降级到逐个加载单个htm模板文件之后,又有了一些改善。

在AngularJS中,一个模板就是一个HTML文件。但是HTML的内容扩展了,包含了很多帮助你映射model到view的内容。

  在应用中可以调用 $routeProvider 服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可。伪代码如下:

核心特征

以下是AngularJS中最重要的核心功能:

  • 数据绑定: 模型和视图组件之间的数据自动同步。

  • 适用范围: 这些对象参考模型。它们充当控制器和视图之间的胶水。

  • 控制器: 这些Javascript函数绑定到特定的范围。

  • 服务: AngularJS配有多个内置服务,例如 $http 可作为一个XMLHttpRequest请求。这些单一对象在应用程序只实例化一次。

  • 过滤器: 从一个数组的条目中选择一个子集,并返回一个新的数组。

  • 指令: 指令是关于DOM元素标记(如元素,属性,CSS等等)。这些可以被用来创建作为新的,自定义部件的自定义HTML标签。AngularJS设有内置指令(如:ngBind,ngModel...)

  • 模板:这些符合从控制器和模型信息的呈现的视图。这些可以是单个文件(如index.html),或使用“谐音”在一个页面多个视图。

  • 路由: 它是切换视图的概念。

  • 模型视图: MVC是一个设计模式将应用划分为不同的部分(称为模型,视图和控制器),每个都有不同的职责。 AngularJS并没有传统意义上的实现MVC,而是更接近于MVVM(模型 - 视图 - 视图模型)。 AngularJS团队将它作为模型视图。

  • 深层链接: 深层链接,可以使应用程序状态进行编码在URL中而能够添加到书签。应用程序可从URL恢复到相同的状态。

  • 依赖注入: AngularJS有一个内置的依赖注入子系统,开发人员通过使应用程序从而更易于开发,理解和测试。

浏览器缓存

现在再来讨论一下浏览器缓存,可以结合上一节的templates.js一起来讨论了。浏览器缓存是浏览器里内置的一种缓存功能,当服务器正确配置了对htm和js文件的缓存支持时,浏览器将按指示缓存这些文件。不管是对一个个htm模板,还是对templates.js,都可能被缓存。

也就是说,只要在服务器上正确配置,那么上一节所述的“异步 templates.js”,以及“降级的多个htm模板文件”都可以被浏览器缓存。这样,我们将加载htm模板文件和templates.js的需求都减少到第一次使用应用之时。

但在服务器上配置缓存也需要谨慎,如果配置不当,就会出现当服务器上文件已经更新,但客户端浏览器仍在使用老的缓存版本的问题。由于AngularJS应用使用绑定表达式显示界面,因此如果程序已经更新,而视图还是老版本,那么绑定表达式很可能失效。这种情况下,轻则局部界面错乱,重则整个Web应用完全无法使用。

图片 7

浏览器缓存原本是一个“杀手锏”,不管是只使用单个模板文件,还是使用templateCache,浏览器缓存都可以极大地改善其性能效果。但一旦缓存配置不当致使客户端浏览器里使用了错误的版本,就直接导致应用错误,更不谈性能表现了。

要处理缓存问题也有成熟的经验可供借鉴:也就是在文件名上使用版本号,每次需要更新文件内容时,同时更改版本号,那么整个文件名也就发生变化,也就不会发生缓存版本错误问题。结合上面的论述,我们在templates.js 上添加上版本号,另一方面配置AngularJS,在加载单个htm模板文件时,也会在请求上附上版本号,即可解决这一问题。当然,我们希望在开发时,标记要使用的视图模板时,不需要指定这个需要经常变化的版本号,从而最大程度地保障开发体验,并将维护成本降到最低。

图片 8

»  HTML模板将会被浏览器解析到DOM中。

1 var someModule = anguler.module('someModule', [...module dependencies...]);
2 
3 someModule.config(function($routeProvider) {
4     $routeProvider.
5         when('url', {controller : aController, templateUrl : '/path/to/template'}).
6         when(...other mappings for your app...).
7         ...
8         otherwise(...what to do if nothing else matches);
9 });    

概念

下图描述了AngularJS,我们将详细的后续章节讨论一些重要的部分。
图片 9

图片 10 

总结

上面讨论了AngularJS视图各种可能的方式,分别实施的方法,以及其性能表现差异。主要值得关注的是经优化的templateCache机制,以及结合浏览器缓存的templateCache方法。总结来说,可以形成这样一个更直观的图形:

经过一番努力,最终我们能够达到这样的结果:

图片 11

  1. 在应用里添加仅在生产环境才生效的策略:支持在加载视图模板文件时在文件名中添加版本号(从页面中templates.js的文件路径中分析版本号);
  2. 开发时不需要经过改变;
  3. 发布时预读取所有模板的内容,并生成带版本号的templates.js,嵌入应用页面中;
  4. 在服务器上配置所有htm模板文件及templates.js的缓存策略为“允许缓存”;
  5. 用户首次使用应用时,集中所有网络带宽加载AngularJS基础脚;本,以及应用程序业务逻辑系统,令应用程序尽早能够使用;此时应用使用htm模板文件作为视图模板;
  6. 异步加载templates.js;加载完成之后应用开始使用页面内模板缓存;
  7. 用户再次使用应用时,从浏览器缓存中加载templates.js;
  8. 再次发布应用时,修改templates.js 文件名中的版本号,嵌入页面中。

所以,在首次用户使用应用时,其网络加载图形就像这样:

图片 12

最先加载的是应用程序AngularJS框架本身,以及业务逻辑,这时候应用已经可用;此时再异步去加载templates.js文件。事实上,上面的图形即是我们实际项目中的状况,具体实现在这里就不贴了,也欢迎读者一起探讨更多的可能性。

从本文的讨论不难看出,只要通过各种方法,好好管理浏览器的加载行为,形成一个系统方法,便能令视图加载的性能表现变得更好。

1 赞 2 收藏 1 评论

»  DOM然后成为AngularJS编译器的输入。

  以上代码中,当浏览器中的 URL 变成指定的取值时,Angular 将会加载 /path/to/template 路径下的模板,然后把这个模板中的根元素关联到 aController 上,最后一行中的 otherwise 调用可以告诉路由,在没有匹配到任何东西时跳转到这里。

AngularJS的优点

  • AngularJS提供一个非常干净和维护的方式来创造单页的应用。

  • AngularJS提供数据绑定功能在HTML中,从而给用户提供丰富和响应的体验

  • AngularJS代码可进行单元测试。

  • AngularJS使用依赖注入和利用关注点分离。

  • AngularJS提供了可重用的组件。

  • 使用AngularJS,开发人员编写更少的代码,并获得更多的功能。

  • 在AngularJS中,视图都是纯HTML页面,并用JavaScript编写控制器做业务处理。

AngularJS应用程序可以在所有主要的浏览器和智能手机,包括Android和iOS系统的手机/平板电脑上运行。

关于作者:ThoughtWorks

图片 13

ThoughtWorks是一家全球IT咨询公司,追求卓越软件质量,致力于科技驱动商业变革。擅长构建定制化软件产品,帮助客户快速将概念转化为价值。同时为客户提供用户体验设计、技术战略咨询、组织转型等咨询服务。 个人主页 · 我的文章 · 84 ·   

图片 14

»  AngularJS将会遍历DOM模板来生成一些指导,即,directive(指令)。

  下面构建一个小例子,但是需要把代码放到 web 服务器上中。

AngulaJS的缺点

虽然AngularJS自带很多优点,但我们应该考虑以下几点(缺点):

  • 不安全:因为只是JavaScript一种框架,由AngularJS编写的应用程序是不安全的。服务器端身份验证和授权是必须用来保证应用程序的安全。

  • 不可降解:如果应用程序的用户禁用JavaScript,那最后用户看到的只是基本页面,仅此而已。

»  所有的指令都负责针对view来设置数据绑定。

  index.html

AngularJS组件

AngularJS框架可分为以下三个主要部分组成:

  • ng-app : 指令定义和链接AngularJS应用程序到HTML。

  • ng-model : 指令绑定AngularJS应用数据的值到HTML输入控件。

  • ng-bind : 该指令绑定AngularJS应用程序数据到HTML标签。

通过下面的DEMO我们一起了解一下Angularjs 内置模板引擎:

 1 <html ng-app="AMail">
 2     <head>
 3     </head>
 4     <body>
 5         <h1>A-Mail</h1>
 6         <div ng-view></div>
 7         <script src="../src/angular.js"></script>
 8         <script src="../src/angular-route.js"></script>
 9         <script src="controller.js"></script>
10     </body>
11 </html>

AngularJS环境设置

在本章中,我们将讨论如何建立AngularJS库在Web应用程序开发中使用。我们还将简要地学习目录结构和它的内容。

打开链接

图片 15

图片 16 

  • View on GitHub- 单击此按钮跳到GitHub,并获得所有最新的脚本。

  • Download- 或者点击此按钮,会看到屏幕如下:
    图片 17

    图片 18

    此屏幕给出了使用AngularJS如下多种选择:

    • Downloading and hosting files locally

      • 有两种不同的选择:旧版和最新版。旧版是版本低于1.2.x版本,最新是1.3.x版本。

      • 我们也可以使用缩小,非压缩或压缩版本。

    • CDN access: 也可以使用一个CDN。CDN全世界可访问,它放在谷歌主机区域性数据中心。  这也提供了一个优点,即如果访问者的网页已经从相同的CDN 下载了AngularJS的副本,它不必再重新下载。

 在本教程中我们使用的是CDN版本库
<!--模板(template):
这里的模板是指前端模板,在angularjs 之外已经有非常丰富的JavaScript模板引擎了,例如artTemplate,Mustache,doT.js等。
Angularjs 内置有自己的模板引擎。
通过下面的DEMO我们一起了解一下Angularjs 内置模板引擎:-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>angularjs 模板解释</title>
    <script src="http://www.bestsilkbedding.com/uploads/allimg/191120/23460G291-15.jpg"></script>
    <script type="text/javascript">
        //声明一个私有函数域
        (function () {
            var app = angular.module("MyModule", []);  //创建模块
            app.controller("tmplController", ["$scope", function ($scope) {
                //给变量val赋值
                $scope.val = "Hello Angularjs template";
                //给变量list赋值
                $scope.list = [
                    { title: "cnblogs", url: "http://www.cnblogs.com" },
                    { title: "codeproject", url: "http://www.codeproject.com/" },
                    { title: "google", url: "http://www.google.com/" }
                ]
                //给变量hasValue赋值
                $scope.hasValue = false;
            }]);
        })()
    </script>
</head>

<body ng-app="MyModule">
    <div ng-controller="tmplController">
        <!--普通输出-->
        <div>{{val}}</div>
        <!--循环-->
        <ul ng-repeat="item in list">
            <li><a href="{{item.url}}" rel=nofollow>{{item.title}}</a></li>
        </ul>
        <!--条件语句-->
        <div ng-if="!hasValue">
            Angularjs条件语句
        </div>
    </div>
</body>

</html>
<!--以上代码首先创建一个"MyModule"模块,然后在模块中添加了一个名词为"tmplController"的控制器,然后给scope添加三个属性“val”,“list”,“hasValue”,并赋值。
在模板页面设置angularjs作用域为"body"标签内,名词为"Bobby"-->
<!--例子中提供了3种输出方式(普通输出,循环,条件语句),当然angularjs不仅仅这几种方式
“ng-repeat”,“ng-if” 这都是通过指令实现。-->

  list.html

示例

现在让我们使用AngularJS库编写一个简单的例子。让我们创建一个HTML文件 first-angular.html 如下:

<!doctype html>
<html>
   <head>
      <script src="http://www.bestsilkbedding.com/uploads/allimg/191120/23460JX6-16.jpg"></script>
   <title>第一个AngularJS程序</title>
   </head>
   <body ng-app="myapp">
      <div ng-controller="HelloController" >
         <h2>你好 !第一个{{helloTo.title}}程序示例</h2>
      </div>
      <script>
         angular.module("myapp", [])
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
   </body>
</html>

下面的章节详细描述上面的代码:

 

 1 <table>
 2     <tr>
 3         <td><strong>Sender</strong></td>
 4         <td><strong>Subject</strong></td>
 5         <td><strong>Date</strong></td>
 6     </tr>
 7     <tr ng-repeat="message in messages">
 8         <td>{{message.sender}}</td>
 9         <td><a href="#/view/{{message.id}}">{{message.subject}}</a></td>
10         <td>{{message.date}}</td>
11     </tr>
12 </table>

包括AngularJS

我们已经包括了AngularJS的JavaScript文件到HTML页面中,所以我们可以用AngularJS:

<head>
   <script src="http://www.bestsilkbedding.com/uploads/allimg/191120/23460G250-17.jpg"></script>
</head>

在其官方网站检查AngularJS的最新版本。

Controller(控制器)

  detail.html

指向AngularJS应用程序

接下来我们指示HTML的哪一部分包含了AngularJS应用程序。这可以通过ng-app属性到AngularJS应用程序的根HTML元素。可以把它添加到HTML元素或body元素,如下所示:

<body ng-app="myapp">
</body>

Controller应该纯粹地用来把service、依赖关系、以及其它对象串联到一起,然后通过scope把它们关联到view上。如果在你的 视图里面需要处理复杂的业务逻辑,那么把它们放到controller里面也是一个非常不错的选择。

 1 <div><strong>Subject: </strong>{{message.subject}}</div>
 2 <div><strong>Sender: </strong>{{message.sender}}</div>
 3 <div><strong>Date: </strong>{{message.date}}</div>
 4 <!-- ng-bind 性能不如 {{}},尽量只在 index.html 页面使用 ng-bind,避免花括号一闪而过-->
 5 <div>
 6     <strong>To: </strong>
 7     {{recipient}}
 8 </div>
 9 <div>{{message.message}}</div>
10 <a href="#/">back to message list</a>

视图

这是视图的一部分:

<div ng-controller="HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Yiibai tutorials!</h2>
</div>

ng-controller 告诉AngularJS什么控制器使用在视图中。helloTo.title告诉AngularJS将命名helloTo.title的值写入到HTML的“model”中。

如果我要add一本书籍应该怎么办呢?我应该在controller上面新增一个方法来处理这件事情吗? 不,原因在下面解释。因为它是DOM交互/操作的一部分。

  controller.js

控制器

这里是控制器部分:

<script>
   angular.module("myapp", [])
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
    });
</script>

此代码注册一个名为HelloController的控制器功能,在myapp模块。 我们将学习更多关于它们在各自的模块和控制器章节。控制器函数注册在Angular中,通过angular.module(...).controller(...) 的函数来调用。

传递给控制器函数的$scope参数是模型。控制器函数增加了helloTo的 JavaScript对象,并在该对象它增加了一个标题字段。

Controller(控制器)-注意点

 1 //为核心的 AMail 服务创建模块
 2 var aMailServices = angular.module('AMail', ['ngRoute']);
 3 
 4 //在 URL,模板和控制器之间建立映射关系
 5 aMailServices.config(function($routeProvider) {
 6     $routeProvider.
 7     when('/', {
 8         controller: ListController,     // 全局的 function 方式去找 Controller
 9         templateUrl: 'list.html'
10     }).
11     //注意,为了创建详情视图,在 id 前面加了一个冒号,从而指定了一个参数化的 URL 组件
12     when('/view/:id', {
13         controller: 'DetailController', // 用注册的方式去找 Controller
14         templateUrl: 'detail.html'
15     }).
16     otherwise({
17         redirectTo: '/'
18     });
19 });
20 
21 //一些虚拟邮件
22 messages = [{
23         id: 0, sender: 'jean@somecompany.com', subject: 'Hi there, old friend',
24         date: 'Dec 7, 2013 12:32:00', recipients: ['greg@somecompany.com'],
25         message: 'Hey, we should get together for lunch sometime and catch up.'
26           'There are many things we should collaborate on this year.'
27     }, {
28         id: 1, sender: 'maria@somecompany.com', subject: 'Where did you leave my laptop?',
29         date: 'Dec 7, 2013 8:15:12', recipients: ['greg@somecompany.com'],
30         message: 'I thought you were going to put it in my desk drawer.'
31           'But it does not seem to be there.'
32     }, {
33         id: 2, sender: 'bill@somecompany.com', subject: 'Lost python',
34         date: 'Dec 6, 2013 20:35:02', recipients: ['greg@somecompany.com'],
35         message: "Nobody panic, but my pet python is missing from her cage."
36           "She doesn't move too fast, so just call me if you see her."
37     }];
38     
39 //把邮件发布给邮件列表模板,注意两种方式,建议使用下面注册的方式,避免全局的 function 污染
40 function ListController($scope) {
41     $scope.messages = messages;
42 }
43 
44 aMailServices.controller('DetailController', function($scope, $routeParams) {
45     $scope.messages = messages[$routeParams.id];
46 });

执行

将以上代码保存为  first-angular.html ,并在浏览器中打开它。会看到如下的输出:

图片 19图片 20

当页面在浏览器中加载,输出下面的结果:

  • HTML文档加载到浏览器,并且由浏览器进行评估计算。AngularJS JavaScript文件被加载,Angular 全局对象被创建。接下来,JavaScript一个注册控制器的函数被执行。

  • 接下来AngularJS通过HTML扫描,以寻找AngularJS应用程序和视图。当视图的定位后,它连接视图到对应的控制器函数。

  • 接下来,AngularJS执行控制器函数。然后,它呈现通过控制器模型数据来自填充的视图。此时网页已准备就绪。

不要试图去复用Controller,一个控制器一般只负责一小块视图

  效果如下:

AngularJS MVC 架构

模型视图控制器(Model View Controller)或MVC,因为它是俗称,是一种Web应用程序开发设计模式。模型-视图-控制器模式由以下三部分组成:

  • Model - 是一个最低水平负责维护数据的模式。

  • View - 这是负责显示所有或一部分的数据到用户。

  • Controller - 软件代码控制模型和视图之间的相互作用。

MVC是很流行的,因为它从用户界面层和支持分离关注隔离了应用逻辑。在这里,控制器接收应用程序的所有请求,然后使用Model,以准备视图需要的数据。然后视图使用控制器准备的数据,以产生一个最终的像样响应的数据输出。 MVC的抽象图形可以表示如下。
图片 21

图片 22

不要在Controller中操作DOM,这不是控制器的职责

  图片 23

模型

模型负责管理应用程序的数据。它响应从视图请求,同时也从控制器响应指令到自我更新。

不要在Controller里面做数据格式化,ng有很好用的表单控件

14、与服务器交互

视图

在一个特定的格式的呈现数据,由控制器决定呈现数据触发。 它们都是基于脚本的模板系统,如JSP,ASP,PHP也很容易使用AJAX技术来集成。

不要在Controller里面做数据过滤操作,ng有$filter服务

  真正的应用需要和真实的服务器进行交互,Angular 中提供了一个叫做 $http 的服务。它提供了一个可扩展的抽象方法列表,使得与服务器的交互更加容易。它支持 HTTP、JSONP 和 CORS 方式。它还包含了安全性支持,避免 JSON 格式的脆弱性和 XSRF。可以让你轻松地转换请求和响应数据,甚至还实现了简单的缓存。

控制器

控制器负责响应于用户输入并执行交互数据模型对象。控制器接收输入,并验证输入,然后执行修改数据模型的业务操作的状态。

AngularJS是一个基于MVC的框架。在接下来的章节中,让我们看看AngularJS如何使用MVC方法论。

一般来说,Controller是不会互相调用的,控制器之间的交互会通过事件进行

  返回的响应数据示例如下:

AngularJS 表达式

表达式用于应用程序绑定数据到HTML。表达式编写在双括号就如:{{ expression}}. 表达式中的行为方式与 ng-bind 指令相同。AngularJS应用表达式是纯JavaScript表达式和输出正在使用的数据。

<!--控制器(controller)控制器可以理解为控制页面某个区块的方法。
其中有一个非常重要的对象 (scope是这个控制器与页面控制器区域沟通的桥梁。
angularjs最精华的部分是双向绑定,失去了双向绑定angularjs就失去了自己的灵魂。这也是和其他以DOM操作的框架比最大的区别。-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>angularjs控制器介绍</title>
    <script src="http://www.bestsilkbedding.com/uploads/allimg/191120/23460G291-15.jpg"></script>
    <script type="text/javascript">
        (function () {
            var app = angular.module("MyModule", []);
            app.controller("cntoController", ["$scope", function ($scope) {
                var defaults = "angularjs控制器介绍";
                //设置值
                $scope.val = defaults;
                $scope.click = function () {
                    //通过内置的绑定方法click 我们重置字符串
                    $scope.val = defaults;
                };
            }]);
        })()
    </script>
</head>

<body ng-app="MyModule">
    <div ng-controller="cntoController">
        <!--绑定值-->
        <div>
            <textarea ng-model="val"></textarea>
        </div>
        <!--输出值-->
        <div>{{val}}</div>
        <!--绑定方法-->
        <div>
            <button ng-click="click()">重置</button>
        </div>
    </div>
</body>

</html>

<!--我们首先创建了一个模块,然后在模块中添加一个控制器方法 "cntoController".
在控制器里我们给scope添加了一个属性"val" 和一个方法 "click"。
在页面中我们使用"ng-model"指令绑定控制器中设置的"val"-->
 1 [
 2     {
 3         "id" : 0,
 4         "title" : "Paint pots",
 5         "description" : "Pots full of paint",
 6         "price" : 3.95
 7     },
 8     {
 9         "id" : 1,
10         "title" : "Polka dots",
11         "description" : "Dots with that polka groove",
12         "price" : 12.95
13     },
14     {
15         "id" : 2,
16         "title" : "Pebbles",
17         "description" : "Just little rocks, really",
18         "price" : 6.95
19     }
20 ]

使用数字

<p>Expense on Books : {{cost * quantity}} Rs</p>

 

  我们可以像下面这样编写查询代码:

使用字符串

<p>Hello {{student.firstname   " "   student.lastname}}!</p>
1 function ShoopingController($scope, $http) {
2     $http.get('/products').success(function (data, status, headers, config) {
3         $scope.items = data;
4     });
5 }

使用对象

<p>Roll No: {{student.rollno}}</p>

  然后就可以应用到模板中了。

使用数组

<p>Marks(Math): {{marks[3]}}</p>

15、使用指令修改 DOM

示例

下面的例子将展示上述所有表达式。

sampleAngularJS.html

<html>
<title>AngularJS 表达式</title>
<body>
<h1>Sample Application</h1>
<div ng-app="" ng-init="quantity=1;cost=30; student={firstname:'李',lastname:'刚',rollno:101};marks=[82,91,78,77,64]">
   <p>Hello {{student.firstname   " "   student.lastname}}!</p>   
   <p>Expense on Books : {{cost * quantity}} Rs</p>
   <p>Roll No: {{student.rollno}}</p>
   <p>Marks(Math): {{marks[3]}}</p>
</div>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
</body>
</html>

  指令扩展了 HTML 语法,同时它也是使用自定义的元素和属性把行为和 DOM 转换关联到一起的方式。通过这些指令,可以创建可复用的 UI 组件,配置你的应用,并且可以做到你能想象到的几乎所有事情,这些事情都可以在你的 UI 模板中实现。所以说,自定义指令是 Angular 的精髓。

输出结果

在浏览器中打开:sampleAngularJS.html, 看到结果如下:

图片 24

图片 25

  与服务一样,你可以通过模块对象的 API 来定义指令,只要调用模块实例的 directive() 函数即可,其中 directiveFunction 是一个工厂函数,用来定义指令的特性。

AngularJS 控制器

AngularJS应用主要依赖于控制器来控制数据流在应用程序中.控制器使用 ng-controller 指令定义。控制器是一个包含属性/属性和函数的JavaScript对象。每个控制器接受$scope作为参数引用到应用程序/模块,由控制器来控制。

<div ng-app="" ng-controller="studentController">
...
</div>

在这里,我们采用 ng-controller 指令声明控制器studentController。作为下一个步骤,我们将定义 studentController 如下:

<script>
function studentController($scope) {
   $scope.student = {
      firstName: "李",
      lastName: "四",
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName   " "   studentObject.lastName;
      }
   };
}
</script>
  • studentController定义一个以 $scope 作为参数的JavaScript对象。

  • $scope表示应用程序,它使用studentController对象。

  • $ scope.student是studentController对象的属性。

  • firstName 和 lastName 是 $scope.student 对象的两个属性。我们已经为它们设置了缺省值。

  • fullName是 $scope.student 对象的函数,其任务是返回合并后的名字。

  • 在fullName函数中我们得到了 student 对象,然后返回合并后的名字。

  • 我们还可以定义控制器对象在单独的JS文件,并参考(引入)该文件在HTML页面。

现在,我们可以在studentController使用ng-model或表达式来获取学生的属性。

Enter first name: <input type="text" ng-model="student.firstName"><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
  • 绑定 student.firstName 和 student.lastname 两个输入框。

  • 绑定student.fileName()到HTML。

  • 现在,只要输入名字和姓氏在输入框中,可以看到全名(fullname)自动更新。

var appModule = angular.module('appModule', [...]);
appModule.directive('directiveName', directiveFunction);

示例

下面的例子将展示控制器的使用。

testAngularJS.html

<html>
<head>
<title>Angular JS Controller</title>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
</head>
<body>
<h2>AngularJS应用示例</h2>
<div ng-app="mainApp" ng-controller="studentController">

Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
您输入的名字是: {{student.fullName()}}
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
   $scope.student = {
      firstName: "李",
      lastName: "刚",
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName   " "   studentObject.lastName;
      }
   };
});
</script>
</body>
</html>

  指令的东西很多,以后详解,这里先举个例子,感受下指令的魅力。

输出

在浏览器中打开:textAngularJS.html ,将看以下的结果:

图片 26

图片 27

  编写一个非常简单的指令:一个 <hello> 元素,它会把自己替换成 <div>Hi there</div>。

AngularJS 过滤器

过滤器用来改变修改的数据,并可以在表达式或使用管道字符指令来过滤。以下是常用的过滤器的列表。

S.No. 名称 描述
1 uppercase 转换文本为大写文字。
2 lowercase 转换文本为小写文字。
3 currency 以货币格式格式化文本。
4 filter 过滤数组到根据提供标准的一个子集。
5 orderby 排序基于提供标准的数组。

  先看指令:

大写过滤器

添加大写字母过滤器使用管道符表达式。在这里,我们添加大写过滤器中的所有字母为大写,并打印学生的名字。

Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}
1 var appModule = angular.module('app', []);
2 
3 appModule.directive('hello', function () {
4     return {
5         restrict: 'E',
6         template: '<div>Hi there</div>',
7         replace: true
8     };
9 });

小写过滤器

添加小写过滤器使用管道符表达式。在这里,我们添加小写过滤器全部以小写字母打印学生的名字。

Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

  这里,restrict 属性表示描述指令的风格,E 表示允许使用元素的形式;template 属性表示需要替换的内容;replace 属性设置为 true 表示会用 HTML 内容来替换模板。

货币过滤器

添加货币过滤器使用管道符返回数的表达式。在这里,我们添加货币过滤器使用货币格式的打印费用。

Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}

  可以在模板中这样使用它:

过滤过滤器

若要仅显示必修科目,我们使用subjectName作为过滤器。

Enter subject: <input type="text" ng-model="subjectName">
Subject:
<ul>
  <li ng-repeat="subject in student.subjects | filter: subjectName">
    {{ subject.name   ', marks:'   subject.marks }}
  </li>
</ul>
1 <html lang="en" ng-app="app">
2     <script src="../src/angular.js"></script>
3     <script src="directive.js"></script>
4     <body>
5         <hello></hello>
6     </body>
7 </html>

排序过滤器

由标记来排序科目,我们使用的OrderBy标记。

Subject:
<ul>
  <li ng-repeat="subject in student.subjects | orderBy:'marks'">
    {{ subject.name   ', marks:'   subject.marks }}
  </li>
</ul>

  把以上内容加载到浏览器中,就会显示

示例

下面的例子将展示上述所有过滤器。

testAngularJS.html

<html>
<head>
<title>Angular JS Filters</title>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
</head>
<body>
<h2>AngularJS过滤器应用示例</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
</table>
<br/>
<table border="0">
<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>
<tr><td>fees: </td><td>{{student.fees | currency}}</td></tr>
<tr><td>Subject:</td><td>
<ul>
   <li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">
      {{ subject.name   ', marks:'   subject.marks }}
   </li>
</ul>
</td></tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
   $scope.student = {
      firstName: "李",
      lastName: "Gang",
      fees:500,
      subjects:[
         {name:'物理',marks:70},
         {name:'化学',marks:80},
         {name:'数学',marks:65},
         {name:'外语', marks:87}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName   " "   studentObject.lastName;
      }
   };
});
</script>
</body>
</html>
Hi there

输出结果

在浏览器中打开:textAngularJS.html,看到结果如下: 

图片 28

图片 29

16、校验用户输入

AngularJS 表格

表中的数据本质上是通常可重复。 ng-repeat 指令可轻松用于绘制表格。下面的例子是使用 ng-repeat 指令来绘制表格。

<table>
   <tr>
      <th>Name</th>
      <th>Marks</th>
   </tr>
   <tr ng-repeat="subject in student.subjects">
      <td>{{ subject.name }}</td>
      <td>{{ subject.marks }}</td>
   </tr>
</table>

表可以使用CSS样式设置样式。

<style>
table, th , td {
   border: 1px solid grey;
   border-collapse: collapse;
   padding: 5px;
}
table tr:nth-child(odd) {
   background-color: #f2f2f2;
}
table tr:nth-child(even) {
   background-color: #ffffff;
}
</style>

  Angular 自动为 <form> 元素增加了一些好用的特性,使其更适合单页面应用。其中一个特性是,Angular 允许你为表单中的输入元素定义一个合法的状态,并且只有当所有元素都是合法状态时才允许提交表单。

示例

下面的例子将展示上述所有指令。

testAngularJS.html 文件内容:

<html>
<head>
<title>AngularJS表格示例</title>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f2f2f2;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS 表格应用示例</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr><td>姓:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>名: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>名字: </td><td>{{student.fullName()}}</td></tr>
<tr><td>科目:</td><td>
<table>
   <tr>
      <th>名字</th>
      <th>标记</th>
   </tr>
   <tr ng-repeat="subject in student.subjects">
      <td>{{ subject.name }}</td>
      <td>{{ subject.marks }}</td>
   </tr>
</table>
</td></tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
   $scope.student = {
      firstName: "周",
      lastName: "杰伦",
      fees:500,
      subjects:[
         {name:'物理',marks:73},
         {name:'化学',marks:90},
         {name:'数学',marks:68},
   {name:'英文',marks:85},
   {name:'生物',marks:77}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName   " "   studentObject.lastName;
      }
   };
});
</script>
</body>
</html>

  控制器如下:

输出结果

在浏览器中打开:textAngularJS.html ,看到结果如下:

图片 30

图片 31

 1 var addUser = angular.module('AddUserModule', []);
 2 
 3 addUser.controller('AddUserController', function ($scope) {
 4     $scope.message = '';
 5 
 6     $scope.addUser = function () {
 7         // 这里把 user 真正保存到数据库中
 8         $scope.message = 'Thanks, '   $scope.user.first   ', we added you!';
 9     }
10 });

AngularJS HTML DOM

下面的指令可用于绑定应用程序数据到HTML DOM元素的属性。

S.No. 名称 描述
1 ng-disabled 禁用给定的控制
2 ng-show 显示了一个给定的控制
3 ng-hide 隐藏一个给定的控制
4 ng-click 表示一个AngularJS click事件

  模板如下:

ng-disabled 指令

添加ng-disabled属性到一个HTML按钮,并把它传递模型。绑定模型到复选框,来看看变化。

<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button>
 1 <html ng-app="AddUserModule">
 2     <body>
 3         <form name="addUserForm" ng-controller="AddUserController">
 4             <div ng-show="message">{{message}}</div>
 5             <div>First name: <input name="firstName" ng-model="user.first" required></div>
 6             <div>Last name: <input ng-model="user.last" required></div>
 7             <div>Email: <input type="email" ng-model="user.email" required></div>
 8             <div>Age: <input type="number" ng-model="user.age" ng-maxlength="3" ng-minlength="1"></div>
 9             <div><button ng-click="addUser()" ng-disabled="!addUserForm.$valid">Submit</button></div>
10         </form>
11         <script src="../src/angular.js"></script>
12         <script src="submit.js"></script>
13     </body>
14 </html>

ng-show 指令

添加 ng-show 属性到HTML按钮,并把它传递到模型。该模型绑定复选框。

<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>

  在控制器中,可以通过 $valid 属性获取表单的校验状态,当表单中的所有输入项都合法时,Angular 将会把这个属性设置为 true,否则没有输入完成时禁用了 Submit 按钮。

ng-hide 指令

添加 ng-hide 属性到HTML按钮,并把它传递模型。该模型绑定复选框。

<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>

  图片 32图片 33

ng-click 指令

添加ng-click属性到一个HTML按钮,更新模型。绑定模型到HTML如下所示。

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter = clickCounter   1">Click Me!</button>

PS:到目前为止,已经介绍了 Angular 框架的几乎所有常用特性,掌握了这个《常用特性》系列的文章,就算是入门了,加油!

示例

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
<head>
<title>AngularJS HTML DOM 示例</title>
</head>
<body>
<h2>AngularJS HTML DOM 应用示例</h2>
<div ng-app="">
<table border="0">
<tr>
   <td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
   <td><button ng-disabled="enableDisableButton">点击我!</button></td>
</tr>
<tr>
   <td><input type="checkbox" ng-model="showHide1">显示按钮</td>
   <td><button ng-show="showHide1">Click Me!</button></td>
</tr>
<tr>
   <td><input type="checkbox" ng-model="showHide2">隐藏按钮</td>
   <td><button ng-hide="showHide2">Click Me!</button></td>
</tr>
<tr>
   <td><p>Total click: {{ clickCounter }}</p></td>
   <td><button ng-click="clickCounter = clickCounter   1">点击我!</button></td>
</tr>
</table>
</div>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
</body>
</html>

特别感谢:《用 AngularJS 开发下一代 Web 应用》

输出结果

在浏览器中打开:textAngularJS.html ,看到结果如下:
图片 34

图片 35

AngularJS 模块

AngularJS支持模块化方法。模块用于单独的逻辑表示服务,控制器,应用程序等。为保持代码简洁,我们在单独的 js 文件中定义模块,并将其命名为 module.js文件。 在这个例子中,我们要创建两个模块。

  • 应用模块 - 控制器用于初始化应用程序。

  • 控制器模块 - 用于定义控制器。

应用模块

mainApp.js

var mainApp = angular.module("mainApp", []);

在这里,我们声明了使用 angular.module 函数的应用程序mainApp模块。我们已经传递一个空数组给它。这个数组通常包含依赖模块。

控制器模块

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "Mahesh",
      lastName: "Parashar",
      fees:500,
      subjects:[
         {name:'Physics',marks:70},
         {name:'Chemistry',marks:80},
         {name:'Math',marks:65},
         {name:'English',marks:75},
         {name:'Hindi',marks:67}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName   " "   studentObject.lastName;
      }
   };
});

在这里,我们声明了使用 mainApp.controller 函数的一个控制器 studentController 模块。

使用模块

<div ng-app="mainApp" ng-controller="studentController">
..
<script src="mainApp.js"></script>
<script src="studentController.js"></script>

这里我们使用 ng-app 指令和控制器使用 ng-controller 指令的应用模块。我们已经在主HTML页面导入 mainApp.js 和 studentController.js。

实例

下面的例子将展示上述所有模块。

testAngularJS.html

<html>
<head>
<title>Angular JS 模块实例</title>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
<script src="mainApp.js"></script>
<script src="studentController.js"></script>
<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f2f2f2;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS 模块应用实例</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table border="0">
<tr><td>姓:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>名: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>姓名: </td><td>{{student.fullName()}}</td></tr>
<tr><td>科目:</td><td>
<table>
   <tr>
      <th>名字</th>
      <th>标记</th>
   </tr>
   <tr ng-repeat="subject in student.subjects">
      <td>{{ subject.name }}</td>
      <td>{{ subject.marks }}</td>
   </tr>
</table>
</td></tr>
</table>
</div>
</body>
</html>

mainApp.js

var mainApp = angular.module("mainApp", []);

studentController.js

mainApp.controller("studentController", function($scope) {
   $scope.student = {
      firstName: "周",
      lastName: "杰伦",
      fees:500,
      subjects:[
         {name:'物理',marks:78},
         {name:'化学',marks:82},
         {name:'语文',marks:68},
         {name:'外语',marks:79},
         {name:'Java',marks:87}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName   " "   studentObject.lastName;
      }
   };
});

输出结果

在浏览器中打开 textAngularJS.html; 看到的结果如下所示:

图片 36

图片 37

AngularJS表单

AngularJS丰富表格填写和验证。 我们可以用ng-click来处理AngularJS点击按钮,使用$dirty和$invalid 来做验证。使用 novalidate 以及表单来声明禁止浏览器做特定的验证。表单控件大量使用Angular事件。让我们首先快速浏览一下事件。

事件

AngularJS提供可与HTML控件相关联的多个事件。例如ng-click通常与按钮相关联。下面是支持Angular JS事件。

  • ng-click

  • ng-dbl-click

  • ng-mousedown

  • ng-mouseup

  • ng-mouseenter

  • ng-mouseleave

  • ng-mousemove

  • ng-mouseover

  • ng-keydown

  • ng-keyup

  • ng-keypress

  • ng-change

ng-click

表格的复位数据上使用 on-click 指令。

<input name="firstname" type="text" ng-model="firstName" required>
<input name="lastname" type="text" ng-model="lastName" required>
<input name="email" type="email" ng-model="email" required>
<button ng-click="reset()">Reset</button>
<script>
   function studentController($scope) { 
      $scope.reset = function(){
         $scope.firstName = "Mahesh";
         $scope.lastName = "Parashar";
         $scope.email = "[email protected]";
  }   
   $scope.reset();
}
</script>

验证数据

以下可用于跟踪错误。

  • $dirty - 状态指示值已被改变

  • $invalid- 指示值的状态是无效的

  • $error- 指出确切的错误

示例

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
<head>
<title>AngularJS 表单</title>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f2f2f2;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS 表单应用示例</h2>
<div ng-app="mainApp" ng-controller="studentController">
<form name="studentForm" novalidate>
<table border="0">
<tr><td>姓氏:</td><td><input name="firstname" type="text" ng-model="firstName" required>
   <div ng-app="" ng-controller="studentController">
   <div ng-include="'main.htm'"></div>
   <div ng-include="'subjects.htm'"></div>
</div>

实例

tryAngularJS.html

<html>
<head>
<title>Angular JS Includes 示例</title>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
<style>
table, th , td {
   border: 1px solid grey;
   border-collapse: collapse;
   padding: 5px;
}
table tr:nth-child(odd) {
   background-color: #f2f2f2;
}
table tr:nth-child(even) {
   background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Include示例</h2>
<div ng-app="mainApp" ng-controller="studentController">
<div ng-include="'main.html'"></div>
<div ng-include="'subjects.html'"></div>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
   $scope.student = {
      firstName: "周",
      lastName: "杰伦",
      fees:500,
      subjects:[
         {name:'物理',marks:78},
         {name:'化学',marks:82},
         {name:'语文',marks:68},
         {name:'外语',marks:79},
          {name:'Java',marks:87}
      ],
      fullName: function() {
         var studentObject;
         studentObject = $scope.student;
         return studentObject.firstName   " "   studentObject.lastName;
      }
   };
});
</script>
</body>
</html>

main.html

<table border="0">
   <tr><td>姓氏:</td><td><input type="text" ng-model="student.firstName"></td></tr>
   <tr><td>名字: </td><td><input type="text" ng-model="student.lastName"></td></tr>
   <tr><td>全名: </td><td>{{student.fullName()}}</td></tr>
</table>

subjects.html

<p>科目:</p>
<table>
   <tr>
      <th>名字</th>
      <th>标记</th>
   </tr>
   <tr ng-repeat="subject in student.subjects">
      <td>{{ subject.name }}</td>
      <td>{{ subject.marks }}</td>
   </tr>
</table>

输出结果

要运行这个例子,需要部署textAngularJS.html,main.html 和 subjects.html 到Web服务器。使用 URL 访问服务器并在 Web 浏览器中打开 textAngularJS.html。看到结果如下:

图片 38

图片 39

AngularJS Ajax

AngularJS提供 $http 控制,可以作为一种服务从服务器读取数据。服务器可以建立数据库调用来获取记录。AngularJS需要JSON格式的数据。一旦数据准备好,$http可以用以下面的方式从服务器得到数据。

function studentController($scope,$http) {
var url="data.txt";
   $http.get(url).success( function(response) {
                           $scope.students = response; 
                        });
}

在这里,data.txt中包含了学生记录。$http服务使 Ajax 调用并设置响应到学生的属性。 "students" 模型可以用于绘制 HTML 表格。

示例

data.txt

[
{
"Name" : "周杰伦",
"RollNo" : 104,
"Percentage" : "80%"
},
{
"Name" : "陈小春",
"RollNo" : 231,
"Percentage" : "71%"
},
{
"Name" : "张学友",
"RollNo" : 391,
"Percentage" : "75%"
},
{
"Name" : "邓紫祺",
"RollNo" : 451,
"Percentage" : "77%"
}
]

testAngularJS.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular JS Includes示例</title>
<script src="http://www.yiibai.com/js/angular.min.js"></script>
<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f2f2f2;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS 应用示例</h2>
<div ng-app="mainApp" ng-controller="studentController">
<table>
   <tr>
      <th>名字</th>
      <th>号码</th>
   <th>百分比</th>
   </tr>
   <tr ng-repeat="student in students">
      <td>{{ student.Name }}</td>
      <td>{{ student.RollNo }}</td>
   <td>{{ student.Percentage }}</td>
   </tr>
</table>
</div>
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope, $http) {
   var url="data.txt";
   $http.get(url).success( function(response) {
      $scope.students = response;
   });
});
</script>
</body>
</html>

输出结果

要运行这个例子,需要部署 textAngularJS.html,data.txt 到 Web 服务器。在服务器使用 URL 在Web浏览器中打开textAngularJS.html。看到结果如下:

图片 40

图片 41

AngularJS 视图

AngularJS支持通过单个页面上的多个视图单页应用。要做到这一点AngularJS提供了ng-view 、 ng-template 指令和 $routeProvider 服务。

ng-view

NG-view标记简单地创建一个占位符,其中一个相应的视图(HTML或ng-template视图),可以根据配置来放置。

使用

定义主模块使用一个 div 及ng-view。

<div ng-app="mainApp">
...
   <div ng-view></div>

</div>    

ng-template

ng-template指令用于创建使用脚本标记的HTML视图。它包含一个“id”属性用于由 $routeProvider 映射带有控制器的视图。

使用

定义脚本块类型为 ng-template 的主模块 。

<div ng-app="mainApp">
...
   <script type="text/ng-template" id="addStudent.htm">
      <h2> Add Student </h2>
         {{message}}
   </script>

</div>    

$routeProvider

$routeProvider是用来设置URL配置的关键服务,映射与对应的HTML页面或ng-template,并附加相同的控制器。

使用

定义脚本块类型为 ng-template 的主模块 。

<div ng-app="mainApp">
...
   <script type="text/ng-template" id="addStudent.htm">
      <h2> Add Student </h2>
         {{message}}
   </script>

</div>    

使用

定义脚本块及主模块,并设置路由配置。

 var mainApp = angular.module("mainApp", ['ngRoute']);

      mainApp.config(['$routeProvider',
         function($routeProvider) {
            $routeProvider.
               when('/addStudent', {
                  templateUrl: 'addStudent.htm',
                  controller: 'AddStudentController'
               }).
               when('/viewStudents', {
                  templateUrl: 'viewStudents.htm',
                  controller: 'ViewStudentsController'
               }).
               otherwise({
                  redirectTo: '/addStudent'
               });
         }]);

以下是在上面的例子中要考虑的重点。

  • $ routeProvider定义作为一个函数在mainApp模块的配置下,使用键 '$routeProvider'.

  • $routeProvider定义URL “/addStudent”,然后映射到“addStudent.htm”。addStudent.htm 存在于相同的路径的主html页面。如果HTM网页没有定义,那么NG-模板使用id="addStudent.htm"。我们使用ng-template。

  • "otherwise" 用于设置的默认视图。

  • "controller" 用于为视图设置相应的控制器。

示例

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>Angular JS 视图</title>
   <script src="http://www.bestsilkbedding.com/uploads/allimg/191120/23460G250-17.jpg"></script>
   <script src="http://www.bestsilkbedding.com/uploads/allimg/191120/23460H947-42.jpg"></script>
</head>
<body>
   <h2>AngularJS 视图应用示例</h2>
   <div ng-app="mainApp">
      <p><a href="#addStudent">添加学生</a></p>
      <p><a href="#viewStudents">查看学生</a></p>
      <div ng-view></div>
      <script type="text/ng-template" id="addStudent.html">
         <h2> 添加学生 </h2>
         {{message}}
      </script>
      <script type="text/ng-template" id="viewStudents.html">
         <h2> 查看学生 </h2>     
         {{message}}
      </script> 
   </div>

   <script>
      var mainApp = angular.module("mainApp", ['ngRoute']);

      mainApp.config(['$routeProvider',
         function($routeProvider) {
            $routeProvider.
               when('/addStudent', {
                  templateUrl: 'addStudent.html',
                  controller: 'AddStudentController'
               }).
               when('/viewStudents', {
                  templateUrl: 'viewStudents.html',
                  controller: 'ViewStudentsController'
               }).
               otherwise({
                  redirectTo: '/addStudent'
               });
         }]);

         mainApp.controller('AddStudentController', function($scope) {
            $scope.message = "这个页面是用于显示学生信息的输入表单";
         });

         mainApp.controller('ViewStudentsController', function($scope) {
            $scope.message = "这个页面是用于显示所有学生信息";
         });
   </script>
</body>
</html>

结果

在浏览器中打开 textAngularJS.html 看到结果如下:

图片 42

图片 43

AngularJS 作用域

作用域是视图连接控制器起特殊作用的JavaScript对象。作用域包含模型数据。在控制器,模型数据通过$ scope对象访问。

<script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });
</script>

以下是在上面的例子中要考虑的重点。

  • $scope被作为第一个参数在其构造器确定指示控制器。

  • $scope.message 和 $scope.type 在HTML页面中使用模型。

  • 我们已经设置了模型的值,这将反映在应用模块,其控制器shapeController中。

  • 也可以在 $scope 内定义函数。

继承作用域

作用域由控制器指定。如果我们定义嵌套控制器,那么子控制器将继承其父控制器的作用域范围。

<script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });

      mainApp.controller("circleController", function($scope) {
         $scope.message = "In circle controller";   
      });
</script>

以下是在上面的例子中要考虑的重点。

  • 我们在shapeController设定模型的值。

  • 我们重载子控制器 circleController 的消息。当模块的控制器 circleController 中的  “message” 一起使用,将重写消息。

示例

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>Angular JS 表单</title>
</head>
<body>
   <h2>AngularJS 表单应用示例</h2>
   <div ng-app="mainApp" ng-controller="shapeController">
      <p>{{message}} <br/> {{type}} </p>
      <div ng-controller="circleController">
         <p>{{message}} <br/> {{type}} </p>
      </div>
      <div ng-controller="squareController">
         <p>{{message}} <br/> {{type}} </p>
      </div>
   </div>
   <script src="http://www.yiibai.com/js/angular.min.js"></script>
   <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller("shapeController", function($scope) {
         $scope.message = "In shape controller";
         $scope.type = "Shape";
      });

      mainApp.controller("circleController", function($scope) {
         $scope.message = "In circle controller";   
      });

      mainApp.controller("squareController", function($scope) {
         $scope.message = "In square controller";
         $scope.type = "Square";
      });

   </script>
</body>
</html>

输出结果

在浏览器中打开 textAngularJS.html 看到结果如下:

图片 44

图片 45

AngularJS Services

AngularJS使用服务架构支持“分离 - 关注”的概念。服务(Services)是JavaScript函数,并负责只做一个特定的任务。这使得它们维护和测试单个的实体。控制器,过滤器可以基于请求调用它们。服务注入正常使用AngularJS的依赖注入机制。

AngularJS提供例如,$http, $route, $window, $location等许多内置服务,每个服务负责例如一个特定的任务,$http是用来做AJAX调用来从服务器获取数据。 $route用来定义路由信息等。内置的服务总是以$符号为前缀。

有两种方法来创建服务。

  • factory

  • service

使用工厂方法

使用工厂方法,我们首先定义一个工厂,然后分配方法给它。

      var mainApp = angular.module("mainApp", []);
      mainApp.factory('MathService', function() {     
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b 
         }
         return factory;
      }); 

使用服务方法

使用服务的方法,我们定义了一个服务,然后分配方法给它。 也可以注入已可用的服务给它。

mainApp.service('CalcService', function(MathService){
    this.square = function(a) { 
  return MathService.multiply(a,a); 
 }
});

示例

下面的例子将展示上述所有指令。

testAngularJS.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>Angular JS 服务示例</title>
   <script src="http://www.yiibai.com/js/angular.min.js"></script>
</head>
<body>
   <h2>AngularJS 服务应用示例</h2>
   <div ng-app="mainApp" ng-controller="CalcController">
      <p>输入一个数字: <input type="number" ng-model="number" />
      <button ng-click="square()">X<sup>2</sup></button>
      <p>结果: {{result}}</p>
   </div>
   <script>
      var mainApp = angular.module("mainApp", []);
      mainApp.factory('MathService', function() {     
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b 
         }
         return factory;
      }); 

      mainApp.service('CalcService', function(MathService){
            this.square = function(a) { 
            return MathService.multiply(a,a); 
         }
      });

      mainApp.controller('CalcController', function($scope, CalcService) {
            $scope.square = function() {
            $scope.result = CalcService.square($scope.number);
         }
      });
   </script>
</body>
</html>

结果

在浏览器中打开 textAngularJS.html 看到结果如下:

图片 46

图片 47

AngularJS依赖注入

依赖注入是部件赋予的,不是硬组件内的编码的依赖设计模式。这从定位减轻组件的依赖,使依赖可配置。这有助于使组件可重复使用,维护和测试。

AngularJS提供了一个至高无上的依赖注入机制。它提供了一种可被注入彼此作为依赖以下核心组件。

  • 值 - value

  • 工厂 - factory

  • 服务 - service

  • 提供者 - provider

  • 常量 - constant

值是简单的JavaScript对象,并用它在配置阶段传递值到控制器。

//define a module
var mainApp = angular.module("mainApp", []);
//create a value object as "defaultInput" and pass it a data.
mainApp.value("defaultInput", 5);
...
//inject the value in the controller using its name "defaultInput"
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);

      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

工厂

工厂是一个函数用于返回结果值。它根据需要创建一个值,当一个服务或控制器需要时。它通常使用一个工厂函数来计算和返回结果值

//define a module
var mainApp = angular.module("mainApp", []);
//create a factory "MathService" which provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {     
   var factory = {};  
   factory.multiply = function(a, b) {
      return a * b 
   }
   return factory;
}); 

//inject the factory "MathService" in a service to utilize the multiply method of factory.
mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
   }
});
...

服务

服务是一个单独的JavaScript包含了一组函数对象来执行某些任务。服务正在使用 service()  函数,然后注射到控制器中。

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service which defines a method square to return square of a number.
mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
   }
});
//inject the service "CalcService" into the controller
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
      $scope.number = defaultInput;
      $scope.result = CalcService.square($scope.number);

      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

提供者

提供者使用AngularJS内部创建的服务,工厂等。在配置阶段(第一阶段AngularJS引导自身期间)。下面提及的脚本可以被用来创建,我们已经在前面创建了MathService。提供者是一个特殊的工厂方法使用get()方法来返回值/服务/工厂。

//define a module
var mainApp = angular.module("mainApp", []);
...
//create a service using provider which defines a method square to return square of a number.
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

常量

常量用于通过配置的相应值,考虑到值不能在配置阶段传递使用。

mainApp.constant("configParam", "constant value");

示例

下面的例子将展示上述所有指令的使用。

testAngularJS.html

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>AngularJS 依赖注入</title>
</head>
<body>
   <h2>AngularJS 依赖注入应用示例</h2>
   <div ng-app="mainApp" ng-controller="CalcController">
      <p>输入一个整数: <input type="number" ng-model="number" />
      <button ng-click="square()">X<sup>2</sup></button>
      <p>结果值: {{result}}</p>
   </div>
   <script src="http://www.yiibai.com/js/angular.min.js"></script>
   <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.config(function($provide) {
         $provide.provider('MathService', function() {
            this.$get = function() {
               var factory = {};  
               factory.multiply = function(a, b) {
                  return a * b; 
               }
               return factory;
            };
         });
      });

      mainApp.value("defaultInput", 5);

      mainApp.factory('MathService', function() {     
         var factory = {};  
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      }); 

      mainApp.service('CalcService', function(MathService){
            this.square = function(a) { 
            return MathService.multiply(a,a); 
         }
      });

      mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
            $scope.number = defaultInput;
            $scope.result = CalcService.square($scope.number);

            $scope.square = function() {
            $scope.result = CalcService.square($scope.number);
         }
      });
   </script>
</body>
</html>

结果

在浏览器中打开 textAngularJS.html 看到结果如下:

图片 48

图片 49

AngularJS自定义指令

自定义指令用于在AngularJS中来扩展HTML的功能。自定义指令使用“指令”函数定义。自定义指令只是替换了被激活的元素。AngularJS应用程序引导过程中找到匹配的元素,并使用自定义指令compile() 方法,一次使用基于指令的范围自定义指令link() 方法处理元素。AngularJS 为下面的元素类型创建自定义的指令提供支持。

  • 元素指令 - 当遇到指令激活匹配的元素。

  • 属性 - - 当遇到指令激活属性时匹配。

  • CSS - - 当遇到指令激活匹配CSS样式。

  • 注释 - - 当遇到指令激活匹配的注释。

理解自定义指令

定义自定义HTML标签。

<student name="Mahesh"></student><br/>
<student name="Piyush"></student>

定义自定义指令来处理上面的自定义HTML标签。

var mainApp = angular.module("mainApp", []);

//Create a directive, first parameter is the html element to be attached.   
//We are attaching student html tag. 
//This directive will be activated as soon as any student element is encountered in html
mainApp.directive('student', function() {
   //define the directive object
   var directive = {};
   //restrict = E, signifies that directive is Element directive
   directive.restrict = 'E';
   //template replaces the complete element with its text. 
   directive.template = "Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>";
   //scope is used to distinguish each student element based on criteria.
   directive.scope = {
       student : "=name"
   }
   //compile is called during application initialization. AngularJS calls it once when html page is loaded.
   directive.compile = function(element, attributes) {
      element.css("border", "1px solid #cccccc");
   //linkFunction is linked with each element with scope to get the element specific data.
      var linkFunction = function($scope, element, attributes) {
          element.html("Student: <b>" $scope.student.name  "</b> , Roll No: <b>" $scope.student.rollno "</b><br/>");
          element.css("background-color", "#ff00ff");
      }
      return linkFunction;
   }
   return directive;
});

定义控制器以更新指令的作用域。这里我们使用名称属性的值作为子的作用域。

mainApp.controller('StudentController', function($scope) {
      $scope.Mahesh = {};
      $scope.Mahesh.name = "Mahesh Parashar";
      $scope.Mahesh.rollno  = 1;

      $scope.Piyush = {};
      $scope.Piyush.name = "Piyush Parashar";
      $scope.Piyush.rollno  = 2;
});

示例

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>Angular JS 自定义指令</title>
</head>
<body>
   <h2>AngularJS 自定义指令示例</h2>
   <div ng-app="mainApp" ng-controller="StudentController">
  <student name="Mahesh"></student><br/>
  <student name="Piyush"></student>
   </div>
   <script src="http://www.yiibai.com/js/angular.min.js"></script>
   <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.directive('student', function() {
         var directive = {};
         directive.restrict = 'E';
         directive.template = "Student: <b>{{student.name}}</b> , 编号: <b>{{student.rollno}}</b>";

         directive.scope = {
            student : "=name"
         }

         directive.compile = function(element, attributes) {
            element.css("border", "1px solid #cccccc");

            var linkFunction = function($scope, element, attributes) {
               element.html("Student: <b>" $scope.student.name  "</b> , 编号: <b>" $scope.student.rollno "</b><br/>");
               element.css("background-color", "#eee");
            }

            return linkFunction;
         }

         return directive;
      });

      mainApp.controller('StudentController', function($scope) {
            $scope.Mahesh = {};
            $scope.Mahesh.name = "张学友";
            $scope.Mahesh.rollno  = 100;

            $scope.Piyush = {};
            $scope.Piyush.name = "陈奕迅";
            $scope.Piyush.rollno  = 102;
      });

   </script>
</body>
</html>

结果

在Web浏览器中打开textAngularJS.htm。看到结果如下:

图片 50

图片 51

AngularJS国际化

AngularJS支持内置国际化三种类型的过滤器:货币,日期和数字。我们只需要根据国家的区域合并相应的JS。默认情况下它处理浏览器的语言环境。例如,使用丹麦语区域设置,使用下面的脚本:

<script src="https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js"></script> 

使用中文区域设置示例

testAngularJS.html

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>Angular JS 国际化</title>
</head>
<body>
   <h2>AngularJS 国际化应用示例</h2>
   <div ng-app="mainApp" ng-controller="StudentController">
      {{fees | currency }}  <br/><br/>
      {{admissiondate | date }}   <br/><br/>
      {{rollno | number }}  
   </div>
   <script src="http://www.bestsilkbedding.com/uploads/allimg/191120/23460G250-17.jpg"></script>
   <script src="http://cdnjscn.b0.upaiyun.com/libs/angular-i18n/1.2.0/angular-locale_zh-cn.js"></script> 
   <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller('StudentController', function($scope) {
            $scope.fees = 100;
   $scope.admissiondate  = new Date();
            $scope.rollno = 123.45;
      });

   </script>
</body>
</html>

结果

在Web浏览器中打开textAngularJS.htm。看到结果如下:

图片 52  

图片 53

使用浏览器的语言环境示例

testAngularJS.html

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
   <title>Angular JS 浏览器语言设置示例</title>
</head>
<body>
   <h2>AngularJS 区域语言设置(浏览器设置)</h2>
   <div ng-app="mainApp" ng-controller="StudentController">
      {{fees | currency }}  <br/><br/>
      {{admissiondate | date }}   <br/><br/>
      {{rollno | number }}  
   </div>
   <script src="http://www.bestsilkbedding.com/uploads/allimg/191120/23460G250-17.jpg"></script>
   <!-- <script src="http://cdnjscn.b0.upaiyun.com/libs/angular-i18n/1.2.0/angular-locale_zh-hk.js"></script> -->
   <script>
      var mainApp = angular.module("mainApp", []);

      mainApp.controller('StudentController', function($scope) {
            $scope.fees = 100;
   $scope.admissiondate  = new Date();
            $scope.rollno = 123.45;
      });

   </script>
</body>
</html>

结果

在Web浏览器中打开textAngularJS.html。看到结果如下:

图片 54

  阅读原文请点击此处

AngularJS是什么? AngularJS是一个开源Web应用程序框架。它最初是由MISKO Hevery和Adam Abrons于2009年开发。现在是由谷歌维...

本文由pc28.am发布于前端技术,转载请注明出处:AngularJS快速入门,的常用特性

上一篇:十款最好的JavaScript开发框架,框架存在的根本原 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • AngularJS快速入门,的常用特性
    AngularJS快速入门,的常用特性
    高效快速地加载 AngularJS 视图 2016/06/29 · JavaScript· 1 评论 ·AngularJS 本文作者: 伯乐在线 -ThoughtWorks。未经作者许可,禁止转载! 欢迎加入伯乐在线 专栏作
  • REACT火速入门,js深入学习详细深入分析
    REACT火速入门,js深入学习详细深入分析
    React.js浓郁学习详细解析 2016/07/16 · JavaScript· ReactJS 本文小编: 伯乐在线 -winty。未经我许可,防止转发! 招待参与伯乐在线 专辑我。 今日,继续浓烈学习
  • 遇见未知的,web开采连忙入门
    遇见未知的,web开采连忙入门
    CSS 框架 Bulma 教程 2017/10/26 · CSS ·Bulma 原文出处:阮一峰    网页样式需要大量时间开发,最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS框架,
  • 追踪客户,读书笔记
    追踪客户,读书笔记
    使用 CSS 追踪用户 2018/01/20 · CSS · 1评论 ·追踪 原文出处:jbtronics   译文出处:枫上雾棋    除了使用 JS 追踪用户,现在有人提出了还可以使用 CSS 进行
  • pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
    pusle雷达动漫完结,推荐8款CSS3兑现的动态特效
    CSS技巧:逐帧动漫抖动实施方案 2017/08/16 · CSS ·动画 原来的书文出处:坑坑洼洼实验室    我所在的前端共青团和少先队首要从事活动端的H5页面开荒,而