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学习笔记之获取当前目录的实现代码
Dec 14 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
前端微信支付js代码
Jul 25 Javascript
jquery attr()设置和获取属性值实例教程
Sep 25 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
Vuex 入门教程
Jan 10 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 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 项目的方法
2007/01/02 PHP
PHP 数字左侧自动补0
2008/03/31 PHP
php将字符串转换成16进制的方法
2015/03/17 PHP
php实现对象克隆的方法
2015/06/20 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
2013/11/14 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
js微信分享API
2020/10/11 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
联强国际笔试题面试题
2013/07/10 面试题
生物科学专业个人求职信范文
2013/12/05 职场文书
家长对小学生的评语
2014/01/28 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
网络技术专业求职信
2014/07/13 职场文书
酒桌上的开场白
2015/06/01 职场文书
鲁冰花观后感
2015/06/10 职场文书
2015年教师国培感言
2015/08/01 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
redis使用不当导致应用卡死bug的过程解析
2021/07/01 Redis
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers