首先需要下载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. Wind7系统下 wifi设置

    netsh wlan set hostednetwork  mode=allow ssid=pass:123456789 key=123456789 netsh wlan set hostednetw ...

  2. SQL 重置自增列的值 批量处理

    Declare @IdentityTable sysname, @IdentityColumn sysname, @TotalRows int, @i int, @Iden int, @Sql var ...

  3. IIS处理并发请求时出现的问题及解决

    一个ASP.NET项目在部署到生产环境时,当用户并发量达到200左右时,IIS出现了明显的请求排队现象,发送的请求都进入等待,无法及时响 应,系统基本处于不可用状态.因经验不足,花了很多时间精力解决这 ...

  4. http statusCode(状态码) 200、300、400、500序列

    201-206都表示服务器成功处理了请求的状态代码,说明网页可以正常访问.        200(成功)  服务器已成功处理了请求.通常,这表示服务器提供了请求的网页.        201(已创建) ...

  5. Linux图片批处理

    通过imagemagick的convert命令来处理. 将多个图片横向拼接(宽图): convert +append 1.jpg 2.jpg all.jpg #人为指定顺序 convert +appe ...

  6. CentOS添加用户及赋予sudo权限

    在CentOS下添加一个用户假设用户名:username 密码:userpwd 新建用户: adduser username 修改密码: passwd username 根据提示重复输入两遍userp ...

  7. TeamViewer11使用教程

    下载地址(官网):http://res.ncmem.com/download/TeamViewer11.exe 下载地址(360):https://yunpan.cn/cvxRiTfSC3iH6(访问 ...

  8. SQL之DDL

    DDL是SQL定义语言,它主要包括三个关键字:create  ,alter , drop(数据库关键字不分大小写 ),主要操作对象 有数据库.表.索引.视图等 操作                   ...

  9. oracle根据视图删除表

    delete from t_fwaqjcjl where zcbm in (select zcbm from view_fwaqjcjl where 1=1 )

  10. 三星（SAMSUNG）910S3L-K04 安装win7的BIOS设置

    三星(SAMSUNG)910S3L-K04 开机后连续点击F2进入BIOS,再进入BOOT.将SECURE BOOT CONTROL点成disabled,将OS MODE SELECTION选为uef ...