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 相关文章推荐
html超链接打开窗口大小的方法
Mar 05 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
Egret引擎开发指南之发布项目
Sep 03 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
回顾Javascript React基础
Jun 15 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
vue实现拖拽效果
Dec 23 Javascript
Angular8 简单表单验证的实现示例
Jun 03 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中JSON数据操作
2015/07/01 PHP
PHP7新功能总结
2019/04/14 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
js计算精度问题小结
2013/04/22 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
javascript如何写热点图
2015/12/08 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
jquery检测上传文件大小示例
2020/04/26 jQuery
python列表与元组详解实例
2013/11/01 Python
使用python Django做网页
2013/11/04 Python
Python自动登录126邮箱的方法
2015/07/10 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python数学形态学实例分析
2019/09/06 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
YII2 全局异常处理深入讲解
2021/03/24 PHP
机电专业毕业生推荐信
2013/11/10 职场文书
幼儿园秋游感想
2014/03/12 职场文书
经典洗发水广告词
2014/03/13 职场文书
党员承诺书范文
2014/05/19 职场文书
中国梦口号
2014/06/13 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
担保贷款承诺书
2015/04/30 职场文书