首先需要下载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. module.export和export

    module.exports 和 exports 是引用到的同一个对象,类似下面代码所示(为了举例,不是完全的正确): var module.exports = {};        var expo ...

  2. 【Mail】JavaMail发送带附件的邮件（二）

    上一篇讲了使用JavaMail发送普通邮件([Mail]JavaMail介绍及发送邮件(一)),本例讲发送复杂的邮件(带有附件的邮件) 生成一封复杂的邮件 新建一个JavaWeb的Maven工程,引入 ...

  3. java8 ArrayList源码阅读

    转载自 java8 ArrayList源码阅读 本文基于jdk1.8 JavaCollection库中有三类:List,Queue,Set 其中List,有三个子实现类:ArrayList,Vecto ...

  4. 进阶——scrapy登录豆瓣解决cookie传递问题并爬取用户参加过的同城活动©seven_clear

    最近在用scrapy重写以前的爬虫,由于豆瓣的某些信息要登录后才有权限查看,故要实现登录功能.豆瓣登录偶尔需要输入验证码,这个在以前写的爬虫里解决了验证码的问题,所以只要搞清楚scrapy怎么提交表单 ...

  5. Taylor定理证明

    下图,单独打开查看 当n->inf时如果 Rn(c)趋0, c属于(a,x), 那么在区间(a,x) 内函数在a点生成的taylor级数收敛到函数f.

  6. 安装vs2010，vs2015后，删除2015，导致vs2016打不开

    报错:Cannot evaluate the property expression "$([MSBuild]::ValueOrDefault('$(VCTargetsPath)','$(M ...

  7. CodeForces 743A Vladik and flights (水题)

    题意:sb要从a到b,然后要乘坐飞机,只有两家有飞机,如果乘坐同一家的,就免费,如果不是就收到abs(j-i) 的费用,问你最少花费是多少. 析:直接考虑a和b是不是同一家的,如果是,花费为0,如果不 ...

  8. STM32移植RT-Thread的串口只能接收一个字节数据的问题

    打开设备的函数参数要与注册设备函数参数要一致, 注册设备的函数及其参数如下: /* register UART1 device */ rt_hw_serial_register(&serial ...

  9. 一个实现了View接口的Fragment

    小程序并不新鲜,模式上先有百度轻应用,后有支付宝的各类小服务,再来还有腾讯自家QQ右下角的应用宝:技术上也就是FaceBook RN的那一套.一个技术上无创新,形式上无创意的事物,凭什么勾起了开发者们 ...

  10. MemCached 安装笔记

    安装步骤: 1. 下载libevent & memcached 源码包 分别把memcached和libevent下载回来,放到 /tmp 目录下: # cd /tmp     # wget ...