65.9K
CodeProject 正在变化。 阅读更多。
Home

学习 AngularJS - 第 1/15 集

Abhishek Maitrey
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.68/5 (18投票s)

2015年4月16日

CPOL

3分钟阅读

viewsIcon

30298

学习 AngularJS：第 1/15 集

引言

我们将在本文中介绍以下主题

  • 关于Angular
  • 环境设置
  • 关于代码编辑器
  • 构建块
  • DOM简述
  • 先决条件
  • 指令

什么是AngularJs？

  • 流行的新一代JavaScript库和框架
  • 由Miško Hevery和Adam Abrons于2009年开发
  • 由Google提供支持
  • 基于MV* / MVW（模型视图无论什么）框架
  • 促进高效率的Web开发体验
  • 增强传统HTML
  • 帮助构建SPA（单页应用程序）
  • 此外，一个在GitHub上可用的开源项目

设置框架

  • 从官方网站下载库（离线版本）http://angularjs.org
    • 直接下载
    • 使用包管理器
      • npm
      • bower
      • NuGet（如果使用Visual Studio）
  • 使用内容分发网络 (CDN) 引用（在线版本）

请参考下图

在哪里编写代码（代码编辑器）？

  • 任何你选择的文本编辑器，例如
    • 记事本，Notepad++ [免费]
    • Sublime，JetBrain WebStorm [付费]
    • Visual Studio（我的最爱）
  • 一些流行的在线客户端脚本工具（支持AngularJs），例如
    • Plunker [http://plnkr.co/edit]
    • JSBin [http://jsbin.com/]
    • JSFiddle [ https://jsfiddle.net/]

就是这样。你完成了。“angular.min.js”文件本身就足以开始使用AngularJs脚本了。

AngularJs 的构建块

本质上，有一些构建块是我们必须知道的。我们将在后续部分讨论构建块的每个元素。

  • 指令
  • 过滤器。
  • 模板
  • 模块
  • 控制器
  • 范围
  • 服务
  • 工厂
  • 路由
  • 依赖注入
  • 验证

在整个AngularJs中，你都会听到关于DOM的内容。我认为现在是简要了解DOM的好时机。

文档对象模型 (DOM)

  • 是W3C编写的规范
  • HTML、XML和XHTML文档的规范
  • 在整个渲染过程中被互联网浏览器使用
  • 更多详细信息可以在W3C的官方网站上找到……

先决条件

大概你已经了解了JavaScript基础知识、HTML、CSS（可选）、AJAX（在某些情况下）和JSON

我相信我们现在应该对Angular有了基本的了解，因此应该开始实现……我们开始吧……

指令

  • DOM元素的扩展（使用预定义指令或自定义指令）
  • 当编译器编译DOM时，将新的行为附加到DOM
  • 将DOM元素转换为对象树
  • 以“ng-”前缀开头

一些最常用和流行的预定义指令是

ng-app AngularJs应用程序的根元素。自动引导应用程序。
ng-init 初始化应用程序数据并计算表达式
ng-model 将视图绑定到模型
ng-controller 将控制器类附加到视图
等等。 将在未来的文章中讨论

你可以根据需要创建自定义指令供Angular使用。

你可以通过四种不同的方式使用指令，例如在标签内作为属性、作为CSS类名、作为注释和作为元素，但始终建议通过标签名和属性而不是注释和类名来使用指令。这样做通常可以更容易地确定给定元素匹配哪些指令。

让我们进入代码……

请注意，我使用Visual Studio 2013作为编辑器，AngularJs v1.3.15作为Angular框架。

  1. 首先是在结束</body>标签之前添加AngularJs引用。

  2. 强制操作：在任何容器标签（如<body>、<div>等）中添加ng-app 指令，但我将其添加到<html>标签中，因为这将对整个页面可用。这可以只写成ng-app 而不是ng-app=""。此外，可以在ng-app="...." 中指定任何名称，但当我们开始在后续剧集中阅读模块时，我们将讨论这一点。

  3. 要在<body>标签下编写的代码的主要部分。

    示例A。

    双开双闭花括号 "{{ }}" 可以确保为你执行angularjs脚本。

    输出

    示例：使用表达式

    数字之和 (5+8+2) 是：15。
    数字之和 (5+8+ -2) 是：11。

    示例B

    输出

    示例：使用ng-init和ng-bind指令

    11大于9

    一周有7天。

    示例C。

    输出

完整代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="">
<head>
    <title>Understanding Directives with Maitrey</title>

</head>
<body>
    <!--Directives in this example:
        ng-init, ng-bind, ng-app, ng-model etc.
    -->
<h2>Hello Readers!</h2>
<h5>Understanding Directives with Abhishek Maitrey</h5>

    <h4>Example: using expression</h4>
    <div>
        <span>The sum of numbers (5+8+2) is : {{5 + 8 + 2}}.</span><br/>
        <!--abnormal expression but valid-->
        <span>The sum of numbers (5+8+ -2) is : {{5 + 8+ -2}}.</span>
    </div>

    <h4>Example: using ng-init and ng-bind directives</h4>

    <!--variable 'total' is assigned a value '10' using ng-init directive-->
    <div ng-init="total = 10">
        <p>
            <!--used expression and ng-bind in same statement-->
            {{total + 1}} is more than <span ng-bind="total - 1"></span>
        </p>
    </div>

    <!--multiple variables (semi-colon; separated) can also be assigned -->
    <div ng-init="numberOfDays = 7; units = 'days'; collection = 'week'">
    <p>
        There are {{numberOfDays}} {{units}} in a <span ng-bind="collection"></span>.
    </p>
    </div>

    <h4>Example: using ng-model directives</h4>
    <!--Accepting input value in text box control and print with a message-->
    <div>
        Enter your name : <input type="text" ng-model="yourName"/>
        <p>Hi {{yourName}}! Thanks for reading this article.</p>
    </div>

<script src="../Scripts/angular.min.js"></script>

</body>
</html>

 

第2集：点击此处

© . All rights reserved.