AngularJS基础01 从HelloWorld说起

作者:arccosxy  转载请注明出处:http://www.cnblogs.com/arccosxy/

准备工作



首先,创建一个名为index.html的HTML文件,代码如下:

<!DOCTYPE html>
<head>
     <title>Learning AngularJS</title>
</head>
<body>

</body>
</html>

接下来就是加载angular.js库,访问https://angularjs.org/获取AngularJS最新的CDN(内容分发网络)链接,或者用下面这个链接https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js,这是Google的CDN,把它加入到head标签中:

<!DOCTYPE html>
<head>
     <title>Learning AngularJS</title>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
     <div id=‘content‘></div>
</body>
</html>

好了,现在我们有了一个加载了AngualarJS的HTML页面,go on!

一些设置



要告诉AngularJS将这个页面渲染为一个应用,需要做几件事情。

使用ng-app告诉AngularJS应该管理页面中的哪一部分。如果你正在构建一款纯AngularJS应用,你应该把ng-app指令写在<html>标签中。这里,我们演示让AngularJS只管理页面中的一部分,简单地在DIV标签中加入ng-app="MyTutorialApp"即可。

<!DOCTYPE html>
<head>
    <title>Learning AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
    <div id=‘content‘ ng-app=‘MyTutorialApp‘></div>
</body>
</html>

现在,我们告诉了AngularJS这个DIV是一个angular应用。然后,我们需要声明使用哪一个控制器:

<!DOCTYPE html>
<head>
    <title>Learning AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
</head>
<body>
    <div id=‘content‘ ng-app=‘MyTutorialApp‘ ng-controller=‘MainController‘>

    </div>
</body>
</html>

MainController是我给控制器起的名字,你可以取任何更有意义的名字。Ok,现在MainController将可以控制DIV中的一切,但是这个控制器在哪?我们需要创建它!在index.html所在的目录下新建名为app.js的JS文件,内容如下:

var app = angular.module(‘MyTutorialApp‘,[]);

这个JS文件所做的是新建一个名为MyTotorialApp的AngularJS应用,并且把它赋给了变量app,我们稍后会使用到它。现在我们需要再创建一个名为maincontroller.js的文件,内容如下:

app.controller("MainController", function($scope){

});

这个文件为MyTotorialApp分配了一个名为MainController的控制器。这两个JS文件其实可以合并为一个,但为了方便维护和容易理解,我把它们拆成两个分离的文件。接下来,把这两个JS文件都加载进HTML页面中。注意,app.js需要在maincontroller.js之前被加载进来。

<!DOCTYPE html>
<head>
    <title>Learning AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
    <div id=‘content‘ ng-app=‘MyTutorialApp‘ ng-controller=‘MainController‘>

    </div>
</body>
</html>

现在,我们的准备工作已经做完了,接下来看一个应用是怎样产生的。

Hello World



当我们创建maincontroller.js的时候,你可能已经注意到了$scope这个变量,它被当做控制函数的参数,是我们分配控制器变量的地方,这些变量可以在HTML页面的DIV中被使用。不明白没关系,举个栗子来说明,在控制器内声明一个$scope变量。

app.controller("MainController", function($scope){
    $scope.welcome = "Hello World";
});

在上面的代码中我们新建了一个scope变量并分配一个字符串给它。接下来我们可以在HTML中访问它。

<!DOCTYPE html>
<head>
    <title>Learning AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
    <div id=‘content‘ ng-app=‘MyTutorialApp‘ ng-controller=‘MainController‘>
            {{welcome}}
    </div>
</body>
</html>

我们在HTML中用{{}}(两个花括号)把welcome变量包起来,这样AngularJS就知道该处理它了。注意,在这里welcome前面没有加$scope。现在用浏览器打开index.html,你会看到如下内容:

现在你应该大致上理解scope变量了,它们通过在HTML中用双花括号{{}}来访问。同时也应该明白scope变量只在该控制器范围内有效,你不能从DIV之外访问到welcome变量。

总结



ng-app,ng-controller

$scope变量

AngularJS基础01 从HelloWorld说起

时间: 06-23

AngularJS基础01 从HelloWorld说起的相关文章

iOS基础 01 构建HelloWorld,剖析并真机测试

iOS基础 01 构建HelloWorld,剖析并真机测试 前言: 从控制台输出HelloWorld是我们学习各种语言的第一步,也是我们人生中非常重要的一步. 多年之后,我希望我们仍能怀有学习上进的心情,继续以HelloWorld去认识这世界上更多的东西. 本篇以HelloWorld作为切入点,向大家系统介绍什么事iOS应用以及如何使用Xcode创建iOS应用. 目录: 1. 创建HelloWorld工程 1.1. 设计界面 1.2. 真机测试 2. Xcode中的iOS工程模板 2.1. Ap

Java基础01 从HelloWorld到面向对象(转载)

Java是完全面向对象的语言.Java通过虚拟机的运行机制,实现“跨平台”的理念. "Hello World!" public class HelloWorld{    public static void main(String[] args){        System.out.println("Hello World!");    }} 程序中包括Java的一些基本特征: 类(class):上面程序定义了一个类HelloWorld,该类的名字与.java文件

Java基础01 从HelloWorld到面向对象

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Java是完全面向对象的语言.Java通过虚拟机的运行机制,实现“跨平台”的理念.我在这里想要呈现一个适合初学者的教程,希望对大家有用. "Hello World!" 先来看一个HelloWorld.java程序.这个程序在屏幕上打印出一串字符"Hello World!": 1 public class HelloWorld 2 { 3 public

【opengl 学习笔记01】HelloWorld示例

<<OpenGL Programming Guide>>这本书是看了忘,忘了又看,赶脚还是把笔记做一做心里比较踏实,哈哈. 我的主题是,好记性不如烂笔头. ================================================================ 1. 下载glut库 glut库地址为:www.opengl.org/resources/libraries/glut/glutdlls37beta.zip glut全称为:OpenGL Utilit

J2EE开发实战基础系列一 HelloWorld

开始咱们的第一个程序,首先是配置环境,按照上一章所描述的方式下载开发工具,然后配置Java环境变量,给大家看下具体的结构: 环境变量配置OK的提示,如上图. Eclipse和Tomcat的文件目录位置,本系列采用的都是绿色版本,如上图. 启动Eclipse.exe,Workspace路径的配置,下面的复选框表示选中后就默认一直使用该工作空间,不选择每次启动都出出现该提示框,如上图. 在这里讲解下Workspace的概念,这里目录存储项目程序段的,假如你在别的目录创建一个Java的项目,那么在Wo

J2EE开发实战基础系列一 HelloWorld【转】

开始咱们的第一个程序,首先是配置环境,按照上一章所描述的方式下载开发工具,然后配置Java环境变量,给大家看下具体的结构: 环境变量配置OK的提示,如上图. Eclipse和Tomcat的文件目录位置,本系列采用的都是绿色版本,如上图. 启动Eclipse.exe,Workspace路径的配置,下面的复选框表示选中后就默认一直使用该工作空间,不选择每次启动都出出现该提示框,如上图. 在这里讲解下Workspace的概念,这里目录存储项目程序段的,假如你在别的目录创建一个Java的项目,那么在Wo

Android基础-01

Android基础-01 1.1G-4G的介绍 2.Android操作系统介绍 3.Android历史介绍 4.Android系统架构(重点) 系统架构的四个层次: 1.应用程序层:自己的开发应用程序都是运行在这一层: 2.框架层:开发应用程序使用的API都在这一层: 3.类库层:基础类库: 4.linux内核: 5.两种虚拟机的不同(重点) JVM与Dalvik虚拟机之间的区别: 1.JVM加载的是.class文件.Dalvik加载的是.dex; 2.JVM加载数据时使用栈架构.Dalvik使

安卓基础01

安卓基础01 SDK System images 这是在创建模拟器时需要的system image,也就是在创建模拟器时CPU/ABI项需要选择的,下载并解压后,将解压出的整个文件夹复制或者移动到 your sdk 路径/system-images文件夹下即可, 如果没有 system-images目录就先 创建此文件夹,然后打开SDK Manager,打开Tools(工 具)菜单选择Options(选项)菜单项打开Android SDK Manager Setting对话框,点击Clear C

AspectJ基础学习之三HelloWorld(转载)

AspectJ基础学习之三HelloWorld(转载) 一.创建项目 我们将project命名为:aspectjDemo.然后我们新建2个package:com.aspectj.demo.aspect 和 com.aspectj.demo.test 前者用来方apsect.后者用来放测试类.如果你仔细的话,你会发现Aspectj的项目上面有个AJ的标志. 二.创建Aspect 首先我们创建HelloWorld.java.他包含main()方法,但是没有方法体,代码如下: [java] view