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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
javascript dom 操作详解 js加强
Jul 13 Javascript
JS OffsetParent属性深入解析
Jan 13 Javascript
js倒计时抢购实例
Dec 20 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
php中chdir()函数用法实例
2014/11/13 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
基于jQuery实现的Ajax 验证用户名是否存在的实现代码
2011/04/06 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
Angular模板表单校验方法详解
2017/08/11 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
python模块smtplib实现纯文本邮件发送功能
2018/05/22 Python
基于python实现高速视频传输程序
2019/05/05 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
python爬虫基础之urllib的使用
2020/12/31 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
气象学专业个人求职信
2014/03/15 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
python 中的@运算符使用
2021/05/26 Python
python基础学习之递归函数知识总结
2021/05/26 Python