编程 Javascript

创建你的第一个AngularJS应用的方法

Posted in Javascript onJune 16, 2015

按以下步骤来创建AngularJS应用
第1步：加载框架

作为一个纯粹的JavaScript框架，它可以使用<script>标签来添加。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>

第2步：使用ng-app指令定义AngularJS应用

<div ng-app="">
...
</div>

第3步：用 ng-model指令定义的模式名称

<p>Enter your Name: <input type="text" ng-model="name"></p>

第4步：用ng-bind指令将上述模型中的值绑定定义

<p>Hello <span ng-bind="name"></span>!</p>

按以下步骤来运行AngularJS应用

使用上面提到的三个步骤在HTML页中。
testAngularJS.html

<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
 <p>我的名字: <input type="text" ng-model="name"></p>
 <p>Hello, <span ng-bind="name"></span>!</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html。请输入姓名并看到的结果。

创建你的第一个AngularJS应用的方法

如何让AngularJS与HTML集成

ng-app指令指示AngularJS应用的开始。
ng-model指令创建一个名为“name”的模型变量在HTML页面中，并有ng-app指令在div内使用。
ng-bind使用模型名称只要在文本框中用户输入的东西显示在HTML span标签。
结束</ div>标记表示AngularJS应用程序的结束。

创建你的第一个AngularJS应用的方法

- Author -

goldensun

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jquery的高性能td和input切换并可修改内容实现代码

Jan 09 Javascript

myeclipse安装jQuery插件的方法

Mar 29 Javascript

js关闭浏览器窗口及检查浏览器关闭事件

Sep 03 Javascript

jQuery中document与window以及load与ready 区别详解

Dec 29 Javascript

调试JavaScript中正则表达式中遇到的问题

Jan 27 Javascript

JavaScript的设计模式经典之代理模式

Feb 24 Javascript

AngularJS入门教程之AngularJS指令

Apr 18 Javascript

使用jQuery的load方法设计动态加载及解决被加载页面js失效问题

Mar 01 Javascript

pageGroup.js实现分页功能

Jul 27 Javascript

javascript+css实现进度条效果

Mar 25 Javascript

vuex管理状态仓库使用详解

Jul 29 Javascript

Vue包大小优化的实现(从1.72M到94K)

Feb 18 Vue.js

详解JavaScript中的表单验证

Jun 16 #Javascript

详解JavaScript中的异常处理方法

Jun 16 #Javascript

详解JavaScript对W3C DOM模版的支持情况

Jun 16 #Javascript

jQuery插件zepto.js简单实现tab切换

Jun 16 #Javascript

jQuery封装的tab选项卡插件分享

Jun 16 #Javascript

jquery插件splitScren实现页面分屏切换模板特效

Jun 16 #Javascript

简述JavaScript对传统文档对象模型的支持

Jun 16 #Javascript