求知 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
要资料
 
追随技术信仰

随时听讲座
每天看新闻
 
 

AngularJS教程
AngularJS快速入门
AngularJS环境设置
AngularJS MVC体系结构
AngularJS第一个应用程序
AngularJS指令
AngularJS表达式
AngularJS控制器
AngularJS过滤器
AngularJS表格
AngularJS HTML DOM
AngularJS模块
AngularJS表单
AngularJS包括
AngularJS Ajax
AngularJS视
AngularJS作用域
AngularJS服务
AngularJS依赖注入
AngularJS自定义指令
AngularJS国际化
 
 

AngularJS第一个应用程序
82 次浏览
12次  
 捐助

按以下步骤来创建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与HTML集成

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




您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码: 验证码,看不清楚?请点击刷新验证码 必填



82 次浏览
12次
 捐助
 

每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号