AngularJS入门教程1--配置环境
首先需要下载AngualrJS，下载地址 https://angularjs.org/
官方网站提供2种下载使用AngularJS方法：
1. 去GitHub下载 ，点击按钮会跳转到GitHub页面，可获取最新版本
2. 直接下载，点击此按钮会直接弹出如下窗口，
可根据需要选择最适合的AngularJS 版本，下载并保存到本地
有两种选项Legacy和Latest，Legacy是1.2.x以下，Latest 是1.4.x 及以上版本。
CDN 访问地址，CDN 是必须设置的，CDN为全球用户设置访问区域数据中心的权限。如果用户访问你的网页时AngularJS 已经下载，不需要重新下载。
下面是使用AngularJS库的简单示例，代码如下：
<!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 Tutorialspoint!</h2>
</div> <script>
angular.module("myapp", []) .controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script> </body>
</html>
使用AngularJS
通过在HTML根元素中添加ng-app属性，也可以将其添加到HTML 的body 元素中：
<body ng-app = "myapp">
</body>
View
view 代码如下：
<div ng-controller = "HelloController" >
<h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>
ng-controller 会指定控制器使用该View,helloTo.title会告诉AngularJS 将Model中的值写入HTML中。
Controller
Controller 部分代码：
1: <script>
2: angular.module("myapp", [])
3:
4: .controller("HelloController", function($scope) {
5: $scope.helloTo = {};
6: $scope.helloTo.title = "AngularJS";
7: });
8: </script>
上述代码注册了控制器，命名为HelloController。Controller功能可通过angular.module(...).controller(...) 功能调用注册的。
$scope参数会通过Controller 函数传递到Model中，controller会添加JS 对象，并命名为HelloTo，在该对象中添加Title字段。
执行
保存myfirstexample.html 文件，并运行，可以得到以下结果：
Welcome AngularJS to the world of Tutorialspoint!
当浏览器加载页面时，加载过程如下：
1. 浏览器首先会加载HTML文档。AngularJS 脚本文件也会被加载，创建全局对象。其次JS注册的Controller 会被执行。
2. AngularJS 扫描HTML查找AngularJS aPP及Views。一旦View被加载，则View会响应Controller的控制函数。3. AngularJS 执行控制器， 并根据Model中提取的数据渲染View，页面也加载完成
Angular 开发工具
新一代HTML5 / JavaScript UI控件 Wijmo，大而全面的前端开发工具包，现已全面支持Angular 2。
AngularJS入门教程1--配置环境的更多相关文章
- 【转载】图灵AngularJS入门教程
摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...
- Spring Cloud 入门教程 - 搭建配置中心服务
简介 Spring Cloud 提供了一个部署微服务的平台,包括了微服务中常见的组件:配置中心服务, API网关,断路器,服务注册与发现,分布式追溯,OAuth2,消费者驱动合约等.我们不必先知道每个 ...
- AngularJS入门教程：日期格式化
AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...
- Arduino可穿戴开发入门教程Arduino开发环境介绍
Arduino可穿戴开发入门教程Arduino开发环境介绍 Arduino开发环境介绍 Arduino不像我们使用的PC端操作系统一样,可以直接在操作系统中安装软件为操作系统编程.Arduino的软件 ...
- Angular系列----AngularJS入门教程00：引导程序（转载）
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- [转载]AngularJS入门教程00：引导程序
我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...
- React Native入门教程 1 -- 开发环境搭建
有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...
- AngularJS 入门教程 $http is not defined 解决方案
采用从git下载的教程, www.angularjs.cn 版本的 入门教程,在第5步的时候 签出文件: git checkout -f step-5 运行将会提示: $http is not def ...
- Angular系列------AngularJS入门教程：导言和准备（转载）
学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...
随机推荐
- 一个Angular模块中可以声明哪些组件？
一个Angular模块中可以声明哪些组件? (1) controller 控制器 (2) directive 指令 (3) function ...
- 手机GPS为什么能在室内定位？
为什么手机在室内也能定位?大部分人知道手机会通过GPS进行定位,其实手机定位系统并不是和我们的RTK完全一样的,因为那样就无法解释为何在室内也能定位了,这里我来科普一下智能手机的那些定位方法. ...
- 解决 Oracle exp导出表数据时空表不能导出的问题
一.不能导出空表的原因 1.Oracle11g默认对空表不分配segment,故使用exp导出Oracle11g数据库时,空表不会导出. 2.设置deferred_segment_creation 参 ...
- Linux Oracle删除归档日志
今天遇到Oracle报这样的错:ORA-00257 查看了下,原来是Oracle的归档日志满了,解决方案两个 一:增加归档日志大小 二:删除无用的归档日志(我们选择这个方案) 什么也不说了Linux下 ...
- linux c++循环缓冲区模板类
一:概述 实际学习和工作中,我们经常会遇到读写大量数据的情况,这个时候我们可能就用到了循环缓冲区. 循环缓冲区在处理大量数据的时候有很大的优点,循环缓冲区在一些竞争问题上提供了一种免锁的机制,免锁的前 ...
- TTL 生存时间介绍 (转)
TTL: (Time To Live)生存时间,是IP协议包中的一个值,它告诉网络路由器包在网络中的时间是否太长而应被丢弃.有很多原因使包在一定时间内不能被传递到目的地.例如,不正确的路由表可能导致包 ...
- linux mysql
安装mysql 1.使用rpm 安装mysql 或者使用yum安装 使用rpm 安装 下载 Centos 7 所需要的mysql包 tar -xf 解压整合包 根据依赖 安装 common>li ...
- [置顶]PADS PCB功能使用技巧系列之NO.004- 如何做到20H规则？
电源层与地层之间变化的电场在板边缘会向外辐射电磁干扰(EMI),称为边沿效应.20H规则可将70%的电场限制在接地层边沿内,100H可达到98%. (1)在Layout中,选择菜单栏Setup -&g ...
- Android--短信
1.Android 提供一系列 API,可以是我们在自己的程序中发送和接收短信: 2.接收短信: 1)当手机接收到一条短信时,系统会发出一条值为 android.provider.Telephony. ...
- STL练习题续
//zjnu 1399 //sort 数组可用//vector sort(vector) #include<iostream> #include<algorithm> usin ...