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优先加载笔记代码
Sep 30 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
vue实现多级菜单效果
Oct 19 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 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 正则表达式小结
2009/08/31 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
PHP中is_file()函数使用指南
2015/05/08 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
常用的js方法合集
2017/03/10 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
Vue实现开关按钮拖拽效果
2020/09/22 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
Python实现的Google IP 可用性检测脚本
2015/04/23 Python
在Python中使用base64模块处理字符编码的教程
2015/04/28 Python
查看Django和flask版本的方法
2018/05/14 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
django的auth认证,authenticate和装饰器功能详解
2019/07/25 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
单位刻章介绍信范文
2014/01/11 职场文书
常务副县长“四风”个人对照检查材料思想汇报
2014/10/02 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL