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拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
jQuery 获取浏览器所在的IP地址的小例子
Nov 08 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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中神奇的fastcgi_finish_request
2011/05/02 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
Js组件的一些写法
2010/09/10 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
JS分页效果示例
2013/10/11 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
监控Nodejs的性能实例代码
2019/07/02 NodeJs
JS快速实现简单计算器
2020/04/08 Javascript
[01:20]DOTA2上海特级锦标赛现场采访:谁的ID最受青睐
2016/03/25 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python日期的加减等操作的示例
2017/08/15 Python
python和pygame实现简单俄罗斯方块游戏
2021/02/19 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
三星法国官方网站:Samsung法国
2019/10/31 全球购物
寒假实习自荐信
2014/01/26 职场文书
花店创业计划书范文
2014/02/07 职场文书
竞选村长演讲稿
2014/04/28 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
建党伟业的观后感
2015/06/01 职场文书
python批量更改目录名/文件名的方法
2021/04/18 Python
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python