码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS基础01 从HelloWorld说起

时间:2014-06-25 20:08:59      阅读:260      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

作者: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,你会看到如下内容: 

bubuko.com,布布扣

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

总结


ng-app,ng-controller

$scope变量

AngularJS基础01 从HelloWorld说起,布布扣,bubuko.com

AngularJS基础01 从HelloWorld说起

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/arccosxy/p/3805679.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!