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

循序渐进地学习 AngularJS

Gaurav Aroraa
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.20/5 (6投票s)

2014年10月26日

CPOL

3分钟阅读

viewsIcon

42898

学习 AngularJS 的步骤

几个月前，我需要使用 Angularjs 构建某种仪表板报告系统。 这对我来说是全新的。 我对此了解不多。

我开始学习 angularJS，下面，我将分享我的学习经验，使用我在学习 AngularJS 时创建的第一个示例。 我敢打赌，你会发现这是你能想到的最简单的。 此外，我计划尽可能多地撰写关于 AngularJS 的文章，以便我可以与大家分享我的学习成果。:)

什么是 AngularJS

以下是我从 wiki 中读到的所有内容：AngularJS

AngularJS 是一个 JavaScript 框架，由 Google 维护，并且基于像 BackboneJS 和 EmberJS 这样的 MVC 框架，（有趣的是“这是一个开源项目”）你可以查看、修改 angularJS 源代码并要求其所有者审查你的更改。

AngularJS 的目的

正如我所了解的，AngularJS 的主要目的是以 MVC（模型-视图-控制器）的方式来增强 Web 应用程序的功能，从而使开发和测试更容易。

AngularJS 如何工作

如上所述，它是一个用 JavaScript 编写的框架。在网页中，它读取 HTML，其中包含特殊/附加的标签属性（这些属性在此处定义：angularJS 文档）。

读取这些 tag 属性后，它会根据这些自定义属性“作为 & 为了什么而工作”，使用 JavaScript 变量将页面的输入/输出绑定到模型。 关于这些变量的好处是，可以使用静态或动态 JSON 资源手动设置或检索值。

angularJS 的定义

总而言之

引用

一个用 javascript 编写的 javascript MVC 框架，是一个跨平台的框架，使用标准 HTML 的自定义属性标签来增强 Web 应用程序，可以使用静态/动态 javascript 变量来获取或设置输入/输出

关于 angularJS 的重要事项

Angular JS 的重要事项
官方名称 AngularJS
编写或维护者 Google 公司
发布日期 2009
当前版本 1.2.13（截至 2014 年 2 月 14 日）
使用以下内容开发 Javascript
类型 客户端/跨平台
链接 angularJS
文档

开始构建简单的 AngularJS 示例

下面，我将定义一个使用 angularJS 构建非常简单的启动应用程序的分步过程。 请注意，在此示例中，我使用了 Visual Studio 2013

  1. 启动 Visual Studio
  2. 选择一个项目（如果你的解决方案是活动的，请添加一个，或者选择新项目）
  3. 选择 Web 项目

    add web project

    添加 Web 项目
  4. 选择空模板

    select web template

    选择 Web 模板
  5. 现在，从解决方案资源管理器中，右键单击你的项目，然后单击“管理 Nuget 包”
  6. 从 Nuget 管理器中 – 在线搜索“Angularjs”

    install angularjs

    安装 angularjs
  7. 单击安装，然后在安装完成后单击关闭
  8. 从解决方案资源管理器中展开脚本文件夹以查看 angular 脚本

    installed angular scripts

    已安装的 angular 脚本
  9. 右键单击你的项目并添加一个新的 HTML 文件，命名为“index.html”
  10. 修改 Visual Studio 生成的 HTML 页面的内容
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First AngularJS Page</title>
</head>
<body ng-app>
    <div>
        <h1>Here is a simple html table as on {{"February 22, 2014"}}</h1>
        <table>
            <caption><b>Importants of Angular JS</b></caption>
            <tbody>
                <tr>
                    <td height="26">Official Name:</td>
                    <td>AngularJS</td>
                </tr>
                <tr>
                    <td height="26">Written or maintained by:</td>
                    <td><a href="href=http://www.google.co.in/about/company/" 
                    title="Google Inc." target="_blank">Google Inc.</a></td>
                </tr>
                <tr>
                    <td height="26">Released on:</td>
                    <td>2009</td>
                </tr>
                <tr>
                    <td height="26">Current Release ver.:</td>
                    <td>1.2.13 (as on dt. {{"Feb 14, 2014"}})</td>
                </tr>
                <tr>
                    <td height="26">Develop using:</td>
                    <td>Javascript</td>
                </tr>
                <tr>
                    <td height="26">Type:</td>
                    <td>Client side/cross-platform</td>
                </tr>
                <tr>
                    <td height="26">Links</td>
                    <td width="676">
                        <a href="http://angularjs.org">angularJS</a>
                        <a href="http://doc.angularjs.org">documentation</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <caption><b>Can do using angularJS</b></caption>
            <tbody>
                <tr>
                    <td height="26">Sum</td>
                    <td>1 + 9 = {{1+9}}</td>
                </tr>
                <tr>
                    <td height="26">Minus</td>
                    <td>1 - 9 = {{1-9}}</td>
                </tr>
                <tr>
                    <td height="26">Multiply</td>
                    <td>1 X 9 = {{1*9}}</td>
                </tr>
                <tr>
                    <td height="26">Divide</td>
                    <td>1 / 9 = {{1/9}}</td>
                </tr>
            </tbody>
            <p>and these are only few examples see source code of above and 
            you can see the magic of &#123; &#123; &#125; &#125; curly braces</p>
        </table>
    </div>
    <script src="Scripts/angular.min.js"></script>
</body>
</html>

    在上面的代码中，它本身定义了我们如何使用花括号绑定我们的数据，还有更多的事情要做。

  11. 运行你的应用程序，看看 angularJS 如何呈现你的内容

    output of html

    HTML 输出

下一步做什么？

有关更多信息，请参见 http://angularjs.org 和 http://doc.angularjs.org
从 https://github.com/garora/somestuff 获取 angularJS 示例代码

© . All rights reserved.