首先需要下载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--配置环境的更多相关文章

  1. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  2. Spring Cloud 入门教程 - 搭建配置中心服务

    简介 Spring Cloud 提供了一个部署微服务的平台,包括了微服务中常见的组件:配置中心服务, API网关,断路器,服务注册与发现,分布式追溯,OAuth2,消费者驱动合约等.我们不必先知道每个 ...

  3. AngularJS入门教程：日期格式化

    AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...

  4. Arduino可穿戴开发入门教程Arduino开发环境介绍

    Arduino可穿戴开发入门教程Arduino开发环境介绍 Arduino开发环境介绍 Arduino不像我们使用的PC端操作系统一样,可以直接在操作系统中安装软件为操作系统编程.Arduino的软件 ...

  5. Angular系列----AngularJS入门教程00：引导程序（转载）

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  6. [转载]AngularJS入门教程00：引导程序

    我们现在开始准备编写AngularJS应用——phonecat.这一步骤(步骤0),您将会熟悉重要的源代码文件,学习启动包含AngularJS种子项目的开发环境,并在浏览器端运行应用. 进入angul ...

  7. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  8. AngularJS 入门教程 $http is not defined 解决方案

    采用从git下载的教程, www.angularjs.cn 版本的 入门教程,在第5步的时候 签出文件: git checkout -f step-5 运行将会提示: $http is not def ...

  9. Angular系列------AngularJS入门教程：导言和准备（转载）

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设 ...

随机推荐

  1. Linux中的工作管理（Job Control ）

    以前使用Linux老是会不小心按下Ctrl + z,然后就出现看不懂的情况,以为程序突然就没了,今天专门研究了下Linux下的几个快捷键和工作管理. 其中找到一篇很不错的文章,大部分是里面转载的. 原 ...

  2. （python）图片处理Pillow模块的使用

    Pillow中最重要的类就是Image,该类存在于同名的模块中.可以通过以下几种方式实例化:从文件中读取图片,处理其他图片得到,或者直接创建一个图片. 还有一个类为ImageDraw,用来画图. 1. ...

  3. 最小生成树算法——Kruskal算法

    #include<stdio.h> #include<algorithm> #include<windows.h> using namespace std; str ...

  4. Win7下安装一个装逼文本编辑器Atom + activate-power-mode插件

    Atom是Github推出的一个文本编辑器,搜索一下大概是给Web前端用的,最近比较火的是他的一个插件activate-power-mode,可以实现打字屏振效果. 用来装装逼还是挺适合的,本来想试试 ...

  5. CentOS详解top命令各个数据的含义

    最近在docker(宿主机是centos虚拟机)里安装gitlab,发现随着时间的运行,虚拟机的内存持续走高,运行几个小时之后内存已经爆掉了,putty远程处理于假死状态. 这个时候就需要查看内存进程 ...

  6. JS与Jquery学习笔记（二）

    一. JS 的面向对象 JS没有类,其类就用function来代替如下所示: function Cat(name, color){ this.name=name; this.color=color; ...

  7. [UCSD白板题] Pairwise Distinct Summands

    Problem Introduction This is an example of a problem where a subproblem of the corresponding greedy ...

  8. UIAlertController的使用

    在iOS8中,苹果对UIAlertView和UIActionSheet进行了重新的封装,成为适应性更强,灵活性更高的UIAlertController.具体使用方法如下. UIAlertControl ...

  9. PYTHON学习之路_PYTHON基础（1）

    学习内容: 1.Python介绍 2.Python程序初接触和变量 3.Python用户交互 4.Python数据类型 5.Python循环if...(elif)...else 6.Python循环w ...

  10. 好玩儿的Game

    1. 种类: 威佐夫游戏, Bash游戏, Nim游戏, 等. 2. 理论: 胜态一定可以通过某种策略走向必败态; 而必败态采取任何策略都将走向胜态. 用图论的话来说, 因为必败态只能走向胜态, 所以 ...