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中的Split使用方法与技巧
Mar 09 Javascript
JavaScript Archive Network 集合
May 12 Javascript
jquery里的正则表达式说明
Aug 03 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
模板视图和AngularJS之间冲突的解决方法
Nov 22 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
在weex中愉快的使用scss的方法步骤
Jan 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
Protoss兵种对照表
2020/03/14 星际争霸
php对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php链表用法实例分析
2015/07/09 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
JavaScript获得页面base标签中url的方法
2015/04/03 Javascript
PHP和NodeJs开发的应用如何共用Session
2015/04/16 NodeJs
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python实现简单井字棋游戏
2020/03/04 Python
Python timeit模块原理及使用方法
2020/10/10 Python
大学生自荐书范文
2013/12/10 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
行政助理工作职责范本
2014/03/04 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
优秀班主任申报材料
2014/12/16 职场文书
慰问信格式
2015/02/14 职场文书
Python内置数据类型中的集合详解
2022/03/18 Python
python模板入门教程之flask Jinja
2022/04/11 Python