文档章节

angularjs索引

cyper
 cyper
发布于 2015/02/16 02:00
字数 463
阅读 60
收藏 0
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

cyper

粉丝 58
博文 685
码字总数 143161
作品 0
武汉
前端工程师
加载中

评论(1)

cyper
cyper
Best practice 1: 使用ControllerAs而不是$scope, 详见:http://www.revillweb.com/angularjs-by-example/3-controllers/
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
Angular.js 相关记录

AngularJS作用域文档:http://docs.angularjs.org/api/ng.$rootScope.Scope ng-view 指令的角色是为当前路由把对应的视图模板载入到布局模板中。 AngularJS内置过滤器:http://code.angular...

彭博
2014/04/25
0
2
初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔
05/19
0
0
【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878
05/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

配置Spring的注解支持

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 配置Spring的注解支持 以上也提到了使用注解来配...

凯哥学堂
33分钟前
0
0
关于Spring Aop存在的一点问题的思考

在本人前面的文章Spring Aop原理之切点表达式解析中讲解了Spring是如何解析切点表达式的,在分析源码的时候,出现了如下将要讲述的问题,我认为是不合理的,后来本人单纯使用aspectj进行试验...

爱宝贝丶
35分钟前
0
0
JavaScript 概述

JavaScript是面向Web的编程语言。绝大多数现代网站都使用了JavaScript,并且所有的现代Web浏览器——基于桌面系统、游戏机、平板电脑和智能手机的浏览器——均包含了JavaScript解释器。这使得...

Mr_ET
今天
0
0
Java Run-Time Data Areas(Java运行时数据区/内存分配)

Java运行时数据区(内存分配) 本文转载官网 更多相关内容可查看官网 中文翻译可参考 2.5. Run-Time Data Areas The Java Virtual Machine defines various run-time data areas that are use...

lichuangnk
今天
0
0
docker learn :services docker-compose.yml

docker-compose.yml定义了服务的运行参数 version: "3" services: web: # replace username/repo:tag with your name and image details image: hub.c.163.com/dog948453219/friendlyhello d......

writeademo
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部