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 相关文章推荐
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
javascript模拟命名空间
Apr 17 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
JavaScript动画实例之粒子文本的实现方法详解
Jul 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数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php时间戳转换代码详解
2019/08/04 PHP
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[02:10]三分钟回顾完美世界城市挑战赛
2019/01/24 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
Python脚本暴力破解栅栏密码
2015/10/19 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
django foreignkey(外键)的实现
2019/07/29 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
耐克亚太地区:Nike APAC
2019/12/07 全球购物
党校自我鉴定范文
2013/10/02 职场文书
给老婆大人的检讨书
2014/02/24 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
毕业生实习证明
2014/09/19 职场文书
个人欠款协议书范本2014
2014/11/02 职场文书
青春雷锋观后感
2015/06/10 职场文书
老人与海读书笔记
2015/06/26 职场文书
全民创业工作总结
2015/08/13 职场文书
礼貌问候语大全
2015/11/10 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书