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 相关文章推荐
js 文件引入实现代码
Apr 23 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
轻松掌握JavaScript装饰者模式
Aug 27 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
解析vue路由异步组件和懒加载案例
Jun 08 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
详解vue路由
Aug 05 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
JAVA/JSP学习系列之七
2006/10/09 PHP
phpMyAdmin 安装配置方法和问题解决
2009/06/08 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php构造函数与析构函数
2016/04/23 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
Python中的startswith和endswith函数使用实例
2014/08/25 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
对python中数组的del,remove,pop区别详解
2018/11/07 Python
利用python实现逐步回归
2020/02/24 Python
python简单实现9宫格图片实例
2020/09/03 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
运动会广播稿80字
2014/01/23 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
Rust中的Struct使用示例详解
2022/08/14 Javascript