当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

博弈AngularJS讲义(8) - 模板

发表于: 2014-12-05   作者:boyitech   来源:转载   浏览次数:
摘要:   在Angular中,模板是包含通过Angular定义的元素和属性的HTML代码。Angular将控制器及模型中的信息与模板绑定起来动态的展现视图。   通常angular定制的元素及属性包括以下几种:       1. 指令(Directive) - 用Angular定制的属性或元素,作为对HTML的扩充,是可重用的DOM组件。 &nbs

  在Angular中,模板是包含通过Angular定义的元素和属性的HTML代码。Angular将控制器及模型中的信息与模板绑定起来动态的展现视图。

  通常angular定制的元素及属性包括以下几种:

      1. 指令(Directive) - 用Angular定制的属性或元素,作为对HTML的扩充,是可重用的DOM组件。

      2. 标记(Markup) - 用双大括号{{}}定义的表达式。

      3. 过滤器(Filters) - 用来格式化展现数据。

      4. 表单控件(Form Controls)  - 校验用户输入。

 

  看如下示例代码:

  

<html ng-app>
 <!-- Body tag augmented with ngController directive  -->
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   <!-- Button tag with ng-click directive, and
          string expression 'buttonText'
          wrapped in "{{ }}" markup -->
   <button ng-click="changeFoo()">{{buttonText}}</button>
   <script src="angular.js">
 </body>
</html>

 

  1. 这个例子中用到了指令(ng-app, ng-controller, ng-model, ng-click)和表达式{{buttonText}}.

 2.一个简单的单页面angular应用的模板通常包括HTML,CSS,和指令。

 3.在复杂的应用中可以在单页面引入多个HTML片段。可以通过ng-view指令在$route服务中载入配置好的模板片段。

 我们会在后面章节中详解各种模板以及angular路由。

   

博弈AngularJS讲义(8) - 模板

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
自定义指令 本章我们将详细讲解如何用AngularJS实现自定义指令(directives)来扩充HTML. 指令的基本
本节我们将通过几个具体的例子来讲解Angular表单。 简单的表单 ngModel指令实现了双向的数据绑定,
动画 AngularJS 1.3版本为常用的指令(ngRepeat,ngSwitch,ngView...)提供了动画支持,另外还可以通
Bootstrap 本节我们将分析Angular应用初始化流程以及怎样手动启动Angular应用。 Angular<script&
什么是AngularJS ? AngularJS是一款非常优秀的前端MVVM(Model-View-ViewModel)框架,它强大的双向
Angular HTML编译器可以让开发者通过定制标签或者属性来拓展HTML语法。通过Angular HTML编译器,我
基本概念 在使用AngularJS之前,我们有必要梳理一下AngularJS核心概念及实现原理,以便于写出结构良
在AngularJS中数据绑定(Data-binding)意指模型和视图组件之间的数据自动同步。AngularJS应用是基于
在写Angular应用时,我们通常把与视图逻辑无关的公共代码片段写在service组件中,然后以依赖注入的
什么是作用域? Angular中作用域(scope)是模板以及工作的上下文环境,作用域中存放了应用模型和视图
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号