zoukankan      html  css  js  c++  java
  • 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变量

  • 相关阅读:
    python测试开发django177.启动项目添加初始化数据(fixtures的使用) 上海
    python笔记70 Python中`__repr__`和`__str__`区别 上海
    python笔记69 什么是猴子补丁(Monkey Patch)? 上海
    pytest文档78 钩子函数pytest_runtest_makereport获取用例执行报错内容和print内容 上海
    python测试开发django176.数据库迁移数据(manage.py dumpdata) 上海
    python3面试题:如何用python实现栈(Stack)的操作? 上海
    python笔记71 traceback.print_exc()保存异常内容 上海
    测试驱动开发 Rss Reader Item Marker
    Rhino Mocks (RhinoMock)2
    继承的Singleton模式的实现
  • 原文地址:https://www.cnblogs.com/arccosxy/p/3805679.html
Copyright © 2011-2022 走看看