AngularJS快速开始

最新推荐文章于 2024-07-11 15:59:35 发布
最新推荐文章于 2024-07-11 15:59:35 发布
阅读量408 收藏
点赞数

AngularJS快速开始

  03-29 14:08  04-10 22:12  219227  44392  86  AngularJS AngularJS 入门教程

Hello World!

开始学习AngularJS的一个好方法是创建经典应用程序“Hello World!”：

  1. 使用您喜爱的文本编辑器，创建一个HTML文件，例如：helloworld.html。
  2. 将下面的源代码复制到您的HTML文件。
  3. 在web浏览器中打开这个HTML文件。

源代码

<code style="font-family: monospace, serif; font-size: 1em;"><span class="dec" style="margin: 0px; padding: 0px; color: rgb(51, 135, 204);"><!doctype html></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><html</span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);"> </span><span class="atn" style="margin: 0px; padding: 0px; color: rgb(189, 183, 107);">ng-app</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);">></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
    </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><head></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
        </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><script</span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);"> </span><span class="atn" style="margin: 0px; padding: 0px; color: rgb(189, 183, 107);">src</span><span class="pun" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">=</span><span class="atv" style="margin: 0px; padding: 0px; color: rgb(101, 176, 66);">"http://code.angularjs.org/angular-1.0.1.min.js"</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);">></script></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
    </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"></head></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
    </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><body></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
        Hello {{'World'}}!
    </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"></body></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"></html></span></code>

请在您的浏览器中运行以上代码查看效果。

现在让我们仔细看看代码，看看到底怎么回事。 当加载该页时，标记ng-app告诉AngularJS处理整个HTML页并引导应用：

<code style="font-family: monospace, serif; font-size: 1em;"><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><html</span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);"> </span><span class="atn" style="margin: 0px; padding: 0px; color: rgb(189, 183, 107);">ng-app</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);">></span></code>

这行载入AngularJS脚本：

<code style="font-family: monospace, serif; font-size: 1em;"><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><script</span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);"> </span><span class="atn" style="margin: 0px; padding: 0px; color: rgb(189, 183, 107);">src</span><span class="pun" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">=</span><span class="atv" style="margin: 0px; padding: 0px; color: rgb(101, 176, 66);">"http://code.angularjs.org/angular-1.0.1.min.js"</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);">></script></span></code>

（想了解AngularJS处理整个HTML页的细节，请看Bootstrap。）

最后，标签中的正文是应用的模板，在UI中显示我们的问候语：

<code style="font-family: monospace, serif; font-size: 1em;"><span class="typ" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);">Hello</span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);"> </span><span class="pun" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">{{</span><span class="str" style="margin: 0px; padding: 0px; color: rgb(101, 176, 66);">'World'</span><span class="pun" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">}}!</span></code>

注意，使用双大括号标记{{}}的内容是问候语中绑定的表达式，这个表达式是一个简单的字符串‘World’。

下面，让我们看一个更有趣的例子：使用AngularJS对我们的问候语文本绑定一个动态表达式。

Hello AngularJS World!

本示例演示AngularJS的双向数据绑定（bi-directional data binding）：

  1. 编辑前面创建的helloworld.html文档。
  2. 将下面的源代码复制到您的HTML文件。
  3. 刷新浏览器窗口。

源代码

<code style="font-family: monospace, serif; font-size: 1em;"><span class="dec" style="margin: 0px; padding: 0px; color: rgb(51, 135, 204);"><!doctype html></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><html</span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);"> </span><span class="atn" style="margin: 0px; padding: 0px; color: rgb(189, 183, 107);">ng-app</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);">></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
    </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><head></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
        </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><script</span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);"> </span><span class="atn" style="margin: 0px; padding: 0px; color: rgb(189, 183, 107);">src</span><span class="pun" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">=</span><span class="atv" style="margin: 0px; padding: 0px; color: rgb(101, 176, 66);">"http://code.angularjs.org/angular-1.0.1.min.js"</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);">></script></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
    </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"></head></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
    </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><body></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
        Your name: </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><input</span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);"> </span><span class="atn" style="margin: 0px; padding: 0px; color: rgb(189, 183, 107);">type</span><span class="pun" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">=</span><span class="atv" style="margin: 0px; padding: 0px; color: rgb(101, 176, 66);">"text"</span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);"> </span><span class="atn" style="margin: 0px; padding: 0px; color: rgb(189, 183, 107);">ng-model</span><span class="pun" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">=</span><span class="atv" style="margin: 0px; padding: 0px; color: rgb(101, 176, 66);">"yourname"</span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);"> </span><span class="atn" style="margin: 0px; padding: 0px; color: rgb(189, 183, 107);">placeholder</span><span class="pun" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">=</span><span class="atv" style="margin: 0px; padding: 0px; color: rgb(101, 176, 66);">"World"</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);">></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
        </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"><hr></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
        Hello {{yourname || 'World'}}!
    </span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"></body></span><span class="pln" style="margin: 0px; padding: 0px; color: rgb(255, 255, 255);">
</span><span class="tag" style="margin: 0px; padding: 0px; color: rgb(137, 189, 255);"></html></span></code>

请在您的浏览器中运行以上代码查看效果。

该示例有一下几点重要的注意事项：

  • 文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
  • 双大括号标记将yourname模型变量添加到问候语文本。
  • 你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

现在试着在输入框中键入您的名称，您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。

AngularJS应用的解析

本节描述AngularJS应用程序的三个组成部分，并解释它们如何映射到模型-视图-控制器设计模式：

模板（Templates）

模板是您用HTML和CSS编写的文件，展现应用的视图。 您可给HTML添加新的元素、属性标记，作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的，这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记！

应用程序逻辑（Logic）和行为（Behavior）

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同，您不需要另外编写侦听器或DOM控制器，因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

模型数据（Data）

模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型，这都不重要，重要的是，他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。

此外，AngularJS还提供了一些非常有用的服务特性：

  1. 底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。
  2. 您还可以扩展和添加自己特定的应用服务。
  3. 这些服务可以让您非常方便的编写WEB应用。
lord_is_layuping
关注
扩展jquery easyui tree的搜索树节点方法
stalwartwill的专栏
06-03 3万+
因为jquery eas扩展了jquery easyui tree搜索树节点的方法，
JSP中(servlet)如何使用定时作业Quartz框架
iteye_6274的博客
01-30 478
以下介绍的是在JSP或者servlet中使用定时作业Quartz框架,这篇文章是我大学第二次实习时写的，当时带我的师傅维护一个旧业务系统时需要定时作业处理，因为我之前大三实习的时候接触过，知道有这么个东西，所以师傅交给我处理，特意给我说让我整理出一个文档来交给他作为以后他的参考，因为之前是在spring中集成的，那比较简单实现，现在让我在JSP中实现，不是想象的那么顺利，利用一晚上搞定了，以下为...
intellij idea cpu占用率太大太满 运行速度太慢 使了五个解决方法最终成功
热门推荐
学海无涯苦造舟
10-30 17万+
突然发现，intellij idea 特别卡，在代码间移动的时候，居然刷新都跟不上，然后打开任务管理器一看，CPU占用率100%。。。intellij idea自己一个程序的占用率就高达80~90，这还只是单纯的打开，没有做其他任何操作。然后，就是解决呗。 方法一：升级idea。 去官网下载，升级到2017.2.5。（没用） 方法二：超频 本人的CPU不行，AMD A6 9500 R5 ，...
轻松让你了解Angular，并优雅的使用！
weixin_33965305的博客
11-10 128
端对端的解决方案，AngularJS 试图成为WEB 应用中的一种端对端的解决方案。AngylarJS 的出众 之处如下：数据绑定，基本模板标识符，表单验证，路由，深度连接，组件重用，依赖注入。测试包括 单元测试，段对端测试，模拟和自动化测试框架。 AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言，通过扩展HTML的语法，让你能更清楚、简洁地构建你的应用...
AngularJS快速开始(一)--基本介绍
YingSide的专栏
04-30 1186
AngularJS快速开始 基本介绍
AngularJS快速入门
LG_971124的博客
07-11 989
记录angularJS1.0学习笔记
AngularJS快速入门教程
08-18
### AngularJS快速入门教程知识点概览 #### 一、AngularJS简介 - **定义与起源**：AngularJS是一个开源Web应用程序框架，旨在简化Web应用的开发过程。它由Misko Hevery和Adam Abrons于2009年共同创建，并自2010年...
AngularJs2.0-QuickStart快速开始的项目代码
01-09
AngularJs2.0 的快速开始代码
理解AngularJs篇：30分钟快速掌握AngularJs
11-26
AngularJS 是一款由 Google 推出的前端 Web 应用开发框架，专为构建单一页面应用程序（SPA）设计。它的核心特性包括数据绑定、DOM 操作...通过掌握上述核心概念，开发者可以迅速上手并开始构建自己的 AngularJS 项目。
java轮子-使用springboot做一个带界面的web程序
学海无涯苦造舟
09-17 4615
上次是按照官方文档简单的建立了一个spring boot 的项目，然而web工程不可避免的需要界面这种东西。所以这次，我们就来使用spring boot做一款带界面的web程序。查了一些资料，首先spring boot官方是已经不推荐使用jsp来做页面了，它们推荐以下几种引擎来进行页面的开发，它们是Thymeleaf，FreeMarker，Velocity，Groovy，Mustache。本萌新只见
基于java的校园美食交流系统设计与实现.docx
09-19
基于java的校园美食交流系统设计与实现.docx
#_ssm_126_mysql_实习支教中小学学校信息管理系统_.zip
09-19
均包含代码，文章，部分项目包含ppt
基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip
最新发布
09-19
基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip 个人大四的毕业设计、课程设计、作业、经导师指导并认可通过的高分设计项目，评审平均分达96.5分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 [资源说明] 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设或者课设、作业，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96.5分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），供学习参考。
ASP.NET公交车管理系统的实现与设计(源代码+论文).zip
09-19
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、下载 4使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、 4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
ASP基于WEB楼宇专业网站毕业设计(源代码+论文).zip
09-19
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.m或d论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 、1资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
django基于协同过滤算法的小说推荐系统 -论文.zip
09-19
基于Django框架开发的协同过滤算法小说推荐系统是一种利用用户行为数据来提供个性化小说推荐的应用。该系统通过分析用户的历史阅读记录、评分和反馈，发现用户之间的相似性或小说之间的相似性，进而为用户推荐可能感兴趣的小说。以下是该系统可能包含的关键特性： 1. **用户账户管理**：允许用户创建账户、登录和编辑个人信息，同时跟踪用户的阅读历史和评分。 2. **小说数据库**：构建一个包含大量小说信息的数据库，每本小说都有详细的元数据，如作者、出版年份、流派、标签等。 3. **协同过滤引擎**：实现协同过滤算法，包括用户-用户协同过滤和项目-项目协同过滤，以发现相似用户或相似小说。 4. **推荐生成**：根据协同过滤引擎的结果，生成个性化的小说推荐列表，并提供给用户。 5. **评分系统**：允许用户对小说进行评分，这些评分数据将用于训练推荐算法，提高推荐的准确性。 6. **用户界面**：设计直观、易用的用户界面，使用户能够轻松浏览推荐的小说、查看详情和进行评分。 7. **搜索和筛选功能**：提供强大的搜索功能，允许用户根据标题、作者或流派等关键词搜索小说，并提供筛选
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值