学习AngularJS(一)-程序员宅基地

技术标签: ViewUI  javascript  

学习AngularJS AngularJS 是比较新的技术,版本 1.0 是在 2012 年发布的。

AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。

这是一个非常好的构想,该项目目前已由 Google 正式支持,有一个全职的开发团队继续开发和维护这

个库. AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库.

AngularJS 通过 ng-directives 扩展了 HTML: 一.介绍了AngularJS扩展了HTML

   ng-app 指令定义一个 AngularJS 应用程序。

   ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

   ng-bind 指令把应用程序数据绑定到 HTML 视图。

例如:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
 
<div ng-app="">
     <p>名字 : <input type="text" ng-model="name"></p>
     <h1>Hello {
     {name}}</h1>
</div>
 
</body>
</html>

 

实例讲解:

当网页加载完毕,AngularJS 自动开启。

ng-app 指令告诉 AngularJS,<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把输入域的值绑定到应用程序变量 name。

ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

二.AngularJS的用途:   

1.AngularJS 把应用程序数据绑定到 HTML 元素。   

2.AngularJS 可以克隆和重复 HTML 元素。   

3.AngularJS 可以隐藏和显示 HTML 元素。   

4.AngularJS 可以在 HTML 元素"背后"添加代码。   

5.AngularJS 支持输入验证。

三.AngularJS指令:   

  正如您所看到的,AngularJS 指令是以 ng 作为前缀的 HTML 属性。

   ng-init 指令初始化 AngularJS 应用程序变量。    例如:

   <div data-ng-app="" data-ng-init="firstName='John'"><p>姓名为 <span data-ng-bind="firstName"></span></p>      </div>

四.AngularJS表达式   

    1.AngularJS 表达式写在双大括号内:{ { expression }}。

    2.AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。       

    3.AngularJS 将在表达式书写的位置"输出"数据。

    4.AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

      实例 { { 5 + 5 }} 或 { { firstName + " " + lastName }}

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
</head>
<body>
 
<div ng-app="">
     <p>我的第一个表达式: {
     { 5 + 5 }}</p>
</div>
 
</body>
</html>

 五.AngularJS 应用

  1.AngularJS 模块(Module) 定义了 AngularJS 应用。

  2.AngularJS 控制器(Controller) 用于控制 AngularJS 应用。

  3.ng-app指令定义了应用,  ng-controller 定义了控制器。

 

<div ng-app="myApp" ng-controller="myCtrl">
 
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {
     {firstName + " " + lastName}}
 
</div>
 
<script>
/*AngularJS 模块*/
var app = angular.module('myApp', []);
/*AngularJS 控制器*/
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>

 

转载于:https://www.cnblogs.com/wangbaohui/p/6588111.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/dgxa30111/article/details/101893820

智能推荐

[20181123]关于降序索引问题.txt-程序员宅基地

文章浏览阅读163次。[20181123]关于降序索引问题.txt--//以前写的链接:http://blog.itpub.net/267265/viewspace-1159181/--//..._sys_op_undescend(sys_op_descend("check_sn"))>'0

怎么用微软云盘自动备份文件_微软通过自动更新打破了Windows 10的文件关联-程序员宅基地

文章浏览阅读175次。怎么用微软云盘自动备份文件File associations no longer work properly on Windows 10 after a buggy update. Windows won’t let you select certain applications as your defaults. We tested multiple PCs running the stable...

快速提示:轻松查看Outlook邮件正在使用多少空间-程序员宅基地

文章浏览阅读1.6k次。If you use Outlook and have a busy inbox you might want to periodically find out how much space everything is taking. Today we’ll take a very quick look at the Mailbox Cleanup feature in Outlook, whic..._outlook怎么看存储空间

nuxt1迁移奥nuxt2_在Nuxt中使用Storybook-程序员宅基地

文章浏览阅读188次。nuxt1迁移奥nuxt2Nuxt.js has been a lot of fun to use in production web apps and side projects. It's simple, fast, and seems very in line with web standards when it comes to creating components, imp..._nuxt2的配置文件是什么?

Pytorch tensorboard与tensorboardX的区别_tensorboardx和tensorboard-程序员宅基地

文章浏览阅读2.2k次。tensorboardX跟tensorboard在使用上是基本一样的,区别可能仅在于一个是大佬开发的,一个是PyTorch官方与TensoBoard合作的。_tensorboardx和tensorboard

Flutter 打包apk优化命令_flutter build apk 压缩-程序员宅基地

文章浏览阅读1.7k次。flutter build apk --target-platform android-arm,android-arm64,android-x64打包路径为: 项目的build\app\outputs\flutter-apk\app-release.apk作用:对比flutter build apk 压缩了10%的大小_flutter build apk 压缩

随便推点

java输入输出--字节流处理_输入输出流最大字节数java-程序员宅基地

文章浏览阅读7.2k次,点赞2次,收藏14次。字节流类为处理字节式输入输出提供了丰富的环境。InputStream/OutputStreamInputStream 是一个定义了 Java 字节流输入模式的抽象类。 该类的所有方法在出错条件下都将引发一个 IOException 异常。其声明格式如下:public abstract class InputStream extends Object implements Close..._输入输出流最大字节数java

使用脚本控制外部进程-FTP-程序员宅基地

文章浏览阅读150次。介绍。 许多人问我是否可以从Access中控制外部过程。 通过外部进程,我说的是在Access外部运行脚本。 这将包括BAT,CMD和PowerShell脚本,甚至包括使用Windows的FTP.EXE命令行界面的FTP脚本。 这些脚本接口的功能很难加以限制。 但是,尤其是FTP.EXE,可以控制通过Internet向各种FTP站点发送和接收文件的控制。 大多数网站都是使用此界面更新的。 可..._通过脚本控制进程

登录 注册的 Retrofit+RxJava+OKhttp框架_android retrofit+okhttp+rxjava登录-程序员宅基地

文章浏览阅读292次。//布局&lt;?xml version="1.0" encoding="utf-8"?&gt;&lt;LinearLayout ="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_wi..._android retrofit+okhttp+rxjava登录

【android 串口开发(二) 之 串口读写操作】_android dev串口读写-程序员宅基地

文章浏览阅读2k次,点赞3次,收藏7次。串口的读写操作既然,我们的so已经生成了,那么接下来就是串口的读写操作啦。下面贴出关键类的代码:** * 串口操作类 */public class SerialPortUtil { private String TAG = SerialPortUtil.class.getSimpleName(); private SerialPort mSerialPort; private OutputStream mOutputStream; private InputStr_android dev串口读写

Kinetis Design Studio修改字体_kinetis design studio教程csdn-程序员宅基地

文章浏览阅读611次。修改字体鼠标点击代码区,右键选择Preferences选择好c/c++中的Editor,点击Edit编辑选择适应的字体,字形,字体大小点击确定,再确定就可以了。_kinetis design studio教程csdn

Hibernate和IBatis对比_hirbanate对比ibatis-程序员宅基地

文章浏览阅读336次。项目也做过几个, 使用IBatis就做一个项目, 基本上都是使用Hibernate, 也只是知道几点关于这两个框架的区别, 今天闲着没事干, 从网上找了几篇文章, 做了一个简单的整理。网上关于这两个框架的比较也很多, 只是自己想把别人的东西拿过来整理一下, IBatis和Hibernate的比较。(非原创)Hibernate VS iBATIS简介Hibernate是当前最流行的O_hirbanate对比ibatis