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实现checkbox全选的代码
Apr 30 Javascript
使用AOP改善javascript代码
May 01 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
vant自定义二级菜单操作
Nov 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对gzip文件或者字符串解压实例参考
2008/07/25 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
js实现贪吃蛇小游戏(容易理解)
2017/01/22 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
简单解决Python文件中文编码问题
2015/11/22 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Django中间件实现拦截器的方法
2018/06/01 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
24式加速你的Python(小结)
2019/06/13 Python
python pycharm的安装及其使用
2019/10/11 Python
keras获得model中某一层的某一个Tensor的输出维度教程
2020/01/24 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
python 负数取模运算实例
2020/06/03 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
成教自我鉴定
2013/10/27 职场文书
完美的中文自荐信
2014/05/24 职场文书
简单租房协议书
2014/10/21 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP
Mysql排序的特性详情
2021/11/01 MySQL
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA