angularjs索引
博客专区 > cyper 的博客 > 博客详情
angularjs索引
cyper 发表于3年前
angularjs索引
  • 发表于 3年前
  • 阅读 58
  • 收藏 0
  • 点赞 0
  • 评论 1

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 准备follow一个叫Revill的家伙(tutorial + github),全部是best practice.
1. Useful links

Angularjs in 30 mintues.


###(直播中,哈哈, timing)
Angular by example

Angularjs风格指南

2. 电子书: <<Apress.Pro.AngularJS.Mar.2014.pdf>>

3. 视频教程:

https://www.youtube.com/watch?v=QETUuZ27N0w

4. 官方教程:
https://docs.angularjs.org/tutorial

5. SO上关于angular投票最高的几个问题:
http://stackoverflow.com/questions/tagged/angularjs?sort=votes&pageSize=15
http://stackoverflow.com/search?q=angularjs+worklight

6. Hello world
mkdir ~/pstorm/angular_time
从webstorm打开angular_time目录
新建一个subfolder叫hello,执行如下命令

sudo npm install -g bower
bower install angular
新建demo01.html, 内容如下:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="bower_components/angular/angular.min.js"></script>
</head>
<body ng-app>
<div>{{txt}}</div>
<input type="text" name="hello" id="hello" ng-model="txt"/>
</body>
</html>

右键 -> Open in browser, 搞定.

7.
感觉module和controller只不过命名空间罢了,规定了module是root空间, 而controller是子命名空间,controller之间可以嵌套也可以并行,不是取决于你如何chain,而是取决于他们在ui上的排列方式.

<body ng-app="app">
<div ng-controller="test1Controller">{{name}}
    <div ng-controller="test2Controller">
        {{name}}
    </div>
</div>
<script>
    var app = angular.module("app", []);
    app.controller("test1Controller", function ($scope) {
        $scope.name = "cyper";
    });
    app.controller("test2Controller", function ($scope) {
        $scope.name = "cyper2";
    });
</script>
</body>
8.
在controller这个命名空间下,可以定义属性/数据,也可以定义方法.
<body ng-app="app">
<div ng-controller="test1Controller">
    <input type="text" ng-model="name"/>
    <button ng-click="clickme()">Click</button>
</div>
<script>
    angular.module("app", [])
            .controller("test1Controller", function ($scope) {
                $scope.name = 'hello';
                $scope.clickme = function () {
                    alert($scope.name);
                };
            });
</script>
</body>

9.

在controller命名空间下定义数据, 已经知道定义简单的数据可以通过{{name}}这样的方式显示出来, 而集合类型的数据可以通过ng-repeat打印出来.

<body ng-app="app">
<div ng-controller="demo04Controller">
    <ul>
        <li ng-repeat="user in users">
            <h4>{{user.name}}</h4>

            <p>{{user.des}}</p>
        </li>
    </ul>
</div>
<script>
    function User(name, des) {
        this.name = name;
        this.des = des;
    }
    function getData(name, des, len) {
        var arr = [];
        for (var i = 0; i < len; i++) {
            arr.push(new User(name + i, des + i));
        }
        return arr
    }
    angular.module("app", [])
            .controller("demo04Controller", function ($scope) {
                $scope.users = getData("cyper", "desc", 10);
            });
</script>
</body>



参考: 代码参考forjs.org.



  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
cyper
粉丝 56
博文 619
码字总数 143069
评论 (1)
cyper
Best practice 1: 使用ControllerAs而不是$scope, 详见:http://www.revillweb.com/angularjs-by-example/3-controllers/
×
cyper
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: