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 相关文章推荐
javascript控制swfObject应用介绍
Nov 29 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
jQuery原生的动画效果
Jul 10 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
Vue.js学习之过滤器详解
Jan 22 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
浅谈AngularJS中$http服务的简单用法
May 15 Javascript
vue h5移动端禁止缩放代码
Oct 28 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单元测试配置与使用方法详解
2019/12/27 PHP
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python opencv之分水岭算法示例
2018/02/24 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
师范生自荐信
2013/10/27 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
财务主管的岗位职责
2013/12/30 职场文书
职工趣味运动会方案
2014/02/10 职场文书
小学数学课后反思
2014/04/23 职场文书
服务理念口号
2014/06/11 职场文书
启动仪式策划方案
2014/06/14 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript