AngularJS教程之环境设置


Posted in Javascript onAugust 16, 2016

在本章中,我们将讨论如何设置AngularJS库在Web应用程序开发中使用。我们还将简要地研究了目录结构和它的内容。

当打开链接https://angularjs.org/,会看到有两个选项下载AngularJS库:

AngularJS教程之环境设置

GitHub下载 - 单击此按钮去到GitHub,并获得所有最新的脚本。

下载 - 或点击此按钮,屏幕下方会看到:

AngularJS教程之环境设置

此屏幕给出了使用角JS如下的各种选项:

下载和本地主机文件

有两种不同的选择:旧版和最新。名字本身是自我说明。旧版版本已经低于1.2.x版本和最新为1.3.x版。

我们也可以使用缩小,无压缩或压缩版本。

CDN访问:也可以使用CDN。在CDN会给世界各地的访问,在这种情况下,谷歌的主机区域性数据中心。这意味着使用CDN的移动主机的文件从自己的服务器到一系列外部因素的责任。这也提供了一个优点,即如果访问者你的网页已经下载来自相同的CDN AngularJS副本,它不必被重新下载。

在本教程中使用CDN版本库。

例子

现在让我们使用AngularJS库编写一个简单的例子。创建一个HTML文件 myfirstexample.html 如下:

<!doctype html>
<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
 </head>
 <body ng-app="myapp">
  <div ng-controller="HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Yiibai!</h2>
  </div>
  <script>
   angular.module("myapp", [])
   .controller("HelloController", function($scope) {
   $scope.helloTo = {};
   $scope.helloTo.title = "AngularJS";
   });
  </script>
 </body>
</html>

下面的章节详细描述了上面的代码:

包括AngularJS

我们已经包含了AngularJS的JavaScript文件中的HTML页面,所以我们可以使用AngularJS:

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

检查AngularJS的最新版本在其官方网站。

指向AngularJS应用

接下来,我们告诉一下HTML的一部分包含AngularJS应用。这可以通过将ng-app属性到AngularJS应用程序的根目录下的HTML元素。可以将它添加到HTML元素或body元素,如下所示:

<body ng-app="myapp">
</body>

视图

这部分的视图:

<div ng-controller="HelloController" >
 <h2>Welcome {{helloTo.title}} to the world of Yiibai!</h2>
</div>

ng-controller 告诉AngularJS什么是控制器和视图。 helloTo.title告诉AngularJS编写名为helloTo.title的HTML在这个位置的“model”的值。

控制器

控制器的部分是:

<script>
 angular.module("myapp", [])
 .controller("HelloController", function($scope) {
  $scope.helloTo = {};
  $scope.helloTo.title = "AngularJS";
 });
</script>

此代码先注册名为HelloController中的名为MyApp角模块控制器的功能。我们将学习更多有关在各自的章节模块和控制器。控制器功能被登记在经由angular.module(...)的角。controller(...)函数调用。

传递给控制器函数的$scope参数模型。控制器功能增加了helloTo的JavaScript对象,该对象中加上一个标题字段。

执行

将以上代码保存为myfirstexample.htmll在任何浏览器中打开它。会看到如下的输出:

AngularJS教程之环境设置

当页面在浏览器中加载时,下面的事件发生:

HTML文档被加载到浏览器中,并且由浏览器进行计算。 AngularJS JavaScript文件被加载,角全局对象被创建。接下来,JavaScript的一个注册控制器功能被执行。

AngularJS通过HTML扫描,以寻找AngularJS应用程序和视图。一旦视图的找到,它连接了视图到对应的控制器函数。

接下来AngularJS执行控制函数。然后,它呈现与填充控制器模型数据视图。页面现在已准备就绪。

Javascript 相关文章推荐
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
js实现查询商品案例
Jul 22 Javascript
JavaScript中获取时间的函数集
Aug 16 #Javascript
利用Javascript实现BMI计算器
Aug 16 #Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 #Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 #Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 #Javascript
JavaScript里 ==与===区别详解
Aug 16 #Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 #Javascript
You might like
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP 面向对象程序设计(oop)学习笔记 (五) - PHP 命名空间
2014/06/12 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
php绘制一条直线的方法
2015/01/24 PHP
php阳历转农历优化版
2016/08/08 PHP
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
Canvas获取视频第一帧缩略图的实现
2020/11/11 HTML / CSS
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
个人课题方案
2014/05/08 职场文书
小平小道观后感
2015/06/09 职场文书
房贷工资证明范本
2015/06/12 职场文书
运动会通讯稿200字
2015/07/20 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
SQL注入详解及防范方法
2021/12/06 MySQL
Python中super().__init__()测试以及理解
2021/12/06 Python