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 相关文章推荐
setTimeout与setInterval在不同浏览器下的差异
Jan 24 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
vue实现PC端分辨率适配操作
Aug 03 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 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
ajax缓存问题解决途径
2006/12/06 PHP
php实现jQuery扩展函数
2009/10/30 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
PHPUnit安装及使用示例
2014/10/29 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python求算数平方根和约数的方法汇总
2016/03/09 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
查看django版本的方法分享
2018/05/14 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python实现马丁策略的实例详解
2021/01/15 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
墨西哥皇宫度假村预订:Palace Resorts
2018/06/16 全球购物
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
抗洪救灾标语
2014/10/08 职场文书
社区党支部承诺书
2015/04/29 职场文书
员工考勤管理制度
2015/08/06 职场文书
学生会主席任命书
2015/09/21 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
MySQL系列之十二 备份与恢复
2021/07/02 MySQL