首先需要下载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. 深入研究C语言 第二篇(续)

    1. 关于如下的程序,关于结构体的拷贝,拷贝是拷贝到内存中的什么地方? 我们进入debug进行反汇编,单步等操作跟踪查看.发现: 在main中,我们看到call 0266应该对应的是转跳到func处执 ...

  2. jsp:软件包 javax.servlet 不存在

    jdk里面有javax.servlet和javax.servlet.http这两个包吗? JavaServlet程序运行还需要安装JDK以外的包吗...? why?我运行JavaServlet程序的时 ...

  3. nginx下搭建 Yii框架

    因为启用了rewrite,导致css,js,images等静态文件也定向到index.php 我不得不重定向静态文件的路径 仅供参考: server { listen 80; server_name ...

  4. java执行效率低，但效率就低吗？

    很多没用过java或者没怎么用过java的程序员都会说java执行效率低,这种言论时不时的在影响着我这个初级的java开发者. java执行效率低因如下几点导致(和C++比较): 1,java不允许内 ...

  5. CodeForces 743B Chloe and the sequence (递归)

    题意:给定n和k,求第n个序列中第k个数是多少,序列是这样构造,原来只有1,然后再copy一遍放在到后面再在中间放上一个没有出现过的最小整数,就变成了 121,下次就成了1213121. 析:很明显是 ...

  6. MySQL的安装配置

    安装配置 MySQL1.官方下载 MySQL2.用 tar 解压.tar.bz 或.tar.gz3.解压后有三个目录,分别为 usr etc var4.进入 usr,进入 bin5.在主机上建个目录( ...

  7. 创建一个ArcGIS for Android 新项目并显示出本地的地图

    1.准备工作:首先要配置好android的开发环境,然后在Eclipse中安装ArcGIS for Android的开发控件:在ArcCatalog中发布好本地的地图服务. 2.安装完ArcGIS f ...

  8. Hibernate component mapping

    A Component is a containted object that is be persisted value type and not an entity.But you can emb ...

  9. 升级java8---from centos

    安装步骤: wget http://10.107.2.44/jdk-8u111-linux-x64.tar.gz root@ute-image:~# tar zxf jdk-8u111-linux-x ...

  10. mysql5.6-5.7性能调优

    1.DEFAULT_STORAGE_ENGINE 如果你已经在用MySQL 5.6或者5.7,并且你的数据表都是InnoDB,那么表示你已经设置好了.如果没有,确保把你的表转换为InnoDB并且设置d ...