zoukankan      html  css  js  c++  java
  • [译] 第二天:AngularJS

    前言

    昨天我开始了挑战的第一天,30天系列的第一篇博客,我主要学习了Bower - 客户端的包依赖管理。你可以从这里了解,也可以看的讨论。

     

    今天我要学习AngularJS 的基础,希望可以完成一个简单的程序。我会用这篇博客直播我怎样学习AngularJS.同时也会在这里使用bower.我知道不可能只用一天就学完Angular JS,所以会多花几天,覆盖不同的主题。

    什么是AngularJS?

    1. 扩展HTML添加动态特性,轻松创建新式Web程序
    2. 按你想用的方式使用
    3. 将你带回HTML
    4. 声明方法
    5. 简单
    6. 通过双向数据绑定消除DOM操作,视图会随模型的更新而更新,反之亦然
    7. 创建单页Web程序。当你创建SPA程序如路由,Ajax调用,数据绑定,缓存,历史纪录,DOM操作时,会有很多挑战。 

    AngularJS的主要组件

    1. 控制器:视图背后的代码
    2. 范围:包括模型数据,合并控制器和视图
    3. 模块:定义新的或在用的服务,指令,过滤器等等,模块可以依赖另一个模块。
    4. 指令:允许你通过定义自己项目的特定HTML指令去扩展HTML.赋予HTML新技巧。

    俯瞰AngularJS

    为什么关注?

    对我来说学习AngularJS有两个主要原因:

    1. Google支持,吸引了大批开发者
    2. 全栈式框架:意味着你不需要依赖数百万的脚本,同时还不确定它们有没有整合好

    前提准备

    我们会用Bower为示例程序安装AngularJS。如果你还没有安装bower请参照我的前一篇博客

    安装AngularJS

    在你的机器上找一个你认为合适的地方创建一个名为bookshop的路径,然后按照下列方式安装AngularJS twitter bootstrap:

    $ bower install angular
    $ bower install bootstrap

    这将会在你的bookshop路径下新建一个bower_components的文件夹,这里包含所有安装的组件

    开始使用AngularJS

    现在我们已经安装好AngularJS 了,来创建一个名为index.htmlHTML文件,这是一个基于在线书店的应用程序。

    <!doctype html>
    <html>
    <head>
        <title>Bookshop - Your Online Bookshop</title>
        <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
     
        <div class="container">
              <h2>Your Online Bookshop</h2>
        </div>
     
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    </body>
    </html>

     

    如果你在浏览器中打开它,会呈现"Your Online Bookshop"。再来瞧瞧更有趣的:

    <!doctype html>
    <html ng-app>
    <head>
        <title>Bookshop - Your Online Bookshop</title>
        <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
     
        <div class="container" ng-init="books=['Effective Java','Year without Pants','Confessions of public speaker','JavaScript Good Parts']">
            <h2>Your Online Bookshop</h2>
            <ul class="unstyled">
                <li ng-repeat="book in books">
                    {{book}}
                </li>
            </ul>
        </div>
     
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    </body>
    </html>

    这里有几点需要注意:

    1. 在我们的HTML标签中定义了ng-app. 它将初始化AngularJS 程序并激活这一段。在我们这个示例里它将作用于整个HTML
    1. 我们用的第二个AngularJS指令是 ng-init. 它把我们将要用的books这个数组初始化了。
    2. 最后一个有趣的是 ng-repeat, 用来遍历集合用所有元素。Agnular可以为每个元素添加 li元素, 所以我们在浏览器中打开能看到列表中有4本书。

     

    以上是用字符串数组形式使用使用数据,当然你也可以存储对象:

        <!doctype html>
        <html ng-app>
        <head>
                <title>Bookshop - Your Online Bookshop</title>
                <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
        </head>
        <body>     
                <div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},
    { 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"
    > <h2>Your Online Bookshop</h2> <ul class="unstyled"> <li ng-repeat="book in books"> <span>{{book.name}} written by {{book.author}}</span> </li> </ul> </div> <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>

    这里我们创建了一个books 对象,对象包含name author,最终,列表包括作者名字和书名。

    使用过滤器

    Angular 提供了帮助格式化数据的过滤器。你可以使用过滤器来格式化日期,货币,大小写字符,排序,基于过滤的搜索。以下是用过滤器将作者名和书名都转为大写字符的示例:

    <!doctype html>
    <html ng-app>
    <head>
        <title>Bookshop - Your Online Bookshop</title>
        <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
     
        <div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},
    { 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"
    > <h2>Your Online Bookshop</h2> <ul class="unstyled"> <li ng-repeat="book in books | orderBy :'name'"> <span>{{book.name}} written by {{book.author | uppercase}}</span> </li> </ul> </div> <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>

    可以看到在 ng-repeat 里我们用了 orderBy 来按照书名排序,然后在显示作者时用uppercase转为大写。

    为添加搜索过滤器,添加输入框再用过滤器来限制搜索结果:

    <!doctype html>
    <html ng-app>
    <head>
        <title>Bookshop - Your Online Bookshop</title>
        <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
     
        <div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},
    { 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"
    > <h2>Your Online Bookshop</h2> <input type="search" ng-model="criteria"> <ul class="unstyled"> <li ng-repeat="book in books | filter:criteria | orderBy :'name'"> <span>{{book.name}} written by {{book.author | uppercase}}</span> </li> </ul> </div> <script type="text/javascript" src="bower_components/angular/angular.min.js"></script> </body> </html>

    使用控制器

    控制器是AngularJS的主要组件之一。它们是为你的视图提供动力和数据的代码。在我们的示例中,可以把测试数据数组移到一个控制器中。新建一个app.jsJavaScript文件,所有的JavaScript代码都放这里。

    function BookCtrl($scope){
            $scope.books = [
                    {'name': 'Effective Java', 'author':'Joshua Bloch'},
                    {'name': 'Year without Pants', 'author':'Scott Berkun'},
                    { 'name':'Confessions of public speaker','author':'Scott Berkun'},
                    {'name':'JavaScript Good Parts','author':'Douglas Crockford'}
            ]
    }

    $scope 把控制器和视图整合,并注入到BookCtrl,现在在$scope对象中添加books数组,这个对象对视图可见。

    同时在index.html里改为使用 BookCtrl:

    <!DOCTYPE html>
    <html ng-app>
    <head>
        <title>Bookshop - Your Online Bookshop</title>
        <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    </head>
    <body>
     
        <div class="container" ng-controller="BookCtrl">
            <h2>Your Online Bookshop</h2>
            <input type="search" ng-model="criteria">
            <ul class="unstyled">
                <li ng-repeat="book in books | filter:criteria | orderBy :'name'">
                    <span>{{book.name}} written by {{book.author | uppercase}}</span>
                </li>
            </ul>
        </div>
     
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
    </body>
    </html>

    这就是今天的内容。我只接触了冰山一角,会再花几天来学习。AngularJS库真是既神奇又强大。

    原文:https://www.openshift.com/blogs/day-2-angularjs-getting-my-head-around-angularjs

  • 相关阅读:
    第二周
    第一周
    构建之法阅读笔记之三
    冲刺一(10)
    冲刺一(9)
    用户模板和用户场景
    冲刺一(8)
    第10周总结
    冲刺一(7)
    冲刺一(6)
  • 原文地址:https://www.cnblogs.com/endless-on/p/3468017.html
Copyright © 2011-2022 走看看