Angular 入门学习

夏冬青 2024-11-06 23:58:22 原文

1、Hello World 入门

源代码

<!doctype html>

<html ng-app>

    <head>

        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    </head>

    <body>

        Hello {{'World'}}!

    </body>

</html>

<html ng-app> 中的 ng-app 表示告诉AngularJS处理整个HTML页面并引导引用。

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> 运行载入AngularJS的脚本（初次运行，有点慢）

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

2、AngularJS双向绑定数据
源代码

<!doctype html>

<html ng-app>

    <head>

        <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

    </head>

    <body>

        Your name: <input type="text" ng-model="yourname" placeholder="World">

        <hr>

        Hello {{yourname || 'World'}}!

    </body>

</html>

其中：

（1）、文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量，placeholder默认值。

（2）、双大括号标记将yourname模型变量添加到问候语文本。

（3）、你不需要为该应用另外注册一个事件侦听器或添加事件处理程序！

运行程序，在文本框中输入字符将显示出来。

3、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还提供了一些非常有用的服务特性：

底层服务包括依赖注入，XHR、缓存、URL路由和浏览器抽象服务。
您还可以扩展和添加自己特定的应用服务。
这些服务可以让您非常方便的编写WEB应用。

Angular 入门学习的更多相关文章

angular入门学习文档之一
一.数据双向绑定 angular(下面统一简称ng)强大的地方莫过于它内置的数据双向绑定功能,下面我们通过一个简单的例子来演示ng强大的双向绑定数据的能力. 代码如下: 1.dom结构: 1.< ...
Angular【学习笔记】
1.angular入门网站感谢@菜鸟教程:http://www.runoob.com/angularjs/angularjs-tutorial.html 学习笔记:
ReactJS入门学习一
ReactJS入门学习一阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的理解从服务器端获取数据及理解state的回到顶部 React是什么 ...
适合我胃口的angular.js学习资料
断断续续弄了半年的ANGULAR.JS学习资料,网上下载了N多资料,测试了很多次. 现在只能算是入门,因时间问题,现在要转入其它领域. 如果以后要拾起来,下面这个PDF比较对我胃口. <Angu ...
Angular入门笔记
AngularJS(下面简称其为ng)是Google开源的一款JavaScript MVC框架,弥补了HTML在构建应用方面的不足,其通过使用指令(directives)结构来扩展HTML词汇,使开发 ...
vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
Hadoop入门学习笔记---part4
紧接着<Hadoop入门学习笔记---part3>中的继续了解如何用java在程序中操作HDFS. 众所周知,对文件的操作无非是创建,查看,下载,删除.下面我们就开始应用java程序进行操 ...
Hadoop入门学习笔记---part3
2015年元旦,好好学习,天天向上.良好的开端是成功的一半,任何学习都不能中断,只有坚持才会出结果.继续学习Hadoop.冰冻三尺,非一日之寒! 经过Hadoop的伪分布集群环境的搭建,基本对Hado ...
PyQt4入门学习笔记（三）
# PyQt4入门学习笔记(三) PyQt4内的布局布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类绝对位置这种方式要 ...

随机推荐

SQL Server Insert时开启显式事务
如果没法避免一条一条的写入,那么在处理前显示开启一个事务 begin tran 在处理完成后 commit 这样也要比不开显示事务会快很多! while i < 10000begin inse ...
C#获取网上图片的宽高代码
用Visual Studio建立Console应用程序,记得引用程序集System.Drawing; 代码如下: using System;using System.Drawing;using Sys ...
JavaScript基础13——js的string对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Sass学习之路(4)——不同样式风格的输出方式
因为每个前端工程师编写代码的风格都不太一样,所以Sass的编译也非常人性化的提供了不同风格的编译方式,主要分为4种. 比如下面这一段Sass代码,我们来看看在不同风格下,会编译成什么样吧: nav { ...
Engine中如何更改lyr文件数据源的相对路径
以下是使用relativebase存储layerfile的代码,如果需要修改数据源只要修改ILayer即可: string folderpath = @E:相对路径; string layerfile ...
SharePoint2013 - 移动文档
In SharePoint 2010, the easiest way to transfer documents from one library to another involved using ...
安装sql server managerment studio报错"The instance id is required but it is missing"
问题描述: 今天在安装sql server managerment studio的时候提示报错"The instance id is required but it is missing&q ...
android 显示意图
//显示意图 public void enter(View view) { Intent intent = new Intent();//创建一个空的意图 intent.setClassName(ge ...
android基础开发之WebView
WebView 是android平台沟通 http & H5 页面的桥梁. 但是google对这块的表述不是很清晰,而且SDK里面基本看不到源码,只有一个接口而已. 传送:http://dev ...
android 小记
1.INSTALL_FAILED_INSUFFICIENT_STORAGE 手机内存不够,删除部分后即可安装.